营销网站建设维护百度经验首页
项目场景：
提示：这里简述项目相关背景：
当封装的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>