echarts 一页多图表自适应

sszc 发布于 2015/10/30 14:38
阅读 2K+
收藏 0
使用window.onresize = myChart.resize(),加载页面图表后,页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应,怎么办呢?
加载中
0
laz
laz

     一个图表对应一个myChart对象,你要所有图表只适应,就需要监听所有图表的div变化,然后调 用resize()方法。

     我的解决方法是:对每个图表div监听变化(百度有监听方法),传入div与当前图表myChart对象,div变化,调用myChart.resize()   

    

    function addDivResizeListener(div, chart) {
         $(div).resize(function() {
         chart.resize();
    });
}

laz
laz
用到是echarts单文件加载模式,echarts是一个全局对象
s
sszc
你那个循环中的echarts是哪里来的?
0
s
sszc

引用来自“深渊魔皇”的评论

     一个图表对应一个myChart对象,你要所有图表只适应,就需要监听所有图表的div变化,然后调 用resize()方法。

     我的解决方法是:对每个图表div监听变化(百度有监听方法),传入div与当前图表myChart对象,div变化,调用myChart.resize()   

    

    function addDivResizeListener(div, chart) {
         $(div).resize(function() {
         chart.resize();
    });
}

我是将所有图片的myChart变成全局的,然后调用 

window.addEventListener("resize", function () {
    myChart1.resize(); 
    myChart2.resize()
    myChart3.resize()
    myChart4.resize()
    myChart5.resize()
    myChart6.resize()
    myChart7.resize(); 
 });


返回顶部
顶部