<template>
<div class="comp-chart" ref="chart"></div>
</template>
<script>
const echarts = require('echarts')
export default {
props: {
option: {
type: Object
}
},
data () {
return {
chart: null
}
},
computed: {},
mounted () {
window.addEventListener('resize', this.resizeChart)
},
methods: {
init () {
this.$nextTick(() => {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
this.chart.off('click')
this.chart.on('click', res => {
this.$emit('click', res)
})
})
},
resizeChart () {
if (!this.chart) return
this.chart.resize()
this.$emit('resize')
}
},
watch: {
option: {
handler (val) {
if (!val) return
this.init()
},
immediate: true
}
},
beforeDestroy () {
window.removeEventListener('resize', this.resizeChart)
}
}
</script>
<style lang="scss">
.comp-chart {
width: 100%;
height: 100%;
}
</style>
