概述
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');
}
这样来回切换的时候图表的大小就不会改变了，如图：
以上这篇解决Echarts 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。
最后
以上就是忧虑自行车为你收集整理的解决Echarts 显示隐藏后宽度高度变小的问题的全部内容，希望文章能够帮你解决解决Echarts 显示隐藏后宽度高度变小的问题所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复