页面中，多次使用同一echarts组件，页面只渲染一次

使用echarts封装了一个饼图，在页面中使用3次，发现只有第一个饼图可以正常显示。

原因：
组件中，饼图是根据id来渲染的，组件不管调用几次，id都只有一个，重复渲染组件时，发现id已经被渲染过了，就不会再进行渲染了。

解决方法：
1、调用组件时，传入不同id，根据传入的id进行渲染
2、在封装的组件中，不使用id进行绑定，而使用ref。如下图所示：

// template模版
  <div class="comp-code" ref="compCode"></div>

// script中
  mounted() {
  // myChart 可以不用在 data 中定义，直接挂载到 this上 也可
  // 使用  this.$refs.compCode 进行初始化
    this.myChart = this.$echarts.init(this.$refs.compCode);
  },

效果图：

image.png