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

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 安装部署 & 演示

    系统环境

    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

    作者:AIoT科技物语

    物联沃分享整理
    物联沃-IOTWORD物联网 » 国产基于 Vue + echarts 开源 DataV 物联网 Web 可视化大屏解决方案

    发表回复