vue封装echarts

Vue 封装 Echarts 的方法：

1. 安装 Echarts

使用 npm 安装 Echarts：

npm install echarts --save

2. 创建 Vue 组件

创建一个 Vue 组件，例如 `Echarts.vue`。

3. 引入 Echarts

在 `Echarts.vue` 中引入 Echarts：

import echarts from 'echarts'

4. 初始化 Echarts

在 `mounted` 钩子函数中初始化 Echarts：

mounted() {
  this.initChart()
},
methods: {
  initChart() {
    const container = this.$refs.container
    this.chart = echarts.init(container)
  }
}

5. 配置 Echarts

在 `initChart` 方法中配置 Echarts：

initChart() {
  const container = this.$refs.container
  this.chart = echarts.init(container)
  const option = {
    // 配置项
  }
  this.chart.setOption(option)
}

6. 监听组件大小变化

为了保证 Echarts 图表在组件大小变化时能够自适应，需要监听组件大小变化，并重新渲染 Echarts 图表。

mounted() {
  this.initChart()
  window.addEventListener('resize', this.resizeHandler)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler)
},
methods: {
  resizeHandler() {
    this.chart.resize()
  }
}

7. 封装成可复用的组件

将以上步骤封装成一个可复用的 Vue 组件，供其他组件使用。例如：

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

<script>
import echarts from 'echarts'

export default {
  name: 'Echarts',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    initChart() {
      const container = this.$refs.container
      this.chart = echarts.init(container)
      this.chart.setOption(this.option)
    },
    resizeHandler() {
      this.chart.resize()
    }
  }
}
</script>