vue封装的echarts组件多次被同一个页面调用出现的问题

当我们在封装了echarts组件之后，需要在同一个页面中引入多次时，会出现数据覆盖等一系列问题
当时我是修改了id也无济于事，达不到我需要的效果
解决方案
其实很简单，修改一点就好了，将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分

<template>
  <div>
    <div class="echarts my-echarts" ref="echarts"></div>
  </div>
</template>

初始化时我们将

   this.charts = echarts.init(document.getElementById(echarts));

更改为

   this.charts = echarts.init(this.$refs.echarts);

然后就可以在页面中重复引入啦

页面正常引入我们封装的echarts组件，需要几个就写入几个

<div class="chart1">
	<Chartmini :chartData="chartdata" />
</div>
<div class="chart1">
	<Chartmini :chartData="chartdata1"/>
</div>

因为重复使用的两次echarts数据不同，data中我写入两组数据

import Chartmini from "../../../components/chartsviews/Chartviewmini";
export default {
  data() {
    return {
      chartdata: [
        "2020/01/02",
        "2020/01/05",
        "2020/01/08",
        "2020/01/12",
        "2020/01/15",
        "2020/01/22",
        "2020/01/12",
        "2020/01/15",
        "2020/01/22"
      ],
      chartdata1: [
        "2020/01/02",
        "2020/01/05",
        "2020/01/08",
        "2020/01/12",
        "2020/01/15",
        "2020/01/22",
        "2020/01/12",
        "2020/01/15",
        "2020/01/22"
      ],
    	}
      }
    	}

这样就可以在同一个页面中重复多次的引入我们封装的echarts组件啦