把echarts做成通用component

新建一个组件的vue，例：@\components\graph\BarGraph.vue
内容：

<template>
  <div>
    <div ref="barGraph" class="graph" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BarGraph',
  props: {
    // 与父组件交互的数据
    xyData: {
      type: Array,
      default: null
    },
    ......
  },
  data() {
    return {
      chart: null // echarts的实例
    }
  },
  watch: {
    // xyData的数据发生变化时，重画
    xyData: {
      handler(val, oldVal) {
        this.drawChart()
      }
    }
  },
  mounted() {
    // 窗口大小变化时，组件大小随之改变
    const _this = this
    window.addEventListener('resize', () => {
      if (_this.chart) {
        _this.chart.resize()
      }
    })
  },
  methods: {
    drawChart() {
      this.chart = echarts.init(this.$refs.barGraph)

      this.chart.setOption({
        // 一些该组件的设置
        ......
        series: [{
          ......
          data: this.xyData,
        }]
      })
    }
  }
}
</script>

父组件，例：test.vue

<template>
  ......
        <!-- 引用写好的子组件 -->
        <bar-graph
          :xy-data="barXyData"
        />
</template>

<script>
import BarGraph from '@/components/graph/BarGraph' // 引入子组件

export default {
  ......
  components: {
    BarGraph
  },
  data() {
    return {
      barXyData: []
    }
  },
  created() {
    this.loadBarData()
  },
  methods: {
    loadBarData() {
    // 写自己的数据加载逻辑
    }
  }
}
</script>