echarts 多个图表在同一个页面的自适应问题

在使用echarts 做图表 那就免不了在一个页面写多给图表(已经是常态了)

环境:一个HTML页面引进多个图表的JS文件,每个JS文件单独做一种图表 方便其他页面重复调用;

原来的自适应的方法是直接:

window.onresize = function () {
    chartPie.resize();
};

此时发现:在多文件调用的时候是根本拿不到chartPie的,因为我的图表容器在JS里面生成,所以不会触发resize函数;

换个思路:在需要window.onresize的函数内直接使用echarts.init()去取:

window.onresize = function () {
    chartPie.resize();
    echarts.init(document.getElementById("chartPie1")).resize();
    echarts.init(document.getElementById("chartPie2")).resize();
    echarts.init(document.getElementById("chartPie3")).resize();
    echarts.init(document.getElementById("chartPie4")).resize();
};

这样,就能很好的拿到需要自适应的图表容器并且init,页面就会自适应了。

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值