解决Echarts 显示隐藏后宽度高度变小的问题


Posted in Javascript onJuly 19, 2020

Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因

原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小。

解决:将初始化放在click事件里,给一个flag 控制显示隐藏。

解决Echarts 显示隐藏后宽度高度变小的问题

补充知识:echarts图表隐藏之后再展示出现变形

问题描述:使用echarts制作了仪表盘的图表,起初图标在页面中隐藏,点击某一按钮切换时,显示图表,发现图表的宽高被缩小了,异常显示,如图:

解决Echarts 显示隐藏后宽度高度变小的问题

解决方法:

1.在完成绘画echarts后添加代码:$(window).resize(myChart.resize);

var dom = document.getElementById("jindu");
var myChart = echarts.init(dom);
option = {
 ......
}
myChart.setOption(option);
$(window).resize(myChart.resize);

2.在图表要显示的地方添加代码:$(window).trigger(‘resize');

if(gmFlag == 1){
   $(".allscore").show(); 
   $(window).trigger('resize');
}

这样来回切换的时候图表的大小就不会改变了,如图:

解决Echarts 显示隐藏后宽度高度变小的问题

以上这篇解决Echarts 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
几行js代码实现自适应
2017/02/24 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
大型会议策划方案
2014/05/17 职场文书
个人求职自荐信范文
2015/03/06 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
小学中队委竞选稿
2015/11/20 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
详解python字符串驻留技术
2021/05/21 Python
Mysql文件存储图文详解
2021/06/01 MySQL