echart在vue中id重复问题

封装的echarts组件重复调用时，id重复会导致页面不渲染，数据覆盖等一系列问题

解决方法：用ref解决了问题

 

解决方法：

//修改前
<div  id="echart"></div>

//修改后
<div  ref="echart"></div>

初始化调用时，document.getElementById(‘xxx’) 改成 this.$refs.xxx

//修改前
var myChart = this.$echarts.init(document.getElementById('echart'));
//修改后
var myChart = this.$echarts.init(this.$refs.echart);

组件调用

//1
<echart  :data="myData"></echart >
//2再次调用
<echart :data="myData"></echart >