提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

优化了三年经验者的Echarts卡顿

2023-03-31 10:34:23 时间

前言

  • 在线音乐戳我呀！
  • 音乐博客源码上线啦！
  • 前几篇讲了Docker的安装部署，操作算是比较简单的。（入门级）
  • 自从教需求学会去echarts官网找例子后，现在需求直接给我echarts链接，让我实现出来。
  • 你以为的原封不动？实则是在此基础上，再画龙添足。
  • 有一次说加载数据太多，页面会卡顿，需求立马上官网写上5k数据，说还可以啊。可以是可以，但人家显示一个，你要一个页面显示5个图表，这性能加载翻五倍了呀，姐姐。
  • 接下来将分享工作以来写Echarts心得，一五一十盘出。
  • Are you ready ？

一、存在问题

echarts图位置变小，变形之后还出现卡顿现象。

下面我们分析为什么会存在该问题。

二、还原场景

有一个按钮，点击之后，echarts图占的位置变小，此时echarts会变形，需要重新计算大小。那么怎么计算呢？

三、进行分析

三年经验者的思路。

3.1 ResizeObserver

使用浏览器提供的一个API：ResizeObserver，ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。

mounted() {
    this.objResizeObserver = new ResizeObserver(() => {
        if (this.lineChart) {
            console.log(111)
            this.lineChart.resize()
        }
    })
    this.objResizeObserver.observe(this.$refs.chartBox)
}
复制代码

如果在ResizeObserver内部打印一下，会发现点击按钮时，echarts图占的位置变小，会多次触发ResizeObserver，因为宽度在不停的变动，所以打印50次111（因为有五个图），就意味着chart被resize十次，所以页面会导致很卡。

效果观看可戳我

我问他，你不觉得你的页面很卡顿吗？他说还行吧，这个效果我已经优化过了。

原本他在ResizeObserver内部做了赋值，如果值不为空就不resize，说原来resize已经优化过了。

接着问：怎么不用resize方法，他说没用。

那好，我写给你看。

3.2 resize

window监听resize事件。如下：

window.addEventListener('resize', setTimeout(() => {
    if (this.lineChart) {
        console.log(666)
        this.lineChart.resize()
    }
}, 800))
复制代码

如果在resize方法内部打印一下，会发现点击按钮时，echarts图占的位置变小，会触发resize，打印5次666（因为有五个图），就意味着chart只被resize一次，因为addEventListener、resize内部一个有做取消上一次的变化。明显不卡顿，被优化。

因为window绑定resize只是窗口变化会触发，但点击按钮的时候，echarts图占的位置变小，并不会触发resize窗口变化，这时，我们要点击按钮的时候，手动触发resize方法即可。

效果观看可戳我

window监听resize事件只触发一次，就很优化。

好了，你现在还觉得哪里不行。

三年经验者：我一开始用resize就没用。

那你是不是没用定时器给它延迟resize计算呢？

没用的话，是因为echarts实例还没有加载好，就算此时resize计算宽高，也是计算不出的。自然达不到我们要的效果。也就不生效。

四、代码如下

有两种方案，一个是ResizeObserver，另一个是resize。

4.1 ResizeObserver

<div>
    <button @click="btnClick">点击</button> 
    <div ref="chartBox" >
        <div ref="lineChart"></div>
    </div>
</div>    

data() {
    return {
        lineChart: null,
        objResizeObserver: null,
    }
},
methods:{
    // 点击事件
    btnClick(){
        // echarts图占的位置变小的逻辑
        // ...
    }
}
mounted() {    
    this.objResizeObserver = new ResizeObserver(() => {
        if (this.lineChart) {
            console.log(111)	// 多次触发
            this.lineChart.resize()
        }
    })
    this.objResizeObserver.observe(this.$refs.chartBox)
},
destroyed() {
    this.objResizeObserver = null
}
复制代码

4.2 resize

<div>
    <button @click="btnClick">点击</button> 
    <div ref="chartBox" >
        <div ref="lineChart"></div>
    </div>
</div>    

data() {
    return {
        lineChart: null
    }
},
methods:{
    // 点击事件
    btnClick(){
        // echarts图占的位置变小的逻辑
        // ...
      	this.reload()  
    },
    reload() {
      setTimeout(() => {
        if (this.lineChart) {
          console.log(666)
          this.lineChart.resize()
        }
      }, 800)
    },
},
mounted() {    
    window.addEventListener('resize', this.reload)
    // 如果echarts图是v-if，这里还需要手动调用一次resize
    this.reload()
},
destroyed() {
    window.removeEventListener('resize', this.reload)
}
复制代码

知识点

echarts、ResizeObserver、window.addEventListener、resize

后记

在写Echars的时候，要注意自适应，会不会变形，吐槽Echarts的属性真的多，但又间接说明他的强大，可扩展性强，又不得不想起和女神共处事的日子，那个时候我还是那个少年。

相关文章