<template>
<div ref="echart" :style="{
width:width,
height:height
}" class="echartsbox"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
options: {
type: Object,
default: {}
},
width:{
type: String || Number,
default:'100%'
},
height:{
type: String || Number,
default:'250px'
},
},
watch: {
options: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal')
if (this.echart) {
this.echart.setOption(newVal)
} else {
this.initChart()
}
},
deep: true,
},
},
beforeDestroy () {
this.echart.dispose()
this.echart = null
},
data() {
return {
echart: null //判断当前页面中是否有echart图表
}
},
methods: {
initChart() { //生成图表
if (this.echart) { //如果图表已经存在，只需要更新配置信息
this.echart.setOption(this.options)
} else { //如果不存在，则生成图表并配置信息
this.echart = echarts.init(this.$refs.echart)
this.echart.setOption(this.options)
}
let that = this;
window.addEventListener('resize', () => {
that.echart.resize();
}, false);
this.echart.on('click', function(params) {
that.$emit('echartClick',params)
});
},
},
mounted() {
this.initChart();
},
computed: {
}
}
</script>
<style lang="scss" scoped>
.echartsbox{
width: 100%;
height: 100%;
}
</style>
<EchartsBox :options="oneopt" height="250px"> </EchartsBox>
