Vue多页面使用同一个echarts，只会出现一个

Mr.LiLong

已于 2022-07-05 11:06:05 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

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

于 2022-07-05 11:04:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43086723/article/details/125615341

7 篇文章

订阅专栏

本文介绍了当使用ECharts创建多个图表时出现ID冲突的问题及解决方法。提供了两种实用方案：一是利用Vue的ref特性直接获取DOM元素；二是为每个图表动态绑定唯一ID，确保每个图表的独立性。

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

首先echarts的创建方式，是通过获取元素的id初始化echarts实例，所以在渲染时，两个元素的id相同只会出现一个echarts图表

<div id="block2-1" style="width: 100%;height: 100%;"></div>
const charts = echarts.init(document.getElementById('block2-1'));

<div ref="block2_1" style="width:300px; height: 300px;"></div>
const charts = echarts.init(this.$refs.block2_1)

使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。

因为两个相同的id所以会覆盖，故我们设置不同的id即可。
关于id的设置，我们可以使用父组件传过来的不同的值，也可以写个不重复的随机数进行赋值，主要是能保证两个组件id不同就行

<div :id="this.elementId" style="width:300px; height: 300px;"></div>
const charts = echarts.init(document.getElementById(this.elementId))

通过以上两种方法就可以解决这个问题