我们都知道echarts图标数据是写在option = {}对象里，但是数据不可能是固定值，而是通过后端接口返回来的，本以为只需要在 data里设置一个变量去接收返回的数据，然后再将变量赋值给echarts就可以了，结果踩坑了！发现这样并不能生效。
经过一段时间分析，原因就是 vue axios属于异步加载数据，数据改变了，但是没有告诉echarts，导致echarts并不知道数据变化了，所以得在数据变化后告诉echarts，让它重新渲染一次。
解决办法：在vue里我们可以很好的用到 watch

这个方法很好的实现了我们想要实现的效果：当值改变之后 告诉echarts让其重新渲染
我这里给的案例是解决柱形图的 series:[{data:[]} ] data数据，解决思路呢，就是我前面提到的 设置变量去接收数据并赋值给data，具体实现

export default {
	data() {
		return {
			barData: [],// 柱形图的data数据
		}
	},
	methods:{
		interaction() {
			//综合型 推介使用
			this.$http({
				url: '', //这里填后端接口
				method: 'get',
				headers: { 'X-Requested-With': 'XMLHttpRequest' }
				// params:{

				// }
			}).then(res => {
				console.log('数据接收成功');
				console.log(res.data);
				this.barData = res.data;
			});
		},
		drawChart(val) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('data-columnar'));
			// 指定图表的配置项和数据
			let option = {
				grid: {
					//坐标系的定位
					left: 40,
					bottom: 40
				},
				tooltip: {
					trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				xAxis: {
					type: 'category', //类名轴
					data: ['一等品', '二等品', '三等品'],
					axisLine: {
						//坐标轴轴线相关设置
						lineStyle: {
							color: '#262571'
						}
					},
					axisLabel: {
						// 坐标轴刻度标签的相关设置
						show: true,
						textStyle: {
							color: '#6FCEFF',
							fontSize: 15 // 让字zhi体变大dao
						}
					},
					axisTick: {
						//x轴刻度相关设置
						show: false
					}
				},
				yAxis: {
					axisLine: {
						//坐标轴轴线相关设置
						lineStyle: {
							color: '#262571'
						}
					},
					axisLabel: {
						textStyle: {
							color: '#CFD4EB'
						}
					},
					axisTick: {
						//y轴刻度相关设置
						show: false
					},
					splitLine: {
						//网格线
						lineStyle: {
							color: '#262571'
						}
					}
				},
				series: [
					{
						name: '数量',
						type: 'bar',
						data: val,
						barWidth: 40, //柱图宽度
						itemStyle: {
							normal: {
								//柱形渐变色
								color: new echarts.graphic.LinearGradient(
									0,
									1,
									0,
									0,
									[
										{
											offset: 0,
											color: '#63FFFF' // 0% 处的颜色
										},
										{
											offset: 1,
											color: '#6858FF' // 100% 处的颜色
										}
									],
									false
								),
								label: {
									//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下
									show: true,
									position: 'top', //标签的位置
									formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
									color: '#6FCEFF'
								}
							}
						}
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			//根据窗口的大小变动图表 --- 重点
			window.addEventListener('resize', () => {
				if (myChart) {
					myChart.resize();
				}
			});
		}
	},
	mounted() {
		this.drawChart();
		this.interaction();
	},
	watch: { 
		barData(val, oldVal) {
			console.log(1111, val, oldVal);//val：是新值 oldVal：是旧值
			this.drawChart(val);
			// if(this.interaction){
			// 	if (val) {
			// 		this.drawChart(val);
			// 	} else {
			// 		this.drawChart(oldVal);
			// 	}
			// }
		}
	},	
}

这个问题的主要解决办法就是用到 watch：{}，然后 **drawChart(val){series:[ data:val]}。

方法二：this.$nextTick(()=>{})
这种方法很简单，只需要在then()里写就好

interaction() {
			//综合型 推介使用
			this.$http({
				url: '', //这里填后端接口
				method: 'get',
				headers: { 'X-Requested-With': 'XMLHttpRequest' }
				// params:{

				// }
			}).then(res => {
				console.log('数据接收成功');
				console.log(res.data);
				this.barData = res.data;
				this.$nextTick(()=>{
					this.drawChart()
            	})
			});
},
drawChart(){
	//直接赋值就行,多余的代码我就不重复了，根据方法一 来写就行
	data:this.barData
}

如果是要让图形动态变化的话 比如柱形图动态排序，一定要使用第二种方法，因为如果用watch监听的话，会一直生成定时器，导致无法清除定时器