当教会需求看Echars之后,他竟然Duang Duang Duang~

2,217 阅读3分钟

这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战

前言

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

感谢掘金,将继续持续输出优质文章 ~

1.jpg

一、存在问题

echarts图宽高变形。

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

二、还原场景

页面中有一个按钮,点击之后,会将v-show的echarts显示出来。

三、进行分析

因为v-show只是css的显示隐藏, v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况。

四、解决方案

有两种方案,如下:

4.1 用v-if

请在页面中显示的不要用v-show,用v-if。

我们知道v-if每次显示,都会重新去渲染组件,既然v-show因为未显示但结构已存在,导致获取不到实际的宽高,但v-show每次渲染都渲染组件,也意味着宽高可获取到。

不足:耗费性能较大,如果echarts图切换频繁的话,是不太友好的。那么就推荐用第二种方法。

4.2 resize

还是使用v-show,每次显示的时候,重新加载echarts的resize()方法,手动让它重新计算一次宽高。

代码如下:

reload() {
      setTimeout(() => {
        // this.wChar是说我们echarts的实例
        if (this.wChart) {
          this.wChart.resize()
        }
      }, 800)
    }

这里还需要加上定时器哦,让组件显示之后,再去resize计算宽高。

补充一点的是:当窗口发生变化时,我们也需要将echarts实例重新resize一下。

可以利用原生window的addEventListener绑定resize事件,去监听窗口变化。

<div ref="rainChart"></div>
methods:{
   reload() {
      setTimeout(() => {
        // this.wChar是说我们echarts的实例
        if (this.wChart) {
          this.wChart.resize()
        }
      }, 800)
    }
},
mounted() {
    this.chart = new RainChart(this.$refs.rainChart)
    window.addEventListener('resize', this.reload)
},
beforeDestroy() {
    window.removeEventListener('resize', this.reload)
    if (this.chart) {
      this.chart.$charts.dispose()
    }
}

别忘记组件销毁后,也记得removeEventListener移出绑定resize事件。

有add,自然有remove。

有resolve,自然有reject。

吐槽一点,很多人写Promise的时候从不捕获错误事件,从不reject。

后记

接触Echarts的时候,还是在上家前后端都做的日子。那个时候真的将echarts玩出花来,还是隔壁女神教得好,泪目~

当时这些属性找了老久,官网都翻烂了。

4.png

这些节点之间的远近、节点上的数字代表相遇(人生第一次写python计算出来的),都是根据计算得出,每个公司之间的关系,涉及到利益,这里就不展开说明。

这只是Echarts的第一篇,后续持续输出。

👍 如果对您有帮助,您的点赞是我前进的润滑剂。

以往推荐

前端仔,快把dist部署到Nginx上

多图详解,一次性啃懂原型链(上万字)

老湿说的万物皆对象,你也信?

Vue-Cli3搭建组件库

Vue实现动态路由(和面试官吹项目亮点)

项目中你不知道的Axios骚操作(手写核心原理、兼容性)

VuePress搭建项目组件文档

vue-typescript-admin-template后台管理系统

原文链接

juejin.cn/post/703466…