报错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>