Vue 开发中 Echarts 图表自适应窗口大小变化

2019.7.23 更新：对于 Echarts 实例，在 beforeDestroy 生命周期中增加 dispose 方法的调用，可减少 SPA 应用中的内存泄漏

Echarts 图表的 resize 方法不会自动调用，需要手动调用。本文介绍一种在 Vue 组件中绑定 Echarts 的自适应变化事件的例子。

样例代码

<template>
  <div ref="charts" style="height: 50vh"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    theData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
      option: {
        series: [
          {
            type: 'bar',
            data: this.theData
          }
        ]
      }
    }
  },
  mounted() {
    // 初始化 Echarts 实例
    const _this = this
    _this.chart = echarts.init(_this.$refs.charts)
    _this.chart.setOption(_this.option)

    // 绑定监听事件
    window.addEventListener('resize', _this.resizeHandler)
  },
  beforeDestroy() { // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
	// 销毁 Echarts 实例
    this.chart.dispose()
  },
  methods: {
    // Echarts 的 resize 方法
    resizeHandler() {
      this.chart.resize()
    }
  }
}
</script>

参考链接

• 基于VUE的echart图表自适应窗口大小变化插件开发
• Echarts Docs - API echartsInstance