Echarts 目前工作用到比较多的一种技术,之前遇到后的一个问题现在空余时间解决方法记录下来 ,以便遇到此问题的能更快的知道方法。
我原本是将关系图先隐藏,然后点击按钮让它再显示出来,但是再显示时,关系图出现了问题,它变得特别小,宽高不跟随父盒子大小
变成了这样 自己调试了很久 后来找到了原因:
Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小
解决方法:
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 显示隐藏后宽度高度变小的问题,希望可以帮助到大家