vue echarts 多图 自适应

Vue Echarts 多图自适应的方法有多种，下面我列举其中两种常用的方法。

方法一：使用Vue的生命周期钩子函数进行自适应
1. 在 Vue 的 mounted 钩子函数中初始化 Echarts 图表，并将其保存为 Vue 组件的一个属性。
2. 在 Vue 的 resized 钩子函数中监听窗口大小变化事件，并调用 Echarts 的 resize 方法来实现图表的自适应。

示例代码如下：

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

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);

    // 初始化图表数据

    this.$nextTick(() => {
      this.chart.resize();
    });
  },
  created() {
    window.addEventListener('resize', this.resized);
  },
  destroyed() {
    window.removeEventListener('resize', this.resized);
  },
  methods: {
    resized() {
      this.chart.resize();
    },
  },
};
</script>

方法二：使用 Vue 监听属性变化进行自适应
1. 使用 Vue 的 watch 监听数据修改，当图表所需的数据发生变化时，调用 Echarts 的 setOption 方法更新图表。
2. 使用 Vue 的 mounted 钩子函数初始化 Echarts 图表。

示例代码如下：

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

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      chartData: {},  // 图表所需的数据
    };
  },
  watch: {
    chartData: {
      handler() {
        this.chart.setOption(this.chartData);
      },
      deep: true,
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);

    // 初始化图表数据
    this.chart.setOption(this.chartData);
  },
};
</script>

这两种方法都可以实现 Vue Echarts 图表的自适应，根据实际情况选择合适的方法即可。这样就能够保证当窗口大小变化时，图表能够自动调整和更新。