解决 echarts动态渲染数据图形不生效问题

我们都知道echarts图标数据是写在option = {}对象里,但是数据不可能是固定值,而是通过后端接口返回来的,本以为只需要在 data里设置一个变量去接收返回的数据,然后再将变量赋值给echarts就可以了,结果踩坑了!发现这样并不能生效。
经过一段时间分析,原因就是 vue axios属于异步加载数据,数据改变了,但是没有告诉echarts,导致echarts并不知道数据变化了,所以得在数据变化后告诉echarts,让它重新渲染一次。
解决办法:在vue里我们可以很好的用到 watch
解决 echarts动态渲染数据图形不生效问题_第1张图片
这个方法很好的实现了我们想要实现的效果:当值改变之后 告诉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]}; **经过测试这样就可以实现echarts动态渲染数据了,当然方法还有很多,这里只是我采取的一种方法,可以根据解决问题的思路使用其他方法,还有什么不懂的可以评论区留言,我看到了会尽量回复大家。

你可能感兴趣的:(vue,echarts,vue.js,javascript)