vue3 数据可视化大屏 智慧医院数据监控中心
id
319
运行环境
nodejs 23
开发框架
vue3 vite js
分辨率
1920*1080
演示地址
vue3 数据可视化大屏 智慧医院数据监控中心
演示demo:vue3 数据可视化大屏 智慧医院数据监控中心
效果截图
视频演示
今日关键指标
数字卡片展示今日关键指标
今日接诊患者
在岗医护人员
床位使用率
急诊病例
床位使用情况
饼状图展示床位使用情况
已使用
空闲
维修中
设备状态监控
滚动列表展示设备状态监控
药品库存预警
横向柱状图展示药品库存预警
患者流量趋势
折线图展示患者流量趋势
实时通知
滚动列表展示实时通知
科室患者分布
柱状图展示科室患者分布
项目依赖
{
"name": "319_zhihuiyiyuan_vue3",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build-qiniu": "vite build && node ./qiniu.js",
"preview": "vite preview"
},
"dependencies": {
"@meruem117/vue-seamless-scroll": "^0.1.8",
"autoprefixer": "^10.4.13",
"axios": "^1.5.1",
"dayjs": "^1.11.7",
"disable-devtool": "^0.3.7",
"echarts": "^5.4.3",
"fs": "0.0.1-security",
"gsap": "^3.11.4",
"pinia": "^3.0.3",
"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",
"three": "^0.180.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.0.0"
}
}
部分代码
<template>
<div class="echarts1" ref="echartsRef">
</div>
</template>
<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import * as echarts from "echarts"
import { FontChart } from "@/utils/utils.js"
// 定义props
const props = defineProps({
name: {
type: String,
default: '科室患者分布'
},
list: {
type: Array,
default: () => [
{ name: '内科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '外科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '儿科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '妇产科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '骨科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '心内科', value: Math.floor(Math.random() * 100) + 50 },
{ name: '神经科', value: Math.floor(Math.random() * 100) + 50 }
]
}
})
// 定义ref
const echartsRef = ref(null)
let myChart = null
// 工具方法
const getRandomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 绘制图表方法
const drawEcharts = () => {
if (!echartsRef.value) return
if (!myChart) {
myChart = echarts.init(echartsRef.value)
// 添加窗口resize监听
window.addEventListener('resize', () => {
myChart.resize()
})
}
// 如果没有传入list数据，使用默认随机数据
const chartData = props.list && props.list.length > 0 ? props.list : [
{ name: '内科', value: getRandomInt(80, 200) },
{ name: '外科', value: getRandomInt(60, 180) },
{ name: '儿科', value: getRandomInt(40, 120) },
{ name: '妇产科', value: getRandomInt(50, 150) },
{ name: '骨科', value: getRandomInt(30, 100) },
{ name: '心内科', value: getRandomInt(70, 160) },
{ name: '神经科', value: getRandomInt(45, 130) }
]
const option = {
grid: {
top: FontChart(50),
bottom: FontChart(20),
left: FontChart(20),
right: FontChart(20),
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function(params) {
return params[0].name + '<br/>患者数量: ' + params[0].value + '人'
}
},
xAxis: {
data: chartData.map(obj => obj.name),
axisLine: {
lineStyle: {
color: '#1dafef'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
fontSize: FontChart(14)
}
},
yAxis: [
{
name: '患者数量(人)',
nameTextStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: FontChart(14)
},
axisLine: {
show: true,
lineStyle: {
color: '#1dafef'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#1dafef',
type: 'dashed'
}
},
yAxisIndex: 0
}
],
series: [
{
"name": "",
"type": "pictorialBar",
"symbolSize": [17, 5],
"symbolOffset": [0, -3],
"z": 12,
"symbolPosition": "end",
tooltip: {
show: false
},
itemStyle: {
color: 'rgba(99, 254, 255, 1)',
opacity: 1
},
"data": chartData.map(() => 0)
},
{
name: props.name,
type: 'bar',
stack: '总量',
barWidth: 17,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{offset: 0, color: 'rgba(99, 254, 255, 0.57)'},
{offset: 1, color: 'rgba(99, 254, 255, 0.57)'}
]
),
borderRadius: [0.0, 0, 0]
}
},
data: chartData.map(obj => obj.value),
label: {
show: true,
position: 'top',
color: 'rgba(255, 255, 255, 1)',
fontSize: FontChart(14),
formatter: '{c}人'
},
markPoint: {
symbol: 'path://M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z',
symbolSize: [17, 5],
itemStyle: {
color: 'rgba(99, 254, 255, 1)'
},
data: chartData.map((obj, index) => ({
xAxis: index,
yAxis: obj.value + 1
}))
}
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
}
// 监听list变化
watch(() => props.list, () => {
nextTick(() => {
drawEcharts()
})
}, { deep: true })
// 组件挂载时初始化图表
onMounted(() => {
nextTick(() => {
drawEcharts()
})
})
// 组件卸载时清理
import { onUnmounted } from 'vue'
onUnmounted(() => {
if (myChart) {
window.removeEventListener('resize', () => {
myChart.resize()
})
myChart.dispose()
}
})
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
</style>
大屏数据可视化模板
更多背景图资源
项目文件目录
相关大屏
智慧医疗体检健康数据监控中心 - 数据可视化大屏 vue3
智慧医疗数据展示平台 可视化数据大屏 vue3
医疗卫生大数据看板 - 数据可视化大屏 vue3
源码下载
项目基于vue3+vite+js开发 nodejs 23
获取代码前请确保具备相关开发基础
本项目为纯前端大屏，无后端支持
默认数据为模拟数据，实际使用时需接入真实数据源
请在确认需求后再获取相关代码
如需vue2版本请访问:智慧医院数据监控中心 - 数据可视化大屏 vue2
