vue大数据可视化框架(vue可视化大屏项目)

之前有给大家分享一个vue2.x大屏图表可视化项目vue-big-screen。这次分享的是该项目已经更新了vue3版本。vue-big-screen-plugin基于Vue3、Typescrip

之前有给大家分享一个vue2.x大屏图表可视化项目vue-big-screen。这次分享的是该项目已经更新了vue3版本。

vue大数据可视化框架(vue可视化大屏项目)

vue-big-screen-plugin 基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)项目。

vue大数据可视化框架(vue可视化大屏项目)

项目结构

vue大数据可视化框架(vue可视化大屏项目)

项目中所有的 ECharts 图表渲染都是基于
components/echart/index.tsx 封装组件创建的,已经对数据进行了深度监听,能够动态渲染图表数据。

快速安装

# 克隆项目git clone git@gitee.com:MTrun/vue-big-screen-plugin.git# 安装依赖npm i# 运行npm run serve# 构建打包npm run build

屏幕适配方案放弃了 Vue2 版本的 rem 方案,使用更流程通用的 css3:scale 缩放方案,项目的基准尺寸是 1920px*1080px,所以支持用比例屏幕 100% 填充,如果非同比例则会自动计算比例居中填充。

# vue3文档https://v3.cn.vuejs.org/# 仓库地址https://gitee.com/MTrun/vue-big-screen-plugin

OK,今天就分享到这里。大家感兴趣的话可以去看一看哈。

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
投稿

华为荣耀9的参数介绍(华为nova9和荣耀60哪个值得入手)

2023-9-20 11:48:53

投稿

AI教程视频使用技巧(ai缩放圆角在哪里)

2023-9-20 11:49:34

搜索