合理解决vue封装的Echarts重复渲染不显示（vue2,3通用）

项目场景：

项目场景：在通过vue封装Echarts组件，对其进行重复使用。

---

问题描述

在重复使用封装的Echarts组件时至显示一个组件

---

原因分析：

大致原因是因为Echart封装的时候直接操作的dom是绑定的为id通过document.getElementById(‘idName’)来实现dom获取的，但是我们都忘记了一个特性，id是唯一的，重复使用的时候是否会造成冲突呢？

1、因此我尝试着使用class来获取dom结果显而易见Echarts官方可能不允许，直接报获取dom语法错误
2、我有尝试着用vue的ref获取，同样不行，看来只能用id
方法：我们只需要保证复用的时候id不一样就行了，因此如下操作

---

解决方案：

1、用一个统一的div带有class属性的包裹echarts需要操作的div

<template>
	<!-- 外壳div -->
    <div class="box">
    	<!-- 渲染echarts div -->
        <div></div>
    </div>
</template>

2、动态给这个div生成id（通过父传子，prors传入动态id）

const props = defineProps({
    id: {
      type: String,
      default: "c1"
    },
    index: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: 'red'
    },
    data: {
      type: Array,
      default: () => [120, 132, 101, 134, 90, 230, 210]
    },
    xAxisData :{
        type: Array,
        default: () => ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }

3、动态获取dom就行了

      const box = document.getElementsByClassName('box');
      // 动态生成 id（不唯一）,注意，这里的props.index 是你的包裹div (box) 的序号，复用的时候会产生多个box，需要index进行定位
      box[props.index].childNodes[0].id = props.id
     // 动态获取dom
      const chartDom = document.getElementById(props.id);
      // 注意！！ 一定要加 宽和高
      chartDom.style.height='100%'
      const myMiniLineChart = $echarts.init(chartDom);