https://blog.youkuaiyun.com/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>