echarts封装 - 1

ChartPanel – index.vue

<template>
  <div ref="chartPanel" class="chart-panel" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// echarts v4 import
// import echarts from 'echarts'
// echarts v5 import
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  name: 'ChartPanel',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    mini: {
      type: Boolean,
      default: false
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    option: {
      type: Object,
      required: true
    },
    initName: {
      type: String,
      default() { return '' }
    },
    initMap: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {
    option: {
      deep: true,
      handler(val) {
        if (this.initName && this.initMap) {
          // echarts更新到5.x之后就不能重新设置option了 必须重新init图形
          this.initChart()
        } else {
          if (this.chart) {
            this.chart.clear()
            const that = this
            that.timer = setTimeout(() => {
              that.chart.setOption(val, true)
            }, 500)
          }
        }
      }
    },
    initName: {
      deep: true,
      handler(val) {
        this.initChart()
        this.resize()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
    // 监听侧边栏的变化
    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
    this.chart.dispose()
    this.chart = null
    clearTimeout(this.timer)
  },
  methods: {
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      // this.chart = echarts.init(this.$el, 'macarons')
      if (this.initName && this.initMap) {
        echarts.registerMap(this.initName, this.initMap)
      }
      if (this.option != null) {
        this.chart.clear()
        const that = this
        this.timer = setTimeout(() => {
          that.chart.setOption(that.option, true)
        }, 500)
      }
      this.$emit('initChart', this.chart)
    },
    resize() {
      if (this.chart != null) {
        this.chart.resize()
      }
    }
  }
}
</script>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

debounce方法：

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function(...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}
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