vue3 可视化数据大屏 水灾应急预警系统

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

开发环境

nodejs 16

开发环境

vue3 vite js

分辨率

1920*1080

演示地址

演示demo:vue3 数据可视化大屏 水灾应急预警系统

项目截图

动态效果

页面模块

受灾情况

使用数字卡片展示数据:紧急受灾地点、房屋淹没、电话中断、公路中断、受灾人数、经济损失,数值为js随机生成

降雨量历史数据

使用echarts折线图展示降雨量历史数据，超过4.5的时候折线图为黄色，低于4.5的时候折线图为绿色

受灾人口统计

echarts表格滚动展示受灾人口统计 排名 区域 受灾人数

各区域积水点

使用echarts折线图展示道路 下水井 隧道等地方的积水点。

医疗救援力量

饼状图展示医疗济源力量：急救医疗队、野战医院、专科医疗队、心理救援队、卫生防疫队、医疗物资保障队、水上救援医疗队

救援物资

柱状图展示各种类型的救援物资

数字卡片数据展示

cesium展示地图数据

使用cesium展示地图数据，模拟下雨效果，展示指定城市轮廓，点击对应标签展示详细信息弹窗。

项目目录

项目依赖

"dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "qs": "^6.11.2",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2",
    "cesium": "^1.114.0",
    "vite-plugin-cesium": "github:yelingkong/vite-plugin-cesium"
  },

更多可视化大屏实例

可视化数据大屏案例

更多背景图资源

数据大屏背景图下载

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

页面中的数值数据为js随机生成

虚拟产品一经售出 概不退款请谅解