vue3(setup语法糖)+typescript+echarts5大屏可视化项目(底部附源码地址)

瓜皮伦

已于 2023-05-14 19:03:53 修改

阅读量387

点赞数 2

CC 4.0 BY-SA版权

文章标签： typescript echarts javascript

于 2023-05-14 19:01:42 首次发布

本文链接：https://blog.csdn.net/qq_39341415/article/details/130672089

作者在学习echarts5时尝试将其与vue3和typescript结合，创建了一个包含全屏功能的登录页首页demo。遇到的问题是echarts实例化不推荐使用ref，因此选择在main.ts中通过app.config.globalProperties挂载echarts到应用实例上。文章还分享了GitHub项目的链接，寻求关注。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习echarts5想结合着自己所学的vue3+ts结合起来做个demo,

效果图如下:
登录页
在这里插入图片描述
首页:

每个模块支持放大全屏的功能

踩坑:

echarts实例化不建议使用ref,echarts内部机制导致的
在main.ts中将echarts挂载到app的实例上


let app = createApp(App)
app.config.globalProperties.$charts = echarts;
app.use(router).mount('#app')

求github小心心哈哈哈~
GitHub项目地址