【Vue + Echarts】DOM大小改变后重绘图表（resize）

最新推荐文章于 2024-08-29 10:05:35 发布

等时钟成长

最新推荐文章于 2024-08-29 10:05:35 发布

阅读量9.1k

点赞数 2

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

本文链接：https://blog.csdn.net/pangji0417/article/details/94461131

版权

本文讲述了在Vue项目中使用Echarts绘图，当DOM改变（如菜单栏折叠/展开）后，如何监听变化并调用Echarts的resize API来重绘图表，以确保图表尺寸适应新的DOM结构。

摘要由CSDN通过智能技术生成

Vue中使用Echarts绘图，DOM改变后重绘

1. 我的项目背景

首先，我使用Vue+Element-UI搭建的系统框架，左侧菜单栏和标题，右侧上方横条上有一个按钮，点击可以实现菜单栏的折叠与展开。
折叠菜单

2. Echarts图表不能重绘

一开始的思路，是监听DOM变化，于是在网上搜索了一些方法，但是由于本系统并不会大量地改变DOM，没有必要监听DOM宽高的变化。系统中只有折叠和展开两个状态，所以只需要简单的用一个flag表示，监听其true/false就可以了。我通过在store中创建变量isCollapse来管理折叠与展开。
store代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
   
    state: {
   
        isCollapse: false
    },
    mutations