ECharts 智慧医疗数据可视化实战

📋 项目概述

构建医疗数据分析平台，可视化展示患者健康指标、医疗资源分布、疾病趋势等关键医疗数据。

核心功能

• ✅ 健康监测：生命体征趋势图
• ✅ 病历分析：疾病类型统计
• ✅ 资源分布：医院与床位地图
• ✅ 药品管理：库存与使用统计
• ✅ 手术监控：手术室利用率

---

💻 核心实现

1. 患者健康监测面板

// components/Health/VitalSignsPanel.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { LineChart, GaugeChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import BaseChart from '@/components/Chart/BaseChart';

echarts.use([
  LineChart,
  GaugeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
]);

interface VitalSign {
  timestamp: string;
  heartRate: number;      // 心率 (bpm)
  bloodPressureSystolic: number;  // 收缩压 (mmHg)
  bloodPressureDiastolic: number; // 舒张压 (mmHg)
  oxygenSaturation: number;       // 血氧饱和度 (%)
  temperature: number;    // 体温 (°C)
  respiratoryRate: number; // 呼吸频率 (次/分)
}

interface VitalSignsPanelProps {
  data: VitalSign[];
  patientId: string;
}

const VitalSignsPanel: React.FC<VitalSignsPanelProps> = ({ data, patientId }) => {
  // 心率趋势图
  const heartRateOption = useMemo(() => ({
    title: {
      text: '心率趋势',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const value = params[0].value;
        let status = '正常';
        let color = '#52c41a';
        
        if (value > 100) {
          status = '⚠️ 心动过速';
          color = '#ff4d4f';
        } else if (value < 60) {
          status = '⚠️ 心动过缓';
          color = '#faad14';
        }
        
        return `
          <div style="padding: 8px;">
            <div>${params[0].axisValue}</div>
            <div style="color: ${color};">
              心率: ${value} bpm<br/>
              状态: ${status}
            </div>
          </div>
        `;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.map(d => d.timestamp),
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      min: 40,
      max: 140,
      axisLabel: { formatter: '{value}' }
    },
    series: [{
      type: 'line',
      data: data.map(d => d.heartRate),
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        color: (params: any) => {
          const value = params.value;
          if (value > 100 || value < 60) return '#ff4d4f';
          return '#52c41a';
        }
      },
      lineStyle: { width: 2 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
          { offset: 1, color: 'rgba(82, 196, 26, 0.05)' }
        ])
      },
      markLine: {
        silent: true,
        data: [
          { yAxis: 60, lineStyle: { color: '#faad14', type: 'dashed' } },
          { yAxis: 100, lineStyle: { color: '#ff4d4f', type: 'dashed' } }
        ]
      }
    }]
  }), [data]);

  // 血压仪表盘
  const bpOption = useMemo(() => {
    const latest = data[data.length - 1];
    const systolic = latest.bloodPressureSystolic;
    const diastolic = latest.bloodPressureDiastolic;

    return {
      series: [
        {
          type: 'gauge',
          min: 0,
          max: 200,
          startAngle: 210,
          endAngle: -30,
          radius: '80%',
          center: ['30%', '55%'],
          
          progress: {
            show: true,
            width: 18,
            itemStyle: {
              color: getBPColor(systolic, diastolic)
            }
          },
          
          pointer: {
            length: '60%',
            width: 5
          },
          
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [0.6, '#52c41a'],
                [0.8, '#faad14'],
                [1, '#ff4d4f']
              ]
            }
          },
          
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          
          title: {
            offsetCenter: [0, '30%'],
            fontSize: 14
          },
          
          detail: {
            fontSize: 20,
            offsetCenter: [0, '0%'],
            formatter: `{value|${systolic}/${diastolic}}{unit|mmHg}`,
            rich: {
              value: {
                fontSize: 20,
                fontWeight: 'bold',
                color: getBPColor(systolic, diastolic)
              },
              unit: {
                fontSize: 12,
                color: '#999',
                padding: [0, 0, 0, 4]
              }
            }
          },
          
          data: [{ value: systolic, name: '收缩压' }]
        },
        {
          type: 'gauge',
          min: 0,
          max: 120,
          startAngle: 210,
          endAngle: -30,
          radius: '80%',
          center: ['70%', '55%'],
          
          progress: {
            show: true,
            width: 18,
            itemStyle: {
              color: getDiastolicColor(diastolic)
            }
          },
          
          pointer: {
            length: '60%',
            width: 5
          },
          
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [0.67, '#52c41a'],
                [0.83, '#faad14'],
                [1, '#ff4d4f']
              ]
            }
          },
          
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          
          title: {
            offsetCenter: [0, '30%'],
            fontSize: 14
          },
          
          detail: {
            fontSize: 20,
            offsetCenter: [0, '0%'],
            formatter: `{value|${diastolic}}{unit|mmHg}`,
            rich: {
              value: {
                fontSize: 20,
                fontWeight: 'bold',
                color: getDiastolicColor(diastolic)
              },
              unit: {
                fontSize: 12,
                color: '#999',
                padding: [0, 0, 0, 4]
              }
            }
          },
          
          data: [{ value: diastolic, name: '舒张压' }]
        }
      ]
    };
  }, [data]);

  return (
    <div style={{ display: 'grid', gap: '20px' }}>
      <BaseChart option={heartRateOption} height={250} />
      <BaseChart option={bpOption} height={200} />
    </div>
  );
};

