vue3 数据可视化大屏 煤改电数据可视化大屏

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

id

173

开发环境

nodejs 16

开发环境

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 煤改电数据可视化大屏

演示demo:vue3 数据可视化大屏 煤改电数据可视化大屏

效果截图

动画效果

项目模块

1.基本情况

卡片展示:用户数量 台区数量 线路数量 供电所数量

2.当日电量

数字卡片展示 增量占比_用户 增量占比_台区 当日用户总电量 当日台区总电量 当日增量

3.累计电量

数字卡片展示 累计用户总电量 累计增量 累计台区总电量

中间数据展示

数字卡片展示：

氧化碳减排量
二氧化硫减排量
PM2.5减少量
空气质量改善指数

地图展示

echarts地图展示个个地区煤改电情况

煤改电用户数：240户台区数量：76台线路数量：41条电采暖用户：163户电采暖台区数量：23台
电采暖线路数量：22条网格：1个供电所：7个应急发电机：3台

用电量

折线图展示：显示石家庄区县当日和累计的用电量

煤改电增量情况

折线图加柱状图展示煤改电增量情况

PM2.5浓度

echarts柱状图展示各个地区PM2.5浓度

当日事件数据

数字卡片展示当日事件数据

线路故障
低电压台区
用户报修
重载台区
过载台区

项目依赖

  "dependencies": {
    "@vue/shared": "^3.2.47",
    "autoprefixer": "^10.4.13",
    "crypto-js": "^4.2.0",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "highcharts": "10.1.0",
    "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",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

项目结构

更多可视化数据大屏

酷炫的可视化数据大屏

源码下载

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

纯前端项目，无数据交互

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