echarts图铺满父元素

关键点

使用new ResizeObserver，调用echart的resize()方法。

完整demo代码：

<template><div :id="id" class="echart-box"></div>
</template><script>
import * as echarts from "echarts";
export default {props: {id: {type: String,requred: true,},option: {type: Object,default: () => {},requred: true,},},data() {return {myChart: null,observer: null,};},watch: {echartsData() {this.$nextTick(this.drawLine);},},mounted() {this.$nextTick(() => {this.drawLine();this.observer = new ResizeObserver(() => this.myChart?.resize());this.observer.observe(document.getElementById(this.id));});},beforeDestroy() {this.observer?.disconnect();window.removeEventListener("resize", this.resizeChart);this.myChart?.dispose();},methods: {drawLine(echartsData) {if (!document.getElementById(this.id)) return;this.myChart?.dispose();this.myChart = echarts.init(document.getElementById(this.id));this.myChart.setOption(this.option, true);this.myChart.resize();window.addEventListener("resize", this.resizeChart);},resizeChart() {if (this.myChart) {this.myChart.resize();}},},
};
</script>
<style scoped>
.echart-box {width: 100%;height: 100%;
}
</style>