function getBPColor(systolic: number, diastolic: number): string {
  if (systolic > 140 || diastolic > 90) return '#ff4d4f';
  if (systolic > 120 || diastolic > 80) return '#faad14';
  return '#52c41a';
}

function getDiastolicColor(diastolic: number): string {
  if (diastolic > 90) return '#ff4d4f';
  if (diastolic > 80) return '#faad14';
  return '#52c41a';
}

export default VitalSignsPanel;

---

2. 疾病类型分析

// components/Health/DiseaseAnalysis.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { TreemapChart, PieChart } from 'echarts/charts';
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import BaseChart from '@/components/Chart/BaseChart';

echarts.use([
  TreemapChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  CanvasRenderer
]);

interface DiseaseData {
  category: string;
  diseases: Array<{
    name: string;
    count: number;
    severity: 'mild' | 'moderate' | 'severe';
  }>;
}

interface DiseaseAnalysisProps {
  data: DiseaseData[];
  period: string;
}

const DiseaseAnalysis: React.FC<DiseaseAnalysisProps> = ({ data, period }) => {
  // 疾病分类树图
  const treemapOption = useMemo(() => {
    const treeData = data.map(category => ({
      name: category.category,
      children: category.diseases.map(disease => ({
        name: disease.name,
        value: disease.count,
        itemStyle: {
          color: getSeverityColor(disease.severity)
        }
      }))
    }));

    return {
      title: {
        text: `疾病分类统计 (${period})`,
        left: 'center'
      },
      tooltip: {
        formatter: (params: any) => {
          return `
            <div style="padding: 8px;">
              <div style="font-weight: bold;">${params.name}</div>
              <div>病例数: ${params.value}</div>
            </div>
          `;
        }
      },
      series: [{
        type: 'treemap',
        data: treeData,
        breadcrumb: { show: false },
        label: {
          show: true,
          formatter: '{b}\n{c}'
        },
        upperLabel: {
          show: true,
          height: 30
        },
        leafDepth: 1
      }]
    };
  }, [data, period]);

  // 严重程度饼图
  const pieOption = useMemo(() => {
    const severityStats = { mild: 0, moderate: 0, severe: 0 };
    
    data.forEach(category => {
      category.diseases.forEach(disease => {
        severityStats[disease.severity] += disease.count;
      });
    });

    return {
      title: {
        text: '疾病严重程度分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['轻度', '中度', '重度']
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{d}%'
        },
        data: [
          { value: severityStats.mild, name: '轻度', itemStyle: { color: '#52c41a' } },
          { value: severityStats.moderate, name: '中度', itemStyle: { color: '#faad14' } },
          { value: severityStats.severe, name: '重度', itemStyle: { color: '#ff4d4f' } }
        ]
      }]
    };
  }, [data]);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '20px' }}>
      <BaseChart option={treemapOption} height={500} />
      <BaseChart option={pieOption} height={500} />
    </div>
  );
};

