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

红太狼 2022-12-19 03:43 308阅读 0赞

目录

    • 一：同页面单个图表的自适应处理
    • 二：同页面多个图表的自适应处理
    • 参考

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

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

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

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

  1. // 基于准备好的dom，初始化echarts实例
  2.   var myChart = echarts.init(document.getElementById("first"));
  3.   var secondChart = echarts.init(document.getElementById("second"));
  4.   var thirdChart = echarts.init(document.getElementById("third"));
  5.   var fourthChart = echarts.init(document.getElementById("fourth"));
  6.   window.addEventListener("resize", () => { 
  7.     myChart.resize();
  8.     secondChart.resize();
  9.     thirdChart.resize();
  10.     fourthChart.resize();
  11.   });

参考

  • echarts使用技巧（一）echarts的图表自适应resize问题、单选、缩放等 - 古兰精 - 博客园 https://www.cnblogs.com/goloving/p/9008165.html

发表评论

表情：
评论列表 （有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

    相关 echarts图表演示图表演示

    eCharts图表演示 比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。 郑州的大数据产

    怼烎@怼烎@/ 0 赞/ 92 阅读