zoukankan      html  css  js  c++  java
  • Echarts3自适应父div-情况收集

    最近做统计图表这部分,用的Echarts3,坑不少,此贴为项目中使用的Echarts坑的收集帖,希望能给遇到问题的同行提供一点点小思路。

    在搜索过程中有很多解决问题的帖子,先上解决方案
    链接一

    里边的答案基本就能解决初步问题,但是我用的还是不行,贴上我的代码

    <div id="performance" style=" 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就是固定像素的嘛,是吧,小白也没有举一反三和正确的探索指导,希望大家都能避开。

    这还只是静态数据,未来跟后台交互,希望异步请求回填数据的时候,特么不要闹幺蛾子,我先谢天谢地了

  • 相关阅读:
    从Prism中学习设计模式之Event Aggregator 模式
    Apache的HttpClient调用Https忽略证书校验
    SaltStack安装及API开启
    Java连接WebSocket服务忽略证书校验
    SpringBoot实现WebSocket服务
    MySQL主从复制搭建
    Matlab基础知识(持续更新中)
    FIFO基础知识
    图像常识知识
    VC调试记录(持续更新中)
  • 原文地址:https://www.cnblogs.com/xyJen/p/8724982.html
Copyright © 2011-2022 走看看