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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章