Vue + ECharts大屏可视化
<template>
<div ref="chart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'EChartsComponent',
props: {
option: {
type: Object,
required: true
}
},
data() {
return {
chartInstance: null
};
},
watch: {
option: {
handler(newOption) {
if (this.chartInstance) {
this.chartInstance.setOption(newOption);
}
},
deep: true
}
},
mounted() {
this.chartInstance = echarts.init(this.$refs.chart);
this.chartInstance.setOption(this.option);
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
if (this.chartInstance) {
this.chartInstance.dispose();
}
},
methods: {
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize();
}
}
}
};
</script>
这个代码实例展示了如何在Vue组件中集成ECharts图表,并处理图表的初始化、选项更新和窗口大小调整。这是一个基本的模板,可以根据具体需求进行扩展和定制。
评论已关闭