apache echart with one month each year

Question

Hello, I am trying to make a line type chart. With in axis a date in the format of one month over several years. Ex July 2000, July 2001, July 2002 etc.

I have a data array with a [date, value] couple. So with the example it gives

{
    series: [{
        type: 'line',
        smooth: true,
        data: [
            [ {value: ['2000-07-01', 5884] } ],
            [ {value: ['2001-07-01', 568] } ],
            [ {value: ['2002-07-01', 5845884] } ]
        ]
    }, {
        type: 'line',
        smooth: true,
        data: [
            [ {value: ['2000-07-01', 458] } ],
            [ {value: ['2001-07-01', 5468] } ],
            [ {value: ['2002-07-01', 588484] } ]
        ]
    }]
}

and I defined in the x axis

{
    xAxis: {
        type: 'time',
        axisLabel: {
            formatter: (function(value){
                return moment(value).format('MMM YYYY');
            })
        },
    },
 }

But on the x axis I get [August 2000, September 2001, October 2002]

How can I obtain the requested result? Do I have to reformat my series and put my dates in the x axis label? thx for help.

Answer 1

The required result can be obtained using category axis, if you can provide the data for all months without gap.

xAxis.axisLabel.interval property allows you to control the interval between the labels displayed.

Refer the chart configuration below,

option = {
xAxis: {
    type: 'category',
    axisLabel: {
        formatter: (function(value){
            //return mement(value).format('MMM YYYY');
            return echarts.format.formatTime("MM-yyyy", value);
        }),
        interval: 0
    },
},
yAxis: {
    type: 'value',
},
series: [{
    type: 'line',
    smooth: true,
    data: [
        ['2000-07-01', 5884],
        ['2001-07-01', 568],
        ['2002-07-01', 5845884] 
    ]
}, {
    type: 'line',
    smooth: true,
    data: [
        ['2000-07-01', 458],
        ['2001-07-01', 5468],
        ['2002-07-01', 588484] 
    ]
}]

};