vue3+TypeScript封装echarts5组件

 

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组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。