vue中在一个页面复用同一个echarts写的组件，会出现图表无法正常显示的问题！

出错原因：

因为在我这里，echarts组件是用id来找div容器，两个复用的容器的id名字都相同，为FiveBarEchart，所以组件找到的是同一个div容器，所以一个页面只会渲染出第一个echart图表，并且后面的数据会覆盖掉第一个图表的原数据。

解决办法：

那我们就换一种找div容器的方法。

在div容器上写一个ref 标记，用ref来获取div容器。就能解决一个页面复用同一个echart图表问题。

ref官方介绍: ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例。

所以我们在div容器上写 > ref=“任意名字”
要获取这个容器 > let div = this.$refs.上面取的名字

代码如下：

<template>
  <div id="myChart" ref="myChart"></div>
</template>
<script type="text/javascript">
export default { 
	methods: {
    	echartsInit() {
			let myChart = this.$echarts.init(this.$refs.myChart);
			let option = {};
			myChart.setOption(option);
		}
	},
	mounted() {
    	this.echartsInit();
  	}
}
</script>

参考文章：参考文章链接