echarts怎么能自适应页面布局

要让 Echarts 图表自适应页面布局，可以通过以下几个步骤实现：

1. 设置容器的宽高为百分比值，而不是固定像素值。这样容器的大小会随着页面布局的变化而自适应调整。

2. 在 Echarts 初始化时，设置 option 中的 grid 属性的宽高为百分比值，而不是固定像素值。这样图表的大小会随着容器的大小而自适应调整。

3. 监听窗口大小变化事件，当窗口大小变化时，重新计算容器和图表的大小，并调用 echarts 的 resize() 方法调整图表大小。

示例代码如下：

<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
  // 初始化 Echarts 图表
  var chart = echarts.init(document.getElementById('chart'));

  // 设置 option 中的 grid 属性的宽高为百分比值
  var option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      width: '90%', // 宽度为容器宽度的90%
      height: '90%' // 高度为容器高度的90%
    },
    ...
  };

  // 使用指定的配置项和数据显示图表
  chart.setOption(option);

  // 监听窗口大小变化事件，重新计算容器和图表的大小，并调用 echarts 的 resize() 方法调整图表大小
  window.addEventListener('resize', function() {
    chart.resize();
  });
</script>

这样就可以实现 Echarts 图表的自适应页面布局了。