Vue中Echarts组件复用时，因为id唯一而只生效一个的解决办法【已解决】

原创已于 2023-07-24 11:31:22 修改 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #javascript

于 2023-07-24 11:30:57 首次发布

Vue使用疑难问题与解决专栏收录该内容

2 篇文章

订阅专栏

在项目中封装的Echart组件因使用ID初始化导致重复调用时的冲突。通过将ID改为Vue的ref属性，可以避免ID重复，实现组件的多次有效使用。修改后的代码示例展示了如何使用$refs来初始化Echarts实例。

项目中封装了echart组件，想重复使用echart图表。项目开始使用id进行echart图表初始化，发现多次调用同一个组件出现id重复，导致组件只能使用一次得问题。

解决方法：

将id改为ref即可。

原始子组件代码：

<template>
    <div class="liquid">
        <div id="container"></div>
    </div>
</template>

<script>
    method:{
        this.chart = this.$echarts.init(document.getElementById("container"));
    }
</script>

修改后子组件代码：

<template>
    <div class="liquid">
        <div id="container" ref="container" ></div>
    </div>
</template>

<script>
    method: {
        this.chart = this.$echarts.init(this.$refs.container);
    }
</script>

效果如下：