解决vue封装的echarts组件多次调用出现id重复问题

最新推荐文章于 2023-12-21 16:24:11 发布

songywaa

最新推荐文章于 2023-12-21 16:24:11 发布

阅读量3.7k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： vue echarts 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42288182/article/details/113945775

vue 同时被 2 个专栏收录

21 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文讲述了如何在Vue项目中通过移除组件ID并使用ref属性来解决ECharts组件因ID冲突导致的渲染问题，包括初始化方式的调整和在多个子组件间重复使用的技巧。重点在于避免数据覆盖，确保图表独立显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

封装的echarts组件多次被调用，id重复，导致页面不渲染，数据覆盖等一系列问题，id从父页面传入也达不到我要的效果

解决方法

干掉id，使用ref

//修改前
<div class="component">
    <div class="WH" id="chart"></div>
</div>
//修改后
<div class="component">
    <div class="WH" ref="chart"></div>
</div>

初始化调用时，document.getElementById(‘xxx’) 改成 this.$refs.xxx

//修改前
let myChart = this.$echarts.init(document.getElementById(el));
//修改后
let myChart = this.$echarts.init(this.$refs.chart);

然后就可以重复使用了, aqiData是我传给子组件的数据

<div class="width flex1">
     <BubbleChart v-if="isShowAqiBubble" :seriesData="aqiData"></BubbleChart>
</div>
<div class="width flex1">
     <BubbleChart v-if="isShowAqiBubble" :seriesData="aqiData"></BubbleChart>
</div>