可视化大屏 附源码(Vue3 + TS + DataV + ECharts)

目录

前言

✨项目代码

1、带有node_modules的项目包 🚀

2、不带有node_modules的项目包 🚀

⚒️项目屏幕大小调整

💎 使用开源项目

1、DataV 🔰

2、Echarts 🔰

3、PPchart 🔰

4、表格平滑滚动 🔰

🐋素材网站

插图库 💡

灵感网站 💡


前言

因为在实习,需要做一个大屏(糊弄领导与甲方)

所以,去找了那些开源大屏,把我觉得好看的组件都拿出来,放到我自己搞的大屏中

这样,也方便我后面再需要什么,就直接拿来修修改改就行了

然后,我就做呀做,前前后后做了3天左右,总之就是CV工程,没有什么难度,就是耗时间


效果图:

项目代码

node版本:大于等于v16.20.2

1、带有node_modules的项目包 🚀

带有node_modules的项目包——56M

 my-datiew-six-screen-npm.zip - 蓝奏云文件大小:56.7 M|icon-default.png?t=N7T8https://wwm.lanzout.com/iqzYL1txmpub

可以直接解压,然后再项目里运行命令

npm run dev # 运行项目

2、不带有node_modules的项目包 🚀

my-datiew-six-screen.zip - 蓝奏云文件大小:472.4 K|icon-default.png?t=N7T8https://wwm.lanzout.com/iLU4I1txmxnc解压后,安装包,然后再运行项目

npm install # 安装包npm run dev # 运行项目npm run build # 打包项目

⚒️项目屏幕大小调整

用了【fullScreenContainer】

这里可以自定义大小,来显示屏幕的内容

显示6个

显示3个

💎 使用开源项目

1、DataV 🔰

DataVVue 大屏数据展示组件库icon-default.png?t=N7T8http://datav.jiaminghi.com/这里的组件,我差不多都用了一遍,啊哈哈,除了地图

2、Echarts 🔰

Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。icon-default.png?t=N7T8https://echarts.apache.org/zh/index.html对于如何快速使用,就可以去看看他的示例代码

然后想单独设置属性的时候,就看他的文档

3、PPchart 🔰

PPChart - 让图表更简单让图表更简单。PPChart 提供 Echarts 收录、图表制作等服务icon-default.png?t=N7T8http://ppchart.com/#/这里面有【大量现成的图表】

4、表格平滑滚动 🔰

介绍 | 技术聊斋欢迎来到闲聊世界icon-default.png?t=N7T8https://doc.wssio.com/opensource/vue3-seamless-scroll/


🐋素材网站

插图库 💡

ByteDance IconParkIconPark, park your icon. Made by ByteDanceicon-default.png?t=N7T8https://iconpark.oceanengine.com/illustrations/2

灵感网站 💡

网址导航 - 卖PPT的小女孩“卖PPT的小女孩”是一个专注于PPT模版销售的在线平台,提供多种风格的专业、创意、商务PPT模版,满足不同客户的需求。我们致力于提供高质量的模版设计,让您轻松制作出精美的演示文稿。欢迎选购,为您的演讲或展示增添一份独特魅力!icon-default.png?t=N7T8https://www.maipptdexiaonvhai.cn/site

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803011.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

改写yolov5 tag2.0中detect.py便于结合使用

