解决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 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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 上传文件的方法(类)
2009/07/30 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JS如何设置元素样式的方法示例
2017/08/28 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
详解Python中的多线程编程
2015/04/09 Python
python分析作业提交情况
2017/11/22 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python和Go语言的区别总结
2019/02/20 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
工程专业求职自荐书范文
2014/02/18 职场文书
档案信息化建设方案
2014/05/16 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript