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

版权声明：本文为博主 sigmarising 原创文章，未经博主允许不得转载。 https://blog.csdn.net/sigmarising/article/details/89465340

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

---

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)
  },
  methods: {
    // Echarts 的 resize 方法
    resizeHandler() {
      this.chart.resize()
    }
  }
}
</script>

---

参考链接

基于VUE的echart图表自适应窗口大小变化插件开发