echarts重绘问题及在项目中的优化

问题

项目中侧边栏折叠展开后, echarts图宽度不变, 代码如下

// 监听侧边栏变化
watch: {
  sidebar: {
      handler() {
        this.handleResize()
      },
      deep: true
    },
},
methods: {
  // 因为会多次用到重绘echarts,所以封装为一个方法
  handleResize() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
}

效果如下图:

image.png

解决方法

// 在监听事件中添加一个setTimeout延时器
watch: {
  sidebar: {
      handler() {
        setTimeout(() => {
          this.handleResize()
        }, 300)
      },
      deep: true
    },
},

[注]: 为啥加一个setTimeout延时器会生效 主要是因为系统侧边栏折叠展开做了过渡动画，基本上是几毫秒（这个多少时间在代码中进行覆盖，element默认好像是小于300ms），所以这时候不加延时器，echarts重绘得时候它得一个宽度还未变化结束，所以加一个setTimeout，不然没什么效果，如果侧边栏不做过渡动画就无需加延时器。

后续优化

通过加延时器的确可以解决echarts重绘的问题,，但实际效果不理想。 因为加了延时300ms， 导致在侧边栏折叠展开时echarts图会有肉眼可见的闪一下。个人感觉用户体验不是很好，后来突然想到可以通过监听echarts外的父容器来动态对echarts进行重绘，说做就做！<br />通过父容器的resize事件，动态监听栏目的宽度变化，后来在网上找到了一个插件：element-resize-detector ，可以对页面指定元素进行监听，如下：

// 安装依赖包
npm install element-resize-detector -S

import elementResizeDetectorMaker from "element-resize-detector"

 mounted() {
    const _this = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('bottom'), element => {
      _this.$nextTick(() => {
        // 监听到事件后执行的业务逻辑
        this.handleResize()
      })
    })
  },

总结： 这种方式解决了第一总方式抖动的问题，虽然相对来说性能消耗大一点，但和好的用户体验相比可以接受，个人遇到问题思路如下：发现问题-->分析问题 --> 解决问题 -->优化解决方案