How to add the value of the last x coordinate to a dynamic Echarts chart

for a certain data statistical chart, you can choose a time range of 24 hours, 7 days or 30 days.

clipboard.png

clipboard.png

clipboard.png

you can see from the chart that there is no problem with the 24-hour and 7-day charts, but at 30 days, because the x-axis coordinate type is "category", part of it will be automatically hidden, resulting in the date of the last day is not displayed on the coordinate axis. Now the need is to add a date at the end.


option = {
    tooltip : {
        trigger: "axis",
        textStyle:{
            align:"left"
        }
    },
    smooth:true,
    color:self.colorData,
    legend: {
        data: self.legendData,
        type:"scroll",
    },
    grid:{
        ...
    },                    
    toolbox: {
        ...
    },
    calculable : true,
    xAxis : [
        {
            type : "category",
            boundaryGap : false,
            data : self.xAxisData
        }
    ],
    yAxis : [
        {
            type : "value",
            minInterval : 1,
            boundaryGap : [ 0, 0.1 ],
        }
    ],
    series : self.seriesData
};
The data obtained by

xAxis is xAxisData [], where there are several data sources, each with data [] and name attributes, and data [] has corresponding ordinate statistics count:number and Abscissa time fieldValue:str.
how do you modify the code if you want to add xAxisdata [index] .data [29] .fieldValue to the 30-day chart as the last Abscissa annotation?

Mar.29,2021

change boundaryGap to true, so that the data is in the split line, because if you want to use the last data as the annotation, the time will be a little out of alignment

.

you can try

xAxis : [
        {
            name : xTitle
            type : 'category',
            boundaryGap : false,
            data : self.xAxisData
        }
    ],

deal with xTitle outside

var xTitle = setTitlepush();
setTitlepush(function(){
    //xAxisData[index].data[29].fieldValue 
});
Menu