解决echart在vue中id重复问题

//修改前
<div  id="echart"></div>
 
//修改后
<div  ref="echart"></div>
 

//修改前
var myChart = this.$echarts.init(document.getElementById('echart'));
//修改后
var myChart = this.$echarts.init(this.$refs.echart);

//1
<echart  :data="myData"></echart >
//2再次调用
<echart :data="myData"></echart >

<template>
  <div :id="id"></div>
</template>
 
<script setup>
import { number } from 'echarts';
import { ref, inject, onMounted, onUnmounted, defineProps } from 'vue'
import useDraw from '/src/util/useDraw.js'
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
const echarts = inject('$echarts')
let { id, option } = defineProps({
  option: Object,
  id: String
})
let tuChart = () => {
  let eg = document.getElementById(id)
  eg.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(eg)
 
  myChart.setOption(option)
 
  window.addEventListener("resize", function () {
    myChart.resize()
  })
}
 
onMounted(() => {
  windowDraw()
  calcRate()
  tuChart()
})
onUnmounted(() => {
  unWindowDraw()
})
</script>
 
<style lang="scss" scoped>
#tu {
  width: 615px;
  height: 300px;
  border: 1px solid gray;
  margin-top: 15px;
}
</style>

import charts from '../../../components/copycompnents/commonEcharts.vue'

export function createId(){
  return 'id' +Math.random()
}

import { createId } from '../../../api/createId'

let lineTwo = reactive({
  color: ['#0298DB', '#F59A23'],
  title: {
    text: '出院人次数',
    left: 80,
    top: 20,
    textStyle: {
      fontWeight: 400,
      fontFamily: 'Arial Normal',
      fontStyle: 'normal',
      fontSize: 20,
      color: '#555555'
    }
  },
  grid: {
    top: 70,
    bottom: 40,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
 
  yAxis: {
    type: 'value',
    show: true,
    min: 0,
    max: 5000,
    iterval: 1000,
    axisLine: {
      show: true
    },
    axisLabel: {
      formatter: function (value, index) {
        return value >= 1000 ? parseInt(value / 1000) + '千' : value;
      }
    },
    axisPointer: {
      type: 'shadow'
    }
  },
 
  legend: {
    // itemStyle: {},  //继承系列中属性值的颜色
    right: 80,
    top: 15,
    itemGap: 20,
    itemWidth: 9,
    itemHeight: 10,
    data: [
      { icon: 'rect', name: '今年' },
      { icon: 'rect', name: '去年' }
    ],
    textStyle: {
      fontWeight: 400,
      fontFamily: 'Arial Normal',
      fontStyle: 'normal',
      fontSize: 20,
      color: '#555555',
    }
  },
 
  series: [
    {
      name: '今年',
      symbol: 'none',
      data: [1500, 2300, 2240, 2180, 1350, 1470, 2600, 1110, 1230, 1450, 1680, 2360],
      type: 'line'
    },
    {
      name: '去年',
      symbol: 'none',
      data: [1000, 1300, 2504, 3080, 1050, 1740, 2200, 2120, 1230, 1550, 1460, 1530],
      type: 'line'
    }
  ]
})

     <div class="atlas flex">
          <charts :option="lineOne" :id="createId()" />
     </div>

<template>
  <div :id="id"></div>
</template>

let { id, option } = defineProps({
  option: Object,
  id: String
})