ChartPanel – index.vue
<template>
<div ref="chartPanel" class="chart-panel" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
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) {
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)
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>
debounce方法:
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
const last = +new Date() - timestamp;
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
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;
};
}