echarts-横坐标是日期类时,显示最后一天

echarts-横坐标是日期类时,显示最后一天_第1张图片

 echarts-横坐标是日期类时,显示最后一天_第2张图片

关键点:

xAxis属性showMaxLabel:true, 

是否显示最大 tick 的 label。可取值 truefalsenull。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。

var xdata=[];
for(var i=0;i<30;i++){
    xdata.push(getDay(i));
}

var sdata=[];
for(var i=0;i<30;i++){
    if(i%2==0){
        sdata.push(10);
    }else{
        sdata.push(20);
    }
}

option = {
    grid:{
        width:'50%',
        height:'50%',
    },
    tooltip : {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        data: xdata,
        axisLabel:{
            showMaxLabel:true,
        }
        
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: sdata,
        type: 'line',
        smooth: true
    }]
};
// 获取当前时间,day为number,getDay(-1),表示昨天的日期
function getDay(day) {
    var today = new Date();
    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds); //注意,这行是关键代码
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = doHandleMonth(tMonth + 1);
    tDate = doHandleMonth(tDate);
    return tYear + "-" + tMonth + "-" + tDate;
};

function doHandleMonth(month) {
    var m = month;
    if (month.toString().length == 1) {
        m = "0" + month;
    }
    return m;
};

 

你可能感兴趣的:(Echarts学习笔记)