<template>
<div :id="id" :ref="id" class="my-echart"></div>
</template>
<script>
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
name: 'MyEchart',
props: {
id: String
},
data() {
return {
echart: null,
observer: null
}
},
created() {},
beforeDestroy() {
if (this.observer) {
this.observer.removeListener(this.echart, this.resizeChart)
}
},
methods: {
initEchart(data) {
const vm = this
this.$nextTick(() => {
vm.echart = echarts.init(vm.$refs[vm.id])
if (!vm.echart) return
vm.observer = elementResizeDetectorMaker()
vm.observer.listenTo(vm.$refs[vm.id], vm.resizeChart)
vm.setOptionData(data)
vm.echart.on('click', this.handleClick)
})
},
setOptionData(data) {
this.echart && this.echart.setOption(data)
},
handleClick() {
this.$emit('on-click', ...arguments)
},
resizeChart() {
this.echart && this.echart.resize()
},
// 注册点击事件
rgClickEvent(cb) {
this.$nextTick(() => {
this.echart && this.echart.on('click', cb)
})
}
}
}
</script>
<style lang="less" scoped>
.my-echart {
height: 100%;
width: 100%;
}
</style>