<div style="width: 100%; height: 100%" class="echarts" ref="chart"></div>
</div>
props: {
chartData: { type: Object },
},
watch: {
chartData: {
handler(val, oldVal) {
if (val && JSON.stringify(val) != "{}") {
this.$nextTick(() => {
this.setOption();
});
}
},
deep: true,
},
index() {
this.setOption();
},
listenComponentState: function (val, oldval) {
},
},
computed: {
listenComponentState() {
return this.$store.state.globalData.clickMenu;
},
},
data() {
return {
active: 0,
charts: null,
};
},
mounted() {
this.drawCharts();
window.onresize = () => {
this.setOption();
};
},
methods: {
setOption() {
const option = this.chartData;
this.charts.setOption(option, true);
window.addEventListener("resize", this.charts.resize);
},
drawCharts() {
this.$nextTick(() => {
this.charts = this.$echarts.init(this.$refs.chart);
this.setOption();
var _this = this;
});
},
},
};
.echartsCommon {
height: 100%;
.echarts {
div {
width: 100%;
}
}
}