echarts图表的自适应处理，包含同页面单个图表和多个图表两种情况

最新推荐文章于 2023-08-18 16:04:08 发布

圆圆01

最新推荐文章于 2023-08-18 16:04:08 发布

阅读量380

点赞数

分类专栏： Echarts 图表&地图开发

本文链接：https://blog.csdn.net/weixin_45844049/article/details/109507977

版权

Echarts 图表&地图开发专栏收录该内容

9 篇文章 5 订阅

订阅专栏

一：同页面单个图表的自适应处理

  // 基于准备好的dom，初始化echarts实例
  var chinaMap = echarts.init(document.getElementById("china-map"));
  window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize

这是单个图表的情况，要是多个图表，就会发现这样的写法会不起作用。

二：同页面多个图表的自适应处理

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("first"));
  var secondChart = echarts.init(document.getElementById("second"));
  var thirdChart = echarts.init(document.getElementById("third"));
  var fourthChart = echarts.init(document.getElementById("fourth"));
  window.addEventListener("resize", () => {
    myChart.resize();
    secondChart.resize();
    thirdChart.resize();
    fourthChart.resize();
  });