解决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中常用的SET和GET
Jan 13 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
解决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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Yii实现简单分页的方法
2016/04/29 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python如何调用字典的key
2020/05/25 Python
python的launcher用法知识点总结
2020/08/07 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
最美护士演讲稿
2014/08/27 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年党员承诺书
2015/01/21 职场文书
外出听课学习心得体会
2016/01/15 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android