https://blog.csdn.net/qq_38330707/article/details/111497853

有用mark 等抽时间写个vue+TS+echarts5.0的组件文章

写个大概 带 resize的

<template><div class="echarts" :id="id"></div>
</template><script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted } from 'vue';
import * as echarts from 'echarts';export default defineComponent({name: 'TrendCharts',props: {options: {type: Object,default: () => ({}),},},setup(ctx) {const id = 'echarts-1';let chart: any = null;const initEcharts = () => {if (!chart) {const dom: any = document.getElementById(id);chart = echarts.init(dom);} else {return;}if (!ctx.options) return;chart.setOption(ctx.options);};const eventListener = () => {if (chart) {chart.resize();}};onMounted(() => {initEcharts();console.log('====YUSIR====================');console.log('window:', window);// debugger;window.addEventListener('resize', eventListener);});onBeforeUnmount(() => {window.removeEventListener('resize', eventListener);});return {id,};},
});
</script><style lang="less" scoped>
.echarts {width: 100%;height: 100%;
}
</style>