寫了一個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);