vue3 echarts图表自适应

Vue3 中的 ECharts 图表实现自适应通常需要配合 Vue 的响应式特性以及 ECharts 提供的一些配置选项。以下是实现图表自适应的基本步骤：

1. **挂载到响应式元素**：将 ECharts 组件绑定到一个动态大小的 DOM 元素上，比如 `v-if` 或者 `v-for` 结构下的一个元素。

<template>
  <div ref="chartContainer" :style="{ width: containerWidth + 'px', height: containerHeight + 'px' }"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import echarts from 'echarts';

const chart = ref(null);
const containerWidth = ref(0); // 根据窗口宽度计算
const containerHeight = ref(0);

onMounted(() => {
  const myChart = echarts.init(document.getElementById('chartContainer'));
  // 初始化并设置图表配置
  // ...
  
  // 当容器大小变化时自动调整图表大小
  window.addEventListener('resize', () => {
    containerWidth.value = document.documentElement.clientWidth;
    containerHeight.value = document.documentElement.clientHeight - 50; // 遗留空间给其他元素
    if (chart.value) {
      chart.value.resize();
    }
  });
});
</script>

2. **使用 resize 方法**：ECharts 的 `resize()` 方法可以让你的图表根据容器的尺寸实时调整大小。这里在窗口大小改变时调用它。

3. **配置项设置**：在初始化图表时，你可以设置一些属性来帮助图表更好地适应不同尺寸，例如：

// 示例配置
const option = {
  responsive: true, // 开启响应式布局
  aspectRatio: undefined, // 指定宽高比，若为undefined则按1:1
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: ({ value }) => `${value}`
  },
  series: [
    {
      data: [],
      type: 'bar', // 替换成你的图表类型
      // 更多自适应相关的配置...
    }
  ]
};