一个页面同时多次引用同一个echarts组件，报错There is a chart instance already initialized on the dom解决

报错There is a chart instance already initialized on the dom，出现这个问题是因为这个图表已经在页面上初始化了，如果多次引用就会重复，解决思路如下：

在echarts组件页面上，通过获取id初始化图表，如果每次id不同，那么就不会出现这个问题，所以只需要动态获取Id就可以解决此问题

案例如下：

id采用随机数的获取方式：

const chartID = `chart-${Math.random().toString(36).substr(2, 9)}`

 完整代码如下：

<template>
  <div ref="lbar" class="chart-container" :id="chartID"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
const chartID = `chart-${Math.random().toString(36).substr(2, 9)}`
const initLineChart = () => {
  // console.log("折线图接收数据", props.optionData)
  var chartDom = document.getElementById(chartID)
  var myChart = echarts.init(chartDom)
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)

}
onMounted(() => {
  setTimeout(() => {
    initLineChart()
  }, 500);
})
</script>
<style scoped>
.chart-container {
  /* background-color: skyblue; */
  height: 220px;
  width: 100%;
}
</style>