?

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>

?

總結

以上是生活随笔為你收集整理的vue3+TypeScript封装echarts5组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。