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

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

### 目录 ###

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

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

// 基于准备好的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();
      });

## 参考 ##

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

[echarts_echarts_resize_ - _ - _ https_www.cnblogs.com_goloving_p_9008165.html]: https://www.cnblogs.com/goloving/p/9008165.html

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

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

相关阅读

相关 echarts图表演示图表演示

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

怼烎@/ 2023年09月29日 18:25/ 0 赞/ 37 阅读

相关 echarts图表随屏幕的宽度自适应

图表的自适应chart.resize() 有时候会遇到屏幕宽度在变化，而echarts的图表保持原宽度不变的情况： ![在这里插入图片描述][70] 只需要在图表数

﹏ヽ暗。殇╰゛Y/ 2022年12月20日 02:59/ 0 赞/ 262 阅读

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

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

红太狼/ 2022年12月19日 03:43/ 0 赞/ 256 阅读

相关 ECharts如何让图表自适应

1.获取图表id let myChar = echarts.init(document.getElementById('char')); 2.生成图表

￡神魔★判官ぃ/ 2022年12月05日 15:20/ 0 赞/ 268 阅读

相关图表对浏览器自适应和svg图表缩放问题

1、一个页面有多个图表的时候，分别使用window.onresize的时候只有一个图表可以自适应浏览器窗口宽度解决: 在每个图表的setOption后面加上如下代码

墨蓝/ 2022年11月24日 11:27/ 0 赞/ 312 阅读

相关 Echarts多个图表自适应窗口大小

页面中只有一个 `echarts` 图表时和有多个 `echarts`图表时，设置自适应的方法是不一样的一个 echarts 图表自适应 let myChar

心已赠人/ 2022年11月11日 05:26/ 0 赞/ 306 阅读

相关 vue--echart图表自适应父级div

问题描述: 在做vue项目中,使用echart后,后台系统左侧菜单在默认的情况下是有几百的宽度,在点击缩小菜单后宽度会变小, 缩小后右侧视图中的echart图表并没有自适

约定不等于承诺〃/ 2022年09月02日 11:59/ 0 赞/ 282 阅读

相关 echarts图表大小自适应

1.还是我上一篇echarts简单使用的例子：如果是随windows的width和height自适应的话，如下： var echartsWarp= docume

约定不等于承诺〃/ 2022年06月08日 10:13/ 0 赞/ 451 阅读

相关 Echarts 多个图表

[一个Option 四个均匀分布图表][Option] ![20180406111258634][] var dataAll = [

矫情吗；*/ 2022年05月28日 12:56/ 0 赞/ 372 阅读

相关 echarts实现一个页面同时显示多个图表

今天群里有小姐姐问同一个页面显示多个图表，如何操作？先抛出一个官方的例子：[https://gallery.echartsjs.com/editor.html?c=xhju

短命女/ 2021年11月17日 22:28/ 0 赞/ 1497 阅读