Vue解决echart在element的tab切换时显示不正确问题

最新推荐文章于 2026-06-15 11:35:15 发布

原创最新推荐文章于 2026-06-15 11:35:15 发布 · 334 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #javascript

收录于

echart 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个关于ECharts图表渲染的问题及解决方案。在切换图表时，通过删除实例属性'_echarts_instance_'可以成功地重新初始化并渲染ECharts图表。此方法适用于需要动态更新或重置ECharts图表的场景。

每次切换的时候把实例属性’_echarts_instance_移除就可以成功渲染

// echart图表初始化，echartH为图表高度，echartRefs为元素ref
        echartInit(echartH, echartRefs) {
            let boxH = echartH;
            let { height } = { height: boxH };
            let echartref = this.$refs[echartRefs];
            document.getElementById(this.id).removeAttribute('_echarts_instance_');   //  关键点
            if (echartref) {
                let columnarChart = this.echarts.init(echartref, null, {
                    height: height
                });
                return columnarChart;
            }
        },