欢迎来到代码驿站!

当前位置:首页 >

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

时间:2020-07-20 00:40:15|栏目:|点击:

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

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

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

补充知识: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');
}

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

上一篇:解决python中0x80072ee2错误的方法

栏    目:

下一篇:R语言ggplot2边框背景去除的实现

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

本文地址:http://www.codeinn.net/misctech/2399.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有