国产基于 Vue + echarts 开源 DataV 物联网 Web 可视化大屏解决方案
AIoT科技物语 2024-08-07 08:33:01 阅读 64
项目源码,文末联系小编
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 安装部署 & 演示
系统环境
<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
往期推荐
☞ 高德地图: 红绿灯倒计时大揭秘
☞ 高速“车牌付”会取代 ETC 吗?
☞ 国内七大 IoT 物联网平台对比
☞ 我为什么放弃中移物联OneNET平台
☞ 这苦逼的IoT物联网我竟坚持了十年
☞ 打工人上班摸鱼, AI 监控老板行踪
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。