vue3 echarts 自适应

在 Vue3 中集成 ECharts 的自适应布局通常是指图表能够在不同屏幕尺寸或分辨率下自动调整其大小和样式，以保持良好的显示效果。ECharts 提供了 `resize` 事件监听器以及一些配置选项来支持这个特性。

1. **响应式设计**：Vue 本身有很好的响应式更新能力，结合 ECharts 的 `resize` 方法，可以在视图尺寸改变时重新计算和绘制图表，例如：

mounted() {
  this.$echarts_instance.resize();
},
watch: {
  'windowWidth': function () {
    this.$echarts_instance.resize();
  }
}

2. **比例尺缩放**：使用 ECharts 的 `responsive` 配置可以设置图表在不同宽度下显示不同级别的细节。例如：

options: {
  responsive: true,
  responsiveOption: [
    { // 当视口宽度小于600px时的配置
      width: '100%',
      minWidth: 300, // 最小宽度
      maxZoom: 1, // 最大缩放比例
    },
    { // 另外的适应场景...
    }
  ]
}

3. **自适应图例**：通过设置 `legend` 的 `data-align` 和 `show-empty`，可以让图例根据内容和空间动态调整位置和显示策略。