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

AIoT科技物语 2024-08-07 08:33:01 阅读 64

8174fdabcc4098b4b7b8c5b857ca5423.png

项目源码,文末联系小编

01

QiFeng 可视化大屏

bcf4e313538dbe864d19509fd71563d0.png

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

154f369ff2b50f290e4b84a6f6e5ea77.png

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

前端依赖: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 可视化大屏界面

bd3673e67788ab01db43ee67f1f3a28b.gif

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

49f28f18e78dd71e409706c777efc3b6.png

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

63fe852817f93ecb06b22c881bc73d0f.png

216f1ba6f0f0f7423738dbd2850b6643.png

58c95c9f2c9b3ca6dd54a87b737d61dd.png

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

11a58c75e6cc6c752edb4d59d3ef97ad.png

03

QiFeng 可视化大屏案例

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

b45fa83eacc2d6c9ce81e4bd1eedddbf.png

5f125943b7ea2b0329d4f829d9770ff6.png

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

e07434804764504a4143f18ef2275b2a.png

b186372187e41c0828eaa5be88f7595d.png

ea20d9b04f359c4630424326d31b4722.png

04

QiFeng 安装部署 & 演示

系统环境

<code>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

往期推荐

c36d9d00daa3dc3137909d540f6b603e.png

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

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

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

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

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

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

95407ab1abbd63c94c7266477e62dba9.png

7441b4e26bf05dc75bd8b9ca93a036d4.png

22ff0e228db62fbe857ea18f51325557.gif

9e00db173a1da8636d1dad4c4efae301.gif

5fedc389067e0607d6bd54f09763c2a1.gif

6e96cc697a7e17c9ca6985d75c97181f.gif



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。