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 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。