e solve the problem that the x-axis statistic time appears at the interval of charts column chart

The problem with the x-axis statistical time interval displayed in the column chart using Echarts today appears:

The data is all taken, and the JSON array is complete and it's time to show

The following figure:

Div for JSP page code

<div class= "F-r w-b45" >
<div id= "Promonthcount" style= "min-width:310px; margin:0 auto;padding-top:50px; " ></div>
<span class= "Title-ind-bule" > Project growth </span>
<div id= "pro_tips" style= "Display:none" class= "index-tips" ><span class= "Icon-bule-tips" ></span> Currently there are countless data available will be for you to statistics <a href= "" class= "Keylink" title= "chart" target= "_blank" > Chart </a></div>
</div>

JS Code

var MyChart;
var Arrprocount;
var procountmonth;
var procount=0;

function Getprocount () {
var result = Doajax ("POST", Web_url + '/views/getprocount ', {}, False);
result = Eval ("[+ result +]");
var results = Result.results;
Arrprocount = [];
Procountmonth = [];

for (var i = 0, j = results.length I < J; i++) {
var curr_result = results[i];
var curr_count = parseint (curr_result.quantity);
var Curr_arr = [Curr_result.countmonth, Curr_count];

Arrprocount.push (Curr_count);
Procountmonth.push (Curr_result.countmonth);

Procount + = Curr_count;
}
}
function Getprocountchart () {
if (Procount = = 0) {
$ ("#pro_tips"). Show ();
Return
}
$ ("#proMonthCount"). CSS ("height", 400);

alert (procountmonth);
alert (Arrprocount);
Initialize the Echarts chart based on the prepared DOM
MyChart = Echarts.init (document.getElementById (' Promonthcount '));
var option = {
Title: {
Text: ' Project Engineering growth '
},
ToolTip: {
Trigger: ' axis '
},
Legend: {
data:[' Project Engineering Number ']
},
Toolbox: {
Show:true,
Feature: {
DataView: {show:true, readonly:false},
Magictype: {show:true, type: [' line ', ' Bar ']},
Restore: {show:true},
Saveasimage: {show:true}
}
},
Calculable:true,
Xaxis: [
{
Type: ' Category ',
Data:procountmonth,

}
],
YAxis: [
{
Type: ' Value '
}
],
Series: [

{
Name: ' Number of project projects ',
Type: ' Bar ',
Data:arrprocount
}
]
};
Loading data for a Echarts object
mychart.setoption (option);

}

Later, after constant adjustment, while looking at the API, constantly looking for reasons, add a few lines of code is good

To modify the code below, see the Red section:

var MyChart;
var Arrprocount;
var procountmonth;
var procount=0;

function Getprocount () {
var result = Doajax ("POST", Web_url + '/views/getprocount ', {}, False);
result = Eval ("[+ result +]");
var results = Result.results;
Arrprocount = [];
Procountmonth = [];

for (var i = 0, j = results.length I < J; i++) {
var curr_result = results[i];
var curr_count = parseint (curr_result.quantity);
var Curr_arr = [Curr_result.countmonth, Curr_count];

Arrprocount.push (Curr_count);
Procountmonth.push (Curr_result.countmonth);

Procount + = Curr_count;
}
}
function Getprocountchart () {
if (Procount = = 0) {
$ ("#pro_tips"). Show ();
Return
}
$ ("#proMonthCount"). CSS ("height", 400);

alert (procountmonth);
alert (Arrprocount);
Initialize the Echarts chart based on the prepared DOM
MyChart = Echarts.init (document.getElementById (' Promonthcount '));
var option = {
Title: {
Text: ' Project Engineering growth '
},
ToolTip: {
Trigger: ' axis '
},
Legend: {
data:[' Project Engineering Number ']
},
Toolbox: {
Show:true,
Feature: {
DataView: {show:true, readonly:false},
Magictype: {show:true, type: [' line ', ' Bar ']},
Restore: {show:true},
Saveasimage: {show:true}
}
},
Calculable:true,
Xaxis: [
{
Type: ' Category ',
Data:procountmonth,
Boundarygap:true,
Show:true,
axislabel:{
interval:0
}
}
],
YAxis: [
{
Type: ' Value '
}
],
Series: [

{
Name: ' Number of project projects ',
Type: ' Bar ',
Data:arrprocount
}
]
};
Loading data for a Echarts object
mychart.setoption (option);

}

The main is to modify the Xaxis Boundarygap:

Xaxis: [
{
Type: ' Category ',
Data:procountmonth,
Boundarygap:true,
Show:true,
axislabel:{
interval:0
}
}
],