echart简单组件封装

<template>
  <div class="chartBox" ref="echartBox"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
​    barData: {
​      type: Array,
​      default: () => []
​    }
  },
  watch: {
​    barData: {
​      handler: function() {
​        this.initChart()
​      },
​      deep: true
​    }
  },
  mounted() {
​    this.initChart()
  },
  methods: {
​    initChart() {
​      const dom = this.$refs.echartBox
​      const myChart = echarts.init(dom)
​      myChart.setOption({
​        xAxis: {
​          type: 'category',
​          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
​        },
​        yAxis: {
​          type: 'value'
​        },
​        series: [
​          {
​            data: this.barData,
​            type: 'bar'
​          }
​        ]
​      })
​    }
  }
}

</script>
<style scoped>
.chartBox {
  width: 400px;
  height: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

遇到的问题：

封装的echart组件复用时，会警告：

上述代码如果我将this.$ref 改为 document.querySelector；那么浏览器会出来一条警告，而且只会渲染出一个图

警告内容： There is a chart instance already initialized on the dom.

      //   const dom = this.$refs.echartBox
      const dom = document.querySelector('.chartBox')
1
2

解决方式：

方式1：this.$refs

如同开始部分的代码

方式2：传入一个唯一的className或id,用来区分

<div class="chartBox" :id="eID"></div>

  props: {
    eID: {
      type: String,
      default: ''
    }
  },

  const dom = document.querySelector('#' + this.eID)
1
2
3
4
5
6
7
8
9
10