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

开发环境

vue3+vite+js nodejs 16

分辨率

1920*1080

演示地址

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

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

效果截图

视频演示

## 项目模块

1.人次占比

2.手术数量趋势

3.当月出院环比

4.病症诊断人数

5.医疗耗材环比

6.数据共享

7.性别年龄分布

8.人均医药费分布

9.付费方式分布

顶部标题

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

背景图

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

更新日志

2024年04月18日 v1.3

1.删除多余依赖
2.增加粒子效果

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);
  }
},

项目依赖

"dependencies": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "aos": "^2.3.4",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.7",
    "echarts": "^5.2.0",
    "element-plus": "^2.2.28",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "highcharts": "^10.1.0",
    "jquery": "^3.6.4",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-number-roll-plus": "^0.1.3",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

相关大屏

新冠疫情大数据平台

医疗体检健康可视化数据

智慧医疗数据展示平台

智慧医疗数据可视化大屏 vue3数据大屏(带后台)

社区卫生服务情况数据可视化 数据可视化案例

更多可视化数据大屏

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

源码下载

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

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

当前版本为vue3 vite js

如果需要普通html+vue2.js 版本请访问：html 数据可视化大屏 - 医疗卫生数据大屏