水质情况实时监测预警系统 数据可视化大屏 vue3

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

开发环境

vue3+vite+js nodejs 16

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 水质情况实时监测预警系统

演示demo:vue3 数据可视化大屏 水质情况实时监测预警系统

效果截图

视频演示

项目模块

1.重点水质量检测区

数字卡片展示重点水质量检测区数据，使用数字滚动增加动画效果。

2.水质量分布情况

使用echarts的雷达图展示水质量分布情况

3.企业污染排放情况

使用进度条动画加滚动效果实现排行情况展示

4.水质污染TOP10

表格加滚动效果展示水质污染占比情况

5.水质类别占比

使用echarts水球效果来展示水质类别

6.主要地区水流量

使用折线图展示主要地区水流量

更新日志

2024年03月15日 v1.2

删除 node-sass依赖，避免高版本的nodejs造成错误

2023年08月08日 v1.1

使用mockjs 来生成模拟数据，使用axios来进行接口请求，代替原有的写死的数据。

mockjs数据生成部分代码

// 重点水质量检测区
// vue3 使用mockjs生成 重点水质量检测区接口 列表10条  name 为[河北省流量 吉林省流量] value 数字随机1000-10000

{
    url: '/api/water-quality',
    method: 'get',
    response: () => {

        const names = [
            '河北省流量', '吉林省流量'
        ]
        const data = names.map(name => {
            return {
                name: name,
                value: Mock.Random.integer(1, 40000)
            }
        })
        return {
            data: data,
            message: '成功',
            code: 0
        }
    },
},
    

接口请求封装部分代码

// 重点水质量检测区
export function waterQuality(data) {
    return request({
        url: '/api/water-quality',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

async getData() {
  try {
    const res = await waterQuality();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

更多可视化数据大屏

100个酷炫的数据可视化大屏

源码下载

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

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

项目代码为vue3框架vue2的写法