echartsのグラフが、vueで自動調整される方法は何ですか？

VueでEChartsのグラフを使用する際、ウィンドウサイズの変化を監視して、グラフのサイズを動的に調整し、レスポンシブデザインを実現することができます。具体的な手順は以下の通りです：

1. VueコンポーネントにEChartsを導入し、mountedフックでグラフを初期化します。

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    // 初始化图表
    this.chart.setOption({...})
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.chart.resize()
    }
  },
  beforeDestroy() {
    // 在组件销毁前移除resize事件监听
    window.removeEventListener('resize', this.handleResize)
  }
}

1. 参照

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

窓サイズが変わった場合に、EChartsグラフが自動的にサイズを調整して、グラフの表示効果を維持することができます。