Responsive ECharts in Vue: Resize Guide

When using ECharts charts in Vue, you can dynamically adjust the size of the chart to make it responsive by listening to window size changes. The specific steps are as follows:

1. Import ECharts in Vue components and initialize the chart in the mounted hook.

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. Reference

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

In this way, the ECharts chart will automatically adjust its size to maintain its display effect when the window size changes.