Vue 页面多次渲染 echarts 封装的组件但只出现一个（原因分析，多方案解决，最后附上源码）
原因分析
首先我们要知道 echart 实例的创建方式
通过获取 div 的 id 从而初始化 echarts 的实例，所以进行渲染时，两个 div 的 id 相同从而导致只能渲染出来一个图形
<div id="main" style="width: 400px; height: 400px"></div>
var myChart = echarts.init(document.getElementById('main'))
解决方案
上面已经得出了 因为 id 相同导致渲染不出来的 原因，所以经过验证有目前我想出了两个方案：
- .切换为 ref 获取元素
dom 只有一个 id，所以会出现覆盖的情况。我们需要把 id 改为通过 ref 获取到组件
<div ref="echarts" style="width:300px; height: 300px;"></div>
var myChart = echarts.init(this.$refs.echarts)
使用 ref 我们就不需要获取 DOM 结点了。$ref 如果注册在元素上，它指向的就是 DOM 元素，如果注册在组件上，他指向的就是组件的实例。
- .给组件绑定动态 id
因为两个相同的 id 所以会覆盖，故我们设置不同的 id 即可。
关于 id 的设置，我们可以使用父组件传过来的不同的值，也可以写个不重复的随机数进行赋值，主要是能保证两个组件 id 不同就行
<div :id="this.num" style="width:300px; height: 300px;"></div>
var myChart = echarts.init(document.getElementById(this.num))