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

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

然后,我就做呀做,前前后后做了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=N7T8 https://wwm.lanzout.com/iqzYL1txmpub

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

npm run dev # 运行项目

2、不带有 node_modules的项目包 🚀

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

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

⚒️ 项目屏幕大小调整

用了【fullScreenContainer】

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

💎 使用开源项目

1、DataV 🔰

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

2、Echarts 🔰

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

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

3、PPchart 🔰

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

插图库 💡

ByteDance IconPark IconPark, park your icon. Made by ByteDance icon-default.png?t=N7T8 https://iconpark.oceanengine.com/illustrations/2

灵感网站 💡

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

在实习期间,我需要制作一个大屏项目,旨在展示给领导和甲方。为了节省时间,我选择了整合多个开源大屏项目中我认为最好看的组件,融合到自己的项目中。经过大约3天的努力,我完成了这个项目。整个过程并不复杂,但需要花费一定时间。在这个过程中,我不断调整屏幕大小,以确保项目呈现出最佳效果。同时,我还使用了一些开源项目,如DataV、Echarts、PPchart等,来丰富项目内容。总的来说,这是一个相对简单但耗时较长的工程,希望能够满足领导和甲方的需求