当前位置：首页 > news >正文

vue封装的echarts组件被同一个页面多次引用只显示一个的问题

news 来源：原创 2025/6/15 7:48:32

项目场景：

提示：这里简述项目相关背景：

当封装的Echarts组件在同一页面重复引入时，如何避免数据覆盖的问题。关键在于将组件中的id更改为ref，并在初始化时使用refs来获取元素，从而实现多个Echarts实例的独立。

分析：

提示：这里填写问题的分析：

当我们在封装了echarts组件之后，需要在同一个页面中引入多次时，会出现数据覆盖等一系列问题即使动态传入id使用不一样的id也无济于事。

解决方案：

提示：这里填写该问题的具体解决方案：

1：将我们封装的组件中的`id选择器`删掉，换成`ref`

<template><!-- 嵌套环状图 --><div ref="chartsRef"v-if="listData1.length&&listData2.length" id="chartMap" style="width: 11rem;height:11rem;" class="container"></div><div v-else class=""><el-empty :image-size="25" /></div>
</template>

2：初始化时我们将id更换为ref

<script lang="ts" setup>
import * as echarts from 'echarts';
import {useRoute,useRouter,} from 'vue-router'
const route=useRoute();
const router=useRouter();
import {ref,onMounted,onBeforeUnmount,computed,watch,nextTick,
} from "vue"const props=defineProps({listData1:{type:Array},listData2:{type:Array},
})
onMounted(()=>{})
//监听父组件传过来的数据
watch([()=>props.listData1,props.listData2],([newVal1,lodVal1],[newVal2,lodVal2])=>{if(props.listData1.length&&props.listData2.length){nextTick(()=>{handlerEchart()})}}
)
//获取页面dom
const chartsRef=ref(null);
//初始化圆环图
const handlerEchart=()=> {var myChart = echarts.init(chartsRef.value);var option;option = {tooltip: {trigger: 'item',position: ['80%', '70%'],//悬浮显示在右下},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},color:['#5486BA','#046C61','#2C7490','#7EE3D8','#429AB6'],//修改图表颜色series: [{name: '外部',type: 'pie',radius: ['50%', '70%'],center: ['50%', '50%'],data:props.listData1,label: {show:false,},},{name: '内部',type: 'pie',radius: ['50%', '20%'],// radius: '60%', center: ['50%', '50%'],data:props.listData2,label: {show:false,},},]};option && myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}
onBeforeUnmount(()=>{
})
const emit=defineEmits([])onMounted(()=>{console.log()
})
onBeforeUnmount(()=>{console.log()
})
</script>

3：父组件引用

<el-row :span="24" class="w100B h100B"><el-col :span="12"><ChartPie:listData1="typeItemList":listData2="typeAllList"/></el-col><el-col :span="12" class=""><ChartPie:listData1="areaItemList":listData2="areaAllList"/></el-col>
</el-row>