Echarts自适应表格

Echarts本身并不提供直接的自适应表格功能，但你可以通过一些技巧来实现Echarts图表的自适应布局，使其在不同尺寸的容器中自适应。

下面是一种常见的实现方法：

1. 使用百分比设置容器大小：将Echarts图表所在的容器元素的宽度和高度设置为百分比，例如：

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

这样，当容器的父元素大小改变时，图表会自动根据父元素的尺寸进行缩放。

2. 使用CSS Flexbox布局：将Echarts图表所在的容器元素使用Flexbox布局，并设置`.chart`元素为`flex: 1`，示例代码如下：

<div class="container">
  <div id="chart" class="chart"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.chart {
  flex: 1;
}

这样，`.chart`元素会根据剩余空间自动调整自身大小，实现自适应布局。

3. 监听窗口大小变化：在Vue组件的`mounted`方法中，使用`window.addEventListener`监听窗口大小变化，并在回调函数中调用Echarts的`resize()`方法重新计算和渲染图表，示例代码如下：

import echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'));

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      chart.resize();
    });

    // 设置图表配置项和数据
    // ...

    // 渲染图表
    chart.setOption(options);
  }
}

这样，当窗口大小发生变化时，图表会自动调整大小以适应新的窗口尺寸。

通过以上方法，你可以实现Echarts图表的自适应布局，使其在不同尺寸的容器中自动调整大小。请根据具体情况选择最适合你的方法来实现自适应布局。