1. 程式人生 > >echarts重新整理資料時x軸資料不變的問題

echarts重新整理資料時x軸資料不變的問題

寫了一個echarts,再重新整理圖形的時候,發現x軸不變,經過多方查詢發現問題,如下:

開始的時候我的寫法如下,

var myChart2 = echarts.init(document.getElementById("charts2"), 'shine');
option2 = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['使用者數','裝置數'],
//        data:[],
        y:"bottom"
    },
    grid: {
    	top: '2%',
        left: '2%',   //圖表距邊框的距離
        right: '2%',
        bottom: '4%',
        containLabel: true
    },
    xAxis: [
        {
		    type: 'category',
		    boundaryGap: false,
		    data: ['7-1','7-2','7-3','7-4','7-5','7-5','7-6','7-7','7-8','7-9','7-10','7-11','7-12','7-13'],
		    //x軸文字旋轉
		    axisLabel:{
			    rotate:30,
			    interval:0
		    }
	    }
    ],
yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} 個'
            }
        }
    ],
    series : [
        {
            name:'使用者數',
            type:'bar',
            data:[20, 21, 20, 19, 21, 22, 22, 23, 24, 23, 22, 24, 25, 24]
        },
        {
            name:'裝置數',
            type:'bar',
            data:[50, 59, 55, 60, 61, 59, 60, 62, 63, 64, 63, 65, 64,63]
        }
    ]
};
myChart2.setOption(option2);

重新整理資料部分寫法如下:

option2.legend.data=data.legendData;
option2.xAxis.data=data.xAxisData;
option2.series=data.seriesData;
myChart2.setOption(option2,true);//設定為true時不會合並資料,而是重新重新整理資料

這麼寫完後做了測試,發現在資料初始化的時候不會出現什麼問題,但是在重新整理資料時x軸總是不變,最後發現是因為xAxis我在初始化的時候賦值為一個數組,而重新整理資料的時候只是重新整理xAxis的data部分,這個時候xAxis是找不到陣列中到底哪個資料在重新整理,因此,1、你可以直接修改xAxis的值;2、你可以把xAxis的初始化部分改為非陣列。具體修改方法如下:

第一種:修改資料重新整理處

option2.legend.data=data.legendData;
/**********修改處**************/
option2.xAxis=data.xAxis;
/*****************************/
option2.series=data.seriesData;
myChart2.setOption(option2,true);//設定為true時不會合並資料,而是重新重新整理資料

第二種:重新整理圖形初始化的部分

var myChart2 = echarts.init(document.getElementById("charts2"), 'shine');
option2 = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['使用者數','裝置數'],
//        data:[],
        y:"bottom"
    },
    grid: {
    	top: '2%',
        left: '2%',   //圖表距邊框的距離
        right: '2%',
        bottom: '4%',
        containLabel: true
    },
/*****************修改處*******************/
    xAxis: {
		    type: 'category',
		    boundaryGap: false,
		    data: ['7-1','7-2','7-3','7-4','7-5','7-5','7-6','7-7','7-8','7-9','7-10','7-11','7-12','7-13'],
		    //x軸文字旋轉
		    axisLabel:{
			    rotate:30,
			    interval:0
		    }
	    },
/****************************************/
yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} 個'
            }
        }
    ],
    series : [
        {
            name:'使用者數',
            type:'bar',
            data:[20, 21, 20, 19, 21, 22, 22, 23, 24, 23, 22, 24, 25, 24]
        },
        {
            name:'裝置數',
            type:'bar',
            data:[50, 59, 55, 60, 61, 59, 60, 62, 63, 64, 63, 65, 64,63]
        }
    ]
};
myChart2.setOption(option2);