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 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“解决Echarts 显示隐藏后宽度高度变小的问题”评论...
更新动态
2024年04月29日
2024年04月29日
- Bruckner-SymphoniesNos.56-NewPhilharmoniaOrchestra,OttoKlemperer(2024)[24-192]FLA
- 群星《梦舞池3》WAV分轨
- 黄凤凤.2011-丽风金典系列VOL.1【丽风】2cd【WAV+CUE】
- 大部分情侣是食色性也的酒肉情侣 3D区X光片的囧图
- 《崩坏:星穹铁道》迎一周年!登陆游戏送10连抽
- 布兰妮与父亲达成和解:需向父亲支付200多万法律费
- Taylor Swift霉霉《THE TORTURED POETS DEPARTMENT THE ANTHOLOGY》[FLAC][766M]
- 潘美辰《金歌点唱 HDCD 》[WAV+CUE][603M]
- 久石让 《你想活出怎样的人生》原声带[FLAC][314M]
- 【原神】枫丹V4.6世界任务 | 第三章·法沙利亚狂想曲
- 【原神】1.0~4.6开服至今「全隐藏成就」统计汇总
- 方大同.2007-爱爱爱音乐会THISLOVELIVE2007【华纳】【WAV+CUE】
- 群星.2024-叶振棠80【环星】【FLAC分轨】
- 庄达菲.2024-东张西望(EP)【创娱无界】【FLAC分轨】
- dnf柯涅恩山搬砖怎么走