vue3 数据可视化大屏 智慧社区数字化管理平台

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

开发环境

vue3+vite+js nodejs 14

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 智慧社区数字化管理平台

演示demo:vue3 数据可视化大屏 智慧社区数字化管理平台

效果截图

动态效果

项目模块

1.辖区人口信息

数字卡片展示辖区人口信息

2.党组织情况

数字滚动加图标装饰展示党组织情况

3.党员情况

数字卡片展示党员情况

4.红黄蓝榜

echarts柱状图展示红黄蓝榜

5.通知公告

列表展示公告

6.地图信息

使用echarts地图+图片混合展示地图信息

7.志愿服务队

数字卡片展示服务队

8.社区十五分钟便民生活圈

echarts饼状图展示社区十五分钟便民生活圈

9 社区便民服务

数字卡片展示社区便民服务信息

mockjs数据模拟

mockjs数据生成

// 辖区人口信息2
// vue3 使用mockjs生成 辖区人口信息2接口 列表4条  name [0-3岁人群,60岁以上人群,重点关注人群,重点关怀人群,离退休干部] value 数字随机1-100
{
    url: '/api/populationInfo2',
    method: 'get',
    response: () => {
        const categories = ['小区', '业委会', '物管会', '物业企业', '共驻共建单位'];
        const populationInfo = categories.map(category => ({
            name: category,
            value: Mock.Random.integer(1, 100),
        }));
        return {
            data: populationInfo,
            message: '成功',
            code: 0
        }
    },
},
    

接口请求封装

// 辖区人口信息2
export function populationInfo2(data) {
    return request({
        url: '/api/populationInfo2',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

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

更多可视化大屏实例

酷炫的数据可视化大屏模板

其他说明

客户项目 仅做展示