目录 detect.pydetect.py if __name__ == __main__:parser = argparse.ArgumentParser()parser.add_argument(--weights, nargs=+, type=str, default=weights/license50.pt, help=model.pt path(s))parser.add_argument(--source, type=str, default=inference/images, help=…

面了钉钉搜广增算法岗(暑期实习),秒挂。。。。

节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学,针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总…

C# 如何修改项目名称

目录 背景具体步骤1、Visual Studio中修改项目名和程序集名称以及命名空间2、修改项目文件夹名3、修改解决方案里项目的路径4、再次打开解决方案,问题解决步骤总结 名词解释解决方案(Solution)项目(Project)程序集&…

sa-token非Web上下文无法获取Request

0x02 非Web上下文无法获取Request 问题定位 在我们使用sa-token安全框架的时候,有时候会提示:SaTokenException:非Web上下文无法获取Request 错误截图: 在官方网站中,查看常见问题排查: 非Web上下文无法获取Reques…

网络工程师练习题(11)

网络工程师 所示的调制方式是DPSK,若数据速率为1Kb/s,则载波速率为2000Hz。EL载波的子信道速率为64Kb/s。100Base-T4采用的编码技术为8B/6T,利用UTP-3传输介质进行数据传输。在异步通信中,每个字符包含1为起始、8位数据位、1位奇偶…

运行游戏找不到steam_api64.dll怎么办?steam_api64.dll丢失解决方法

steam_api64.dll是64位Windows操作系统上的一个动态链接库(DLL)文件,其大小通常在1.5-3.5 MB之间。这个文件对于Steam平台至关重要,因为它实现了游戏验证、更新等功能,并确保了用户拥有游戏的合法使用权。它通过提供一…

基于单片机水塔水位检测控制系统设计

**单片机设计介绍, 基于单片机水塔水位检测控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机水塔水位检测控制系统设计的主要目标是实现水塔水位的自动监测与控制,确保水塔内的水位始…

大模型从入门到应用——OpenAI基础调用

摘要:这是OpenAI的基本调用,通过文章了解大模型的一个基础使用 1. 调用说明 在大型语言模型(LLM)的应用中,OpenAI的基础调用是入门的关键一步。通过调用OpenAI的API,我们可以利用其强大的语言处理能力&am…

在 Python 中使用 Turtle 绘制 26 个英文字母

以下是使用 turtle 模块在 python 中绘制所有 26 个英文字母的代码,字母大小并不统一,旨在为初学者提供 turtle 的基本使用方法。 # 字母 A import turtle tturtle.Turtle() t.penup() t.goto(-30,50) t.pendown() t.pensize(10) t.pencolor("blac…

雷军给年轻人的五点建议

前言 拿来激励自己,没事就看一看,给自己高一点的要求. 致刚入门的程序员五点建议 每个IT企业,尤其是初创企业,非常苦恼:找不到好的程序员。现在大学、软件学院及各种培训机构,每年培养几十万的程序员,毕业的每个人都…

网页版五子棋对战实现和自动化测试

文章目录 前言一、项目描述项目演示链接 二、实现的功能与操作1.登录注册2.游戏大厅线程安全问题多开处理 3.五子棋对战 三、项目测试1.测试用例2.测试技术点3.部分测试用例展示(1)注册页面(2)登录页面(3)游…

生成式AI:最有商业前景的人工智能技术,不再是改变分发关系,而是升级生产力

根据最新的报告可以看出ChatGPT到底有多厉害,多个方面实现从判别决策到创造生成 生成式AI VS Web 3.0 :不追求生产关系的重塑,但将大幅度提升和创造生产力 创造是生成式AI的核心,本质是对生产力的大幅度提升和创造。生成式AI通过…

2、java语法之循环、数组与方法(找工作版)

写在前面:整个系列文章是自己学习慕课相关视频,进行的一个总结。文章只是为了记录学习课程的整个过程,方便以后查漏补缺,找到对应章节。 文章目录 一、Java循环结构1、while循环2、do-while循环3、for循环4、嵌套循环5、break语句…

【面试题】如何在级别用户中检查用户名是否存在?

前言 不知道大家有没有留意过,在使用一些app或者网站注册的时候,提示你用户名已经被占用了,比如我们熟知的《英雄联盟》有些人不知道取啥名字,干脆就叫“不知道取啥名”。 但是有这样困惑的可不止他一个,于是就出现了…

PaddleVideo:PP-TSM 视频分类

本文记录:使用Paddle框架训练TSM(Temporal Shift Module) 前提条件:已经安装Paddle和PadleVideo,具体可参考前一篇文章。 1-数据准备: 以UCF101为例:内含13320 个短视频,视频类别&…

2024年32款数据分析工具分五大类总览

数据分析工具在现代商业和科学中扮演着不可或缺的角色,为组织和个人提供了深入洞察和明智决策的能力。这些工具不仅能够处理大规模的数据集,还能通过强大的分析和可视化功能揭示隐藏在数据背后的模式和趋势。数据分析工具软件主要可以划分为以下五个类别…

YOLOv5标签值含义根据标签将检测框色块替换(马赛克)

以一个检测人脸的图片为例: 检测后生成的标签txt如下, 此时,如何根据标签值将检测到的人脸同色块替换呢? 关键是获取检测框的左上角坐标和右下角坐标。 img Image.open(D:/PythonWokspace/JINX/datasets_transform/dataset/im…

SPICE模型和IBIS模型

两者都是用于电路仿真的模型。 SPICE模型:是对芯片的实际物理结构进行描述,包含了芯片的具体特征和工艺有关的信息,大多数厂商不愿意提供芯片的SPICE模型。 IBIS模型:输入/输出缓冲接口特性(Input/Output Buffer Int…

如何查看git管理了哪些文件?

要查看Git管理了哪些文件,可以使用以下命令: git status:此命令会显示当前工作目录下在Git仓库中的文件状态。它会列出已修改、已添加到暂存区以及未跟踪的文件。通过此命令,你可以了解到哪些文件已经被Git跟踪并处于不同的状态。…

使用jdk8学习JHipster教程

使用jdk8学习JHipster教程 文章目录 使用jdk8学习JHipster教程简介1.安装JHipster1.1 准备java81.2 准备node.js1.3 安装JHipster 2.使用JHipster创建一个应用程序2.1 找一个空文件夹2.2 执行jhipster2.3 后续结果如下 3.使用JHipster3.1 打开项目3.2 设置项目3.2 启动 简介 JH…