ECharts 自适应布局开发超详细教程（数据大屏专用）这是企业级最常用的自适应方案，使ECharts 图表、数据大屏

这是企业级最常用的自适应方案，使ECharts 图表、数据大屏能在电脑、宽屏、窄屏、1920*1080、2K、4K 都完美适配，不会变形、不会溢出、不会拉伸。

本文从 原理 → 基础布局 → ECharts适配 → 完整大屏模板 一步步教你，复制就能用。

一、先搞懂：自适应要解决什么问题？

页面容器跟着屏幕大小变化
ECharts 图表跟着容器自动缩放
文字、间距不拉伸、不变形
大屏铺满全屏，无滚动条

二、最稳定、最简单的自适应方案

直接给出 企业最常用的 2 套方案：

方案 A：vw + vh 布局（推荐！最简单、最稳定）

适合：数据大屏、报表页面 不用插件、不用计算、纯 CSS

方案 B：flex + rem + resize 动态计算

适合：复杂布局、老项目兼容

先教 方案 A（10 分钟学会），这是现在主流。

三、第一步：基础自适应页面搭建

1. 基础 HTML 结构（复制直接用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 必须加！移动端/自适应核心 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应大屏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 页面铺满屏幕 */
    body, html {
      width: 100%;
      height: 100vh;
      background: #0a1229;
      overflow: hidden; /* 禁止滚动条 */
    }

    /* 最外层容器：100%宽高 */
    .screen {
      width: 100vw;
      height: 100vh;
      padding: 1vw;
    }

    /* 网格布局（自动适应） */
    .layout {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    /* 图表盒子 */
    .chart-box {
      width: 49%;         /* 一行 2 个 */
      height: 48%;        /* 一列 2 个 */
      margin-bottom: 1vh;
      background: rgba(255,255,255,0.05);
      border: 1px solid #2266bb;
    }

    /* 图表容器必须给宽高！ */
    #main1, #main2, #main3, #main4 {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="screen">
    <div class="layout">
      <div class="chart-box"><div id="main1"></div></div>
      <div class="chart-box"><div id="main2"></div></div>
      <div class="chart-box"><div id="main3"></div></div>
      <div class="chart-box"><div id="main4"></div></div>
    </div>
  </div>

  <!-- ECharts CDN -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script>
    // 后面写图表代码
  </script>
</body>
</html>

2. 核心自适应单位说明（必须懂）

vw：屏幕宽度的 1%
vh：屏幕高度的 1%
所以：
- 100vw = 屏幕满宽
- 100vh = 屏幕满高
所有尺寸都用 vw / vh，页面就会自动适配

四、第二步：ECharts 图表自适应（最关键）

ECharts 默认不会自动跟着窗口变化，必须加 2 步：

1. 基础图表代码（复制进去）

// 初始化图表
var myChart1 = echarts.init(document.getElementById('main1'));

var option = {
  title: { text: '自适应折线图' },
  xAxis: { data: ['周一','周二','周三','周四','周五'] },
  yAxis: {},
  series: [{
    type: 'line',
    data: [120,200,150,80,70]
  }]
};

myChart1.setOption(option);

2. 让图表自适应窗口（核心代码）

// 窗口大小变化时，自动重绘图表
window.addEventListener('resize', function() {
  myChart1.resize();
});

3. 多个图表同时自适应（批量写法）

// 把图表放进数组
var charts = [myChart1, myChart2, myChart3, myChart4];

// 监听窗口变化 → 全部刷新
window.addEventListener('resize', function() {
  charts.forEach(chart => chart.resize());
});

五、第三步：字体自适应（图表文字不模糊、不变形）

ECharts 文字默认是 px，不会自适应，必须改成动态字体。

方法：写一个自适应字体函数

// 自适应字体：根据屏幕宽度自动计算
function fontSize(res) {
  let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return res;
  let scale = (clientWidth / 1920); // 以 1920 设计稿为标准
  return res * scale;
}

在 ECharts 里使用

title: {
  text: '折线图',
  textStyle: {
    fontSize: fontSize(18) // 自适应字体
  }
},
xAxis: {
  axisLabel: {
    fontSize: fontSize(14)
  }
}

这样无论屏幕大小，文字都会自动缩放！

六、第四步：完整数据大屏自适应布局（4象限经典布局）

直接给你企业最常用的大屏布局：

顶部（标题）
左 上  |  右 上
左 下  |  右 下
底部（状态条）

完整 CSS 布局

.screen {
  width: 100vw;
  height: 100vh;
  padding: 1vh 1vw;
  display: flex;
  flex-direction: column;
}

.header {
  height: 8vh;
  text-align: center;
  color: white;
  font-size: 2vw;
  line-height: 8vh;
}

.content {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.left, .right {
  width: 49.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-box {
  height: 49%;
  background: rgba(255,255,255,0.03);
  border: 1px solid #3399ff;
}

对应 HTML

<div class="screen">
  <div class="header">数据可视化大屏</div>
  <div class="content">
    <div class="left">
      <div class="chart-box"><div id="main1"></div></div>
      <div class="chart-box"><div id="main2"></div></div>
    </div>
    <div class="right">
      <div class="chart-box"><div id="main3"></div></div>
      <div class="chart-box"><div id="main4"></div></div>
    </div>
  </div>
</div>

七、第五步：最完美的自适应方案（等比例缩放，不变形）

如果你要100%还原设计图、不拉伸，用这个终极方案：

等比例缩放 JS 代码

function autoScale() {
  let designWidth = 1920;   // 设计稿宽度
  let designHeight = 1080;  // 设计稿高度
  let scale = Math.min(window.innerWidth/designWidth, window.innerHeight/designHeight);
  document.querySelector('.screen').style.transform = `scale(${scale})`;
}

// 页面加载 & 窗口变化都执行
window.onload = autoScale;
window.addEventListener('resize', autoScale);

优点：

永远保持设计稿比例
图表不会被拉伸变形
大屏行业标准方案

八、全套自适应开发总结（背会这 6 条）

容器用 100vw + 100vh 铺满屏幕
间距、大小用 vh/vw
ECharts 容器必须设置 width:100%; height:100%
必须监听 window.resize 执行 chart.resize()
字体用动态计算函数
追求完美用 scale 等比例缩放

ECharts 自适应布局开发 超详细教程（数据大屏专用）