当前位置：网站首页 > 技术分类 > 正文

vue3版可视化大屏vue-big-screen-plugin

ztj100 2025-03-25 19:44 10 浏览 0 评论

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

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

项目结构

项目中所有的 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，今天就分享到这里。大家感兴趣的话可以去看一看哈。

上一篇：Web Components:自定义元素与Shadow DOM的实践
下一篇：Vue vben admin - 基于 Vue3 / Ant Design Vue 的高颜值管理后台UI框架

相关推荐

Whoosh，纯python编写轻量级搜索工具: 引言在许多应用程序中，搜索功能是至关重要的。Whoosh是一个纯Python编写的轻量级搜索引擎库，可以帮助我们快速构建搜索功能。无论是在网站、博客还是本地应用程序中，Whoosh都能提供高效的全文搜...

如何用Python实现二分搜索算法（python二分法查找代码）: 如何用Python实现二分搜索算法二分搜索（BinarySearch）是一种高效的查找算法，适用于在有序数组中快速定位目标值。其核心思想是通过不断缩小搜索范围，每次将问题规模减半，时间复杂度为(O...

路径扫描 -- dirsearch（路径查找器怎么使用）: 外表干净是尊重别人，内心干净是尊重自己，干净，在今天这个时代，应该是一种极高的赞美和珍贵。。。----网易云热评一、软件介绍Dirsearch是一种命令行工具，可以强制获取web服务器中的目录和文件...

78行Python代码帮你复现微信撤回消息!: 来源：悟空智能科技本文约700字，建议阅读5分钟。本文基于python的微信开源库itchat，教你如何收集私聊撤回的信息。...

从零开始学习 Python!2《进阶知识》 Python进阶之路: 欢迎来到Python学习的进阶篇章！如果你说已经掌握了基础语法，那么这篇就是你开启高手之路的大门。我们将一起探讨面向对象编程...

白帽黑客如何通过dirsearch脚本工具扫描和收集网站敏感文件: 一、背景介绍...

Python之txt数据预定替换word预定义定位标记生成word报告(四): 续接Python之txt数据预定替换word预定义定位标记生成word报告（一）https://mp.toutiao.com/profile_v4/graphic/preview?pgc_id=748...

假期苦短，我用Python!这有个自动回复拜年信息的小程序: ...

Python——字符串和正则表达式中的反斜杠('\')问题详解: 在本篇文章里小编给大家整理的是关于Python字符串和正则表达式中的反斜杠('\')问题以及相关知识点，有需要的朋友们可以学习下。在Python普通字符串中在Python中，我们用'\'来转义某些普通...

Python re模块:正则表达式综合指南: Python...

Python中re模块详解（rem python）: 在《...

python之re模块（python re模块sub）: re模块一.re模块的介绍1.什么是正则表达式"定义:正则表达式是一种对字符和特殊字符操作的一种逻辑公式，从特定的字符中，用正则表达字符来过滤的逻辑。(也是一种文本模式；)2、正则表达式可以帮助我们...

MySQL、PostgreSQL、SQL Server 数据库导入导出实操全解: 在数字化时代，数据是关键资产，数据库的导入导出操作则是连接数据与应用场景的桥梁。以下是常见数据库导入导出的实用方法及代码，包含更多细节和特殊情况处理，助你应对各种实际场景。一、MySQL数据库...

Zabbix监控系统系列之六:监控 mysql: zabbix监控mysql1、监控规划在创建监控项之前要尽量考虑清楚要监控什么，怎么监控，监控数据如何存储，监控数据如何展现，如何处理报警等。要进行监控的系统规划需要对Zabbix很了解，这里只是...

mysql系列之一文详解Navicat工具的使用(二): 本章内容是系列内容的第二部分，主要介绍Navicat工具的使用。若查看第一部分请见：...

取消回复欢迎你发表评论:

一周热门

最近发表

首页
收录
顶部