鍍金池/ 問答/Java  HTML/ 如何在動(dòng)態(tài)的Echarts圖表中添加最后一個(gè)x坐標(biāo)的值

如何在動(dòng)態(tài)的Echarts圖表中添加最后一個(gè)x坐標(biāo)的值

某一個(gè)數(shù)據(jù)統(tǒng)計(jì)圖表，可選24h,7天或是30天等時(shí)間范圍。

clipboard.png

clipboard.png

clipboard.png

從圖中可以看出來，24h和7天的圖表都沒有問題，但是30天時(shí)，由于x軸坐標(biāo)類型為“類目”，自動(dòng)會(huì)隱藏一部分，導(dǎo)致了最后一天的日期沒有在坐標(biāo)軸上顯示出來，現(xiàn)在需求是要在最后加上日期。


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
};

xAxis拿到的data中為xAxisData[]，其中有若干數(shù)據(jù)來源，每個(gè)數(shù)據(jù)來源有data[]和name屬性，data[]中有著對(duì)應(yīng)的縱坐標(biāo)統(tǒng)計(jì)數(shù)量count:number與橫坐標(biāo)時(shí)間fieldValue:str。
如果想在30天的圖表中加上xAxisData[index].data[29].fieldValue作為最后橫坐標(biāo)的標(biāo)注，應(yīng)該要怎么修改代碼呢？

回答
編輯回答
青黛色

把boundaryGap改為true，讓數(shù)據(jù)在分割線里，因?yàn)槿绻阆Ｍ米詈蟮臄?shù)據(jù)來作為標(biāo)注全部顯示，時(shí)間會(huì)有一點(diǎn)不對(duì)齊
圖片描述

你可以試試

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

在外面去處理xTitle

var xTitle = setTitlepush();
setTitlepush(function(){
    //xAxisData[index].data[29].fieldValue 傳值處理
});
2018年9月4日 19:12