<template>
<div ref="chartEl" style="height:100%"></div>
</template>
<script>
import echarts from 'echarts'
export default {
data(){
return {
chart:null
}
},
props:{
option:{
type:Object
}
},
watch:{
option:{
handler(newValue) {
this.chart.setOption(newValue);
},
deep: true
}
},
mounted(){
this.chart = echarts.init(this.$refs.chartEl);
this.chart.setOption(this.option);
const chart = this.chart
this.chart.__resize = function(){
chart.resize();
};
setTimeout(() => {
window.addEventListener('resize',this.chart.__resize);
}, 200);
},
beforeDestroy() {
window.removeEventListener('resize',this.chart.__resize);
}
}
</script>