vue echarts自适应

Vue Echarts 是一个基于 Vue.js 的图表库，它可以方便地在 Vue.js 项目中使用 Echarts 进行数据可视化展示。关于 Vue Echarts 的自适应问题，可以通过以下几种方式来实现：

1. 使用 CSS 样式：可以通过设置图表容器的宽度和高度为百分比，使其随着父容器的大小变化而自适应调整。例如：

<template>
  <div class="chart-echarts>
  </div>
</template>

<style>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

2. 监听窗口大小变化：可以通过监听窗口的 resize 事件，在窗口大小变化时重新渲染图表。例如：

<template>
  <div class="chart-container">
    <vue-echarts :options="chartOptions" ref="chart"></vue-echarts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {...}
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$refs.chart.resize();
    }
  }
};
</script>

<style>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

3. 使用 Vue Echarts 提供的自适应方法：Vue Echarts 提供了一个 `resize` 方法，可以手动触发图表的自适应调整。例如：

<template>
  <div class="chart-container">
    <vue-echarts :options="chartOptions" ref="chart"></vue-echarts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {...}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.chart.resize();
    });
  }
};
</script>

<style>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

以上是几种常见的实现方式，你可以根据具体的需求选择适合的方法来实现 Vue Echarts 的自适应效果。