话不多说直接上代码(同事的哈)
<template>
<div>
<div v-if="!option"></div>
<div
v-else
:style="chartStyle"
:chartStyle="null"
:option="option"
ref="pChart"
></div>
</div>
</template>
<script>
export default {
props: {
chartStyle: {
type: Object,
default() {
return null;
},
},
option: {
default() {
return null;
},
},
},
data() {
return {
myChart: null,
};
},
computed: {
getData() {
return this.option;
},
},
methods: {
init() {
this.myChart = this.$echarts.init(this.$refs.pChart);
this.myChart.setOption(this.option); //根据传来的数据绘制图表
},
},
mounted() {
this.init();
},
watch: {
option: {
deep: true, // 深度监听
handler(newVal) {
console.log(newVal)
this.myChart.setOption(newVal);
},
},
},
};
</script>