vue3 数据可视化大屏 医疗卫生大数据看板

开发环境

vue3+vite+js nodejs 14

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 医疗卫生大数据看板

演示demo:vue3 数据可视化大屏 医疗卫生大数据看板

效果截图

视频演示

## 项目模块

1.人次占比

2.手术数量趋势

3.当月出院环比

4.病症诊断人数

5.医疗耗材环比

6.数据共享

7.性别年龄分布

8.人均医药费分布

9.付费方式分布

顶部标题

顶部标题为从两侧向中间扫光，标题为渐变色，右侧实时展示日期时间和周。

背景图

背景图为绿色格子背景图，更多可查看数据大屏背景图.

更新日志

2023年07月30日 v1.1

使用mockjs 来生成模拟数据，使用axios来进行接口请求，代替原有的写死的数据。
其他代码优化，增加动画效果

mockjs数据生成

// 人次占比
{
    url: '/api/personTime',
    method: 'get',
    response: () => {
        const titles = ['门诊', '急诊', '体检', '入院'];
        const users = titles.map(title => {
            return {
                title,
                num: Mock.Random.integer(1, 100),
                num2: Mock.Random.integer(1, 100),
            };
        });

        return {
            status: 200,
            message: 'success',
            data: {...users},
        };
    },
},

接口请求封装

// 人次占比
export function personTime(data) {
    return request({
        url: '/api/personTime',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求，使用gsap增加数据渲染动画

async getData() {
  try {
    const res = await personTime();
    this.list = res.data
    this.$nextTick(() => {
      let tl = gsap.timeline();
      tl.from(".pageItem_item", {
        y: -100,
        opacity: 0,
        stagger: 0.3,
        ease: "power1.out",
        duration: 1
      })
          .from(".icon", {
            transformStyle: "preserve-3d",
            rotationY: -180,
            stagger: 0.3,
            ease: "power1.out",
            duration: 1
          }, "+=1"); // "+=1" means waiting for 1 second after the previous animation.
    });
  } catch (err) {
    console.error(err);
  }
},

更多可视化数据大屏

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

源码下载

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

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