Echarts 相同页面、相同组件、显示不同数据

场景如图，相同页面内显示一个组件 想要显示不同的数据而不冲突 以下操作即可解决（用到math方法的随机数来给组件不同的id名）

 子组件内：

  <div class="charts-members-resources-content">
    <div class="charts-members-resources"
         :id="chartsMembersResources"
         :style="{ width: '100%', height: '330px' }"></div>
  </div>

    const chartsMembersResources = ref(
      "chartsMembersResources" + Date.now() + Math.random()
    );
    // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(
          document.getElementById(chartsMembersResources.value)
        );

父组件：

<div class="members-resources-title">
          <div class="members-resources-title-left">
            <div class="items-title">职级分布 (12月)</div>
            <charts-members-resources :disPlayData="positionData" />
          </div>
          <div class="members-resources-title-right">
            <div class="items-title">在职/离职分布 (12月)</div>
            <charts-members-resources :disPlayData="onJobData" />
          </div>
</div>

positionData: [
        { name: "P1", value: 20 },
        { name: "P2", value: 15 },
        { name: "P3", value: 3 },
        { name: "P4", value: 10 },
        { name: "P5", value: 12 },
],
onJobData: [
        { name: "正式员工", value: 20 },
        { name: "试用期员工", value: 15 },
        { name: "离职员工", value: 10 },
],

同时，如果legend图例的数量过多可采用滚动

legend: {
            width: 10,
            height: 200,
            itemWidth: 8,
            itemHeight: 8,
            right: 25,
            top: "center",
            icon: "circle",
            type: "scroll",
            orient: "vertical",
            // 是否有动画
            // animation:true,
            // 按钮颜色
            pageIconColor: "#2abbef",
            pageIconInactiveColor: "rgb(128, 122, 122)",
            // 按钮大小
            pageIconSize: 10,
            //按钮图标
            pageIcons: {
              vertical: [
                "path://M486.912 299.56096L168.3456 618.14784a40.96 40.96 0 1 0 57.93792 57.91744L515.8912 386.4576l289.62816 289.62816a40.96 40.96 0 1 0 57.91744-57.91744L544.84992 299.56096a40.96 40.96 0 0 0-57.93792 0z",
                "path://M486.912 748.91264L168.3456 430.2848a40.96 40.96 0 1 1 57.93792-57.91744L515.8912 662.016l289.62816-289.62816a40.96 40.96 0 0 1 57.91744 57.91744L544.84992 748.91264a40.96 40.96 0 0 1-57.93792 0z",
              ],
            },
            textStyle:{
              lineHeight:16
            },
            align: "left",
            itemGap: 10,
            data: state.lineX,
          },