Echarts3自适应父div-情况收集
最近做统计图表这部分,用的Echarts3,坑不少,此贴为项目中使用的Echarts坑的收集帖,希望能给遇到问题的同行提供一点点小思路。
在搜索过程中有很多解决问题的帖子,先上解决方案
链接一
里边的答案基本就能解决初步问题,但是我用的还是不行,贴上我的代码
<div id="performance" style="width: 400px;height: 400px;"></div>
//窗口变化,重新绘制
window.addEventListener("resize", function () {
alert(123);
myChart.resize();
});
浏览器中确实 alert 了,但是该死的图表还是没反应,到底咋回事?? resize()
方法没调用?不对啊,我再加一行 alert
//窗口变化,重新绘制
window.addEventListener("resize", function () {
alert(123);
myChart.resize();
alert(456);
});
还是能弹出,resize()是调用了,到底哪里出了问题?
直到我翻到一个答案,有一个细节引起了注意
emmmmmmmmmm,陷入沉思
要不试一下?
改……
居然TM管用!!!!!
图片对比图:
What the ...
=====正经分割线=
说一下echarts自适应这个鬼玩意。
说白了,echarts是没有自适应的,好赖官方还提供了一个resize()接口让你手动调用,这个rezise()方法就是在你窗口发生变动时,调用resize()方法,不断重绘这个图表,造成自适应的假象。
其实我不太明白width设为100%有个鬼卵用,可能大概意思是充满父div,css没学好,勿喷。
再加一点,考虑到SPA应用程序侧边栏收缩,父div可能不变的情况,那个window监听函数改为jQuery resize()方法即可。
$("#stageAmountYear").resize(function(){ myChart.resize(); });
老妈子操碎了心........
问题好赖解决了,总的来说这特么就是个坑,毕竟根据官方文档5分钟教你速成图表教程,width和height就是固定像素的嘛,是吧,小白也没有举一反三和正确的探索指导,希望大家都能避开。
这还只是静态数据,未来跟后台交互,希望异步请求回填数据的时候,特么不要闹幺蛾子,我先谢天谢地了