这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战
前言
- 在线音乐戳我呀!
- 音乐博客源码上线啦!
- 前几篇讲了Docker的安装部署,操作算是比较简单的。(入门级)
- 自从教需求学会去echarts官网找例子后,现在需求直接给我echarts链接,让我实现出来。
- 你以为的原封不动?实则是在此基础上,再画龙添足。
- 有一次说加载数据太多,页面会卡顿,需求立马上官网写上5k数据,说还可以啊。可以是可以,但人家显示一个,你要一个页面显示5个图表,这性能加载翻五倍了呀,姐姐。
- 接下来将分享工作以来写Echarts心得,一五一十盘出。
- Are you ready ?
感谢掘金,将继续持续输出优质文章 ~
一、存在问题
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玩出花来,还是隔壁女神教得好,泪目~
当时这些属性找了老久,官网都翻烂了。
这些节点之间的远近、节点上的数字代表相遇(人生第一次写python计算出来的),都是根据计算得出,每个公司之间的关系,涉及到利益,这里就不展开说明。
这只是Echarts的第一篇,后续持续输出。
👍 如果对您有帮助,您的点赞是我前进的润滑剂。
以往推荐
vue-typescript-admin-template后台管理系统