function getSeverityColor(severity: string): string {
  const colors: Record<string, string> = {
    mild: '#52c41a',
    moderate: '#faad14',
    severe: '#ff4d4f'
  };
  return colors[severity] || '#52c41a';
}

export default DiseaseAnalysis;

---

3. 医疗资源地图

// components/Health/MedicalResourceMap.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { ScatterChart, EffectScatterChart, LinesChart } from 'echarts/charts';
import {
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import 'echarts/map/js/china.js';
import BaseChart from '@/components/Chart/BaseChart';

echarts.use([
  ScatterChart,
  EffectScatterChart,
  LinesChart,
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  CanvasRenderer
]);

interface Hospital {
  id: string;
  name: string;
  city: string;
  longitude: number;
  latitude: number;
  level: '三级甲等' | '三级' | '二级' | '一级';
  beds: number;
  doctors: number;
}

interface MedicalResourceMapProps {
  hospitals: Hospital[];
}

const MedicalResourceMap: React.FC<MedicalResourceMapProps> = ({ hospitals }) => {
  const option = useMemo(() => {
    const hospitalData = hospitals.map(hospital => ({
      name: hospital.name,
      value: [hospital.longitude, hospital.latitude, hospital.beds],
      level: hospital.level,
      doctors: hospital.doctors,
      itemStyle: {
        color: getLevelColor(hospital.level),
        shadowBlur: 10,
        shadowColor: getLevelColor(hospital.level)
      },
      symbolSize: getLevelSize(hospital.level)
    }));

    return {
      backgroundColor: '#0f1419',
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          return `
            <div style="padding: 12px; background: rgba(0,0,0,0.8); color: #fff;">
              <div style="font-weight: bold; margin-bottom: 8px;">${params.data.name}</div>
              <div>等级: ${params.data.level}</div>
              <div>床位: ${params.data.value[2]}张</div>
              <div>医生: ${params.data.doctors}人</div>
            </div>
          `;
        }
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 20,
        data: ['三级甲等', '三级', '二级', '一级'],
        textStyle: { color: '#fff' }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 2000,
        inRange: {
          symbolSize: [10, 30]
        }
      },
      geo: {
        map: 'china',
        roam: true,
        zoom: 1.2,
        label: { show: false },
        itemStyle: {
          areaColor: '#1a2332',
          borderColor: '#2c3e50'
        }
      },
      series: [
        {
          name: '医疗机构',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: hospitalData,
          symbolSize: (params: any) => getLevelSize(params.level),
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
            scale: 3
          },
          zlevel: 1
        }
      ]
    };
  }, [hospitals]);

  return <BaseChart option={option} height={600} />;
};

function getLevelColor(level: string): string {
  const colors: Record<string, string> = {
    '三级甲等': '#ff6b6b',
    '三级': '#4ecdc4',
    '二级': '#45b7d1',
    '一级': '#96ceb4'
  };
  return colors[level] || '#96ceb4';
}

function getLevelSize(level: string): number {
  const sizes: Record<string, number> = {
    '三级甲等': 20,
    '三级': 15,
    '二级': 12,
    '一级': 10
  };
  return sizes[level] || 10;
}

export default MedicalResourceMap;

---

💎 总结

本实战案例展示了智慧医疗的核心可视化方案：

1. 健康监测：生命体征实时追踪
2. 疾病分析：病种统计与严重程度
3. 资源分布：医疗机构地理分布

适用于医院管理、公共卫生监控等场景。