国产基于 Vue + echarts 开源 DataV 物联网 Web 可视化大屏办理方案
https://img-blog.csdnimg.cn/img_convert/8174fdabcc4098b4b7b8c5b857ca5423.png项目源码，文末联系小编 01
QiFeng 可视化大屏
https://img-blog.csdnimg.cn/img_convert/bcf4e313538dbe864d19509fd71563d0.png
QiFeng 可视化大屏是一个提供 “低代码数据可视化” 完全免费开发设计平台，是一个类似在线ps设计器，将图表，图片资源，表格统计组件、在线视屏监控、在线地图等等组件，通过层布局，一层一层叠加设计，使它不必要像传统开源一样，使用者必要有较强的设计经验或技能配景才气完成大屏的制作，用户通过对组件的托拉拽，在画布中编辑本身想要的大屏样式，可以轻松创建出精美的数据大屏。简化开发过程，加快应用步调的交付速度，大大减少开发时间和成本。
https://img-blog.csdnimg.cn/img_convert/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 可视化大屏界面
https://img-blog.csdnimg.cn/img_convert/bd3673e67788ab01db43ee67f1f3a28b.gif
QiFeng 可视化大屏体系是一个类似在线PS设计器，它必要非常多素材资源，才气非常简朴、快速的设计各种大屏。可视化大屏体系由三个站点构成：可视化大屏后端站点，可视化大屏设计器前端站点、可视化大屏资源文件站点构成。
https://img-blog.csdnimg.cn/img_convert/49f28f18e78dd71e409706c777efc3b6.png
大屏编辑界面风格仿写阿里云 DataV 样式编写，精美大气。包罗操作菜单、组件库、画布地区、属性地区。
https://img-blog.csdnimg.cn/img_convert/63fe852817f93ecb06b22c881bc73d0f.png
https://img-blog.csdnimg.cn/img_convert/216f1ba6f0f0f7423738dbd2850b6643.png
https://img-blog.csdnimg.cn/img_convert/58c95c9f2c9b3ca6dd54a87b737d61dd.png
地图组件包罗全国41636个州里地图的GeoJson数据，覆盖了全国、省、市、县、州里社区边界，为企业提供了全面的地理数据支持。
https://img-blog.csdnimg.cn/img_convert/11a58c75e6cc6c752edb4d59d3ef97ad.png
03
QiFeng 可视化大屏案例
电商销售数据大屏集成了多种echart组件和地图数据，实时展示了企业的销售数据、用户分布、订单情况等关键指标。通过这款大屏，企业决策者可以直观地了解销售情况，实时发现问题并做出调解。
https://img-blog.csdnimg.cn/img_convert/b45fa83eacc2d6c9ce81e4bd1eedddbf.png
https://img-blog.csdnimg.cn/img_convert/5f125943b7ea2b0329d4f829d9770ff6.png
综合性的智慧城市监控大屏集成了多种地图数据和echart组件，展示了城市的交通状况、空气质量、公共安全等关键信息，城市管理者可以实时掌握城市的运行状态，实时发现并处置处罚各种突发事故。
https://img-blog.csdnimg.cn/img_convert/e07434804764504a4143f18ef2275b2a.png
https://img-blog.csdnimg.cn/img_convert/b186372187e41c0828eaa5be88f7595d.png
https://img-blog.csdnimg.cn/img_convert/ea20d9b04f359c4630424326d31b4722.png
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
往期保举
https://img-blog.csdnimg.cn/img_convert/c36d9d00daa3dc3137909d540f6b603e.png
☞ 高德地图: 红绿灯倒计时大揭秘
☞ 高速“车牌付”会取代 ETC 吗？
☞ 国内七大 IoT 物联网平台对比
☞ 我为什么放弃中移物联OneNET平台
☞ 这苦逼的IoT物联网我竟坚持了十年
☞ 打工人上班摸鱼, AI 监控老板行踪
https://img-blog.csdnimg.cn/img_convert/95407ab1abbd63c94c7266477e62dba9.png
https://img-blog.csdnimg.cn/img_convert/7441b4e26bf05dc75bd8b9ca93a036d4.png
https://img-blog.csdnimg.cn/img_convert/22ff0e228db62fbe857ea18f51325557.gif
https://img-blog.csdnimg.cn/img_convert/9e00db173a1da8636d1dad4c4efae301.gif
https://img-blog.csdnimg.cn/img_convert/5fedc389067e0607d6bd54f09763c2a1.gif
https://img-blog.csdnimg.cn/img_convert/6e96cc697a7e17c9ca6985d75c97181f.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]