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组件相关推荐

vscode svn使用_使用Typescript封装Vue组件
一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code ...
vue2+webpack/vue3+vite 封装svg组件总结笔记
一.vue2+webpack 1.npm安装依赖包 npm i svg-sprite-loader package.json "svg-sprite-loader": " ...
vue3 简单封装GoogleMap组件
关于支持vue3的GoogleMap,暂时推荐两种 vue3-google-map vue3 google maps 大家有较好的推荐欢迎交流我这里选用的第二种 npm install -S @fa ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
vue3中，echarts使用（四）02——柱状图之堆叠条形图-定制化封装切换tag标签组件封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件效果代码 1.主页面 index.vue <temp ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...
Vite+Vue3+TypeScript
2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...

vue3+TypeScript封装echarts5组件

vue3+TypeScript封装echarts5组件相关推荐

最新文章

热门文章