解决echarts图表使用v-show控制图表显示不全的问题


Posted in Javascript onJuly 19, 2020

最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况,就像下图:

解决echarts图表使用v-show控制图表显示不全的问题

还折腾了半天,其实就是当数据请求出来后,调用绘制ehcarts时图表的时候,用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之强制渲染就可以正常显示了

解决echarts图表使用v-show控制图表显示不全的问题

正常显示图表:

解决echarts图表使用v-show控制图表显示不全的问题

补充知识:vue中v-if和v-show对echarts图的影响

背景

前几日在做UBA项目的时候有一个页面需要用echarts图展示用户对各个节目的点播量,页面结构为左侧柱状图展示节目点播量,右侧饼图和折线图展示某个节目的用户点播分布和用户点播变化趋势(如下图),因为我们造的数据是11月26日的,而进入页面默认查询最近1天的,所以刚进来肯定是查不到数据,需要自行选择时间去查询数据。而在查数据的时候出现了echarts折线图无法正确获取宽高的情况。

解决echarts图表使用v-show控制图表显示不全的问题

解决

后来在走读代码的过程中我发现对于右侧饼图和折线图的组件我是用v-show判断的,当第一次没查到数据的时候,右边的echarts图也已经初始化了,并且由于v-show的display:none而没有拿到正确的宽高,这才出现的上图的这种现象。而饼图没有出现这种现象大概是因为饼图中没有设置grid:{containLabel:true}。后来我将v-show改成了v-if,只有当柱状图获取到了数据才加载右边的元素,就再也不会有这种问题了。

解决echarts图表使用v-show控制图表显示不全的问题

解决echarts图表使用v-show控制图表显示不全的问题

以上这篇解决echarts图表使用v-show控制图表显示不全的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 #Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
初识PHP中的Swoole
2016/04/05 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php xhprof使用实例详解
2019/04/15 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
JS中数组重排序方法
2016/11/11 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
开业庆典策划方案
2014/02/18 职场文书
出生证明公证书
2014/04/09 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
小学语文教学反思范文
2016/03/03 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
详解Python中__new__方法的作用
2022/03/31 Python
nginx lua 操作 mysql
2022/05/15 Servers