写了一个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);