国产基于 Vue + echarts 开源 DataV 物联网 Web 可视化大屏解决方案

项目源码，文末联系小编

01

QiFeng 可视化大屏

QiFeng 可视化大屏是一个提供 “低代码数据可视化” 完全免费开发设计平台，是一个类似在线ps设计器，将图表，图片资源，表格统计组件、在线视屏监控、在线地图等等组件，通过层布局，一层一层叠加设计，使它不需要像传统开源一样，使用者需要有较强的设计经验或技术背景才能完成大屏的制作，用户通过对组件的托拉拽，在画布中编辑自己想要的大屏样式，可以轻松创建出精美的数据大屏。简化开发过程，加快应用程序的交付速度，大大减少开发时间和成本。

简搭云可视化大屏设计凭借其丰富的功能和强大的性能，成为了企业高效、直观地展示海量数据的大屏可视化设计的首选工具。

前端依赖：Vue、Element UI2.0、JqueryTemplate、codemirror、html2canvas、monaco、@jimnghi/data-view、echarts、flv、mapboxgl、file-saver

后端依赖：Spring Boot、Spring Security、 Jwt、Mybatis

技术优势

• 框架：基于 Vue2 框架编写，简单更容易上手
  

• 渲染：以vue2源码渲染，只要符合vue2语法就能渲染，能在线编辑逻辑代码。提高了其的扩展性，可读性，聚合性，复用性，封装性

• 代码合并技术：拖拽设计生成的代码与自定义编辑的代码可以进行合并，无冲突。

• 私有化部署：可在线编写css，都是当前大屏私有，不会污染全局样式，逻辑代码也是如此。

• 在线调试：在源码编辑中输入debugger，各种浏览器 F12轻松进入调试一步一步定位错误，解决错误。

• 二次开发：支持vue源码导出，遇到复杂的功能可下载vue文件到本地，二次开发，无需从零开始。

• 丰富的内置组件：2万+ echarts组件例子，4万+的全国乡镇地图信息，60 +边框svg
  

• 自定义组件：可视化大屏组件库支持在线开发集成，无需更改任何代码，可以轻松集成一个组件到可视化大屏设计器中

• 多样化主题：可以一键设置图表的样式，提供了99套主题的选择。

• 滤镜设置：可将背景图，视屏资源颜色更改。

02

QiFeng 可视化大屏界面

‍QiFeng 可视化大屏系统是一个类似在线PS设计器，它需要非常多素材资源，才能非常简单、快速的设计各种大屏。可视化大屏系统由三个站点构成：可视化大屏后端站点，可视化大屏设计器前端站点、可视化大屏资源文件站点组成。

大屏编辑界面风格仿写阿里云 DataV 样式编写，优美大气。包含操作菜单、组件库、画布区域、属性区域。

地图组件包含全国41636个乡镇地图的GeoJson数据，覆盖了全国、省、市、县、乡镇社区边界，为企业提供了全面的地理数据支持。

03

QiFeng 可视化大屏案例

电商销售数据大屏集成了多种echart组件和地图数据，实时展示了企业的销售数据、用户分布、订单情况等关键指标。通过这款大屏，企业决策者可以直观地了解销售情况，及时发现问题并做出调整。

综合性的智慧城市监控大屏集成了多种地图数据和echart组件，展示了城市的交通状况、空气质量、公共安全等关键信息，城市管理者可以实时掌握城市的运行状态，及时发现并处理各种突发事件。

04

QiFeng 安装部署 & 演示

系统环境

JDK >= 1.8
MySQL >= 5.7
Maven > = 3.0
Node >= 16

• 克隆代码

git clone https://gitee.com/liuyaping007/bigscreen.git

• 安装依赖

npm config set registry https://registry.npm.taobao.org
pnpm i

• 运行

npm run serve

• 打包

npm run build

在线体验 : http://bg.kyform.cn

如有需求请联系小编 : beacon0418

往期推荐

☞ 高德地图: 红绿灯倒计时大揭秘

☞ 高速“车牌付”会取代 ETC 吗？

☞ 国内七大 IoT 物联网平台对比

☞ 我为什么放弃中移物联OneNET平台

☞ 这苦逼的IoT物联网我竟坚持了十年

☞ 打工人上班摸鱼, AI 监控老板行踪