echarts重新整理資料時x軸資料不變的問題
阿新 • • 發佈:2018-12-14
寫了一個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);