echarts图表刷新后x轴数据变成了y轴一模一样的数据

转载自
原文链接：https://blog.csdn.net/keseliugeizuori/article/details/83022004

我的问题：
echarts图表刷新后x轴数据变成了y轴一模一样的数据。
解决：

myChart.setOption(option,true);//设置为true时不会合并数据，而是重新刷新数据

没有设置为true。
原文
《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);