实现为饼图获得Mdeh数据库中的数据功能

前期准备：完成老师上课时的所有步骤！！！可以参考云班课讲义

1.替换app/controller/index.php中的echart函数：

public function echart(){
    // 检查登录状态
    if(!Session::has('uid') || empty(Session::get('uid'))){
        return redirect('/index/loginPage');
    }
    
    // 1. 科室统计 - 统计每个科室的医生数量
    $deptStats = Db::table('mdeh_department')
        ->alias('d')
        ->join('mdeh_doctor doc', 'd.dep_id = doc.dep_id', 'left')
        ->field('d.dep_name as name, COUNT(doc.d_id) as value')
        ->group('d.dep_id')
        ->select()
        ->toArray();
    
    // 如果没有数据，提供默认值
    if(empty($deptStats)){
        $deptStats = [['value' => 0, 'name' => '暂无数据']];
    }
    
    // 2. 医生统计 - 按职称统计医生数量
    $doctorStats = Db::table('mdeh_doctor')
        ->field('d_title1 as name, COUNT(d_id) as value')
        ->group('d_title1')
        ->select()
        ->toArray();
    
    // 如果没有数据，提供默认值
    if(empty($doctorStats)){
        $doctorStats = [['value' => 0, 'name' => '暂无数据']];
    }
    
    // 3. 患者统计 - 按性别统计患者数量
    $patientStats = Db::table('mdeh_patient')
        ->field('p_sex as name, COUNT(p_id) as value')
        ->group('p_sex')
        ->select()
        ->toArray();
    
    // 如果没有数据，提供默认值
    if(empty($patientStats)){
        $patientStats = [['value' => 0, 'name' => '暂无数据']];
    }
    
    // 4. 近8周就诊情况统计
    // 获取近8周的日期范围
    $weeks = [];
    $counts = [];
    
    for($i = 7; $i >= 0; $i--){
        // 计算每周的起始日期（周一）和结束日期（周日）
        $weekStart = date('Y-m-d', strtotime("-$i weeks last monday"));
        $weekEnd = date('Y-m-d', strtotime("-$i weeks sunday"));
        
        // 格式化周次显示
        $weekNum = 8 - $i;
        $weeks[] = "第{$weekNum}周";
        
        // 查询该周的就诊记录数量
        // 注意：reception表中的r_date是接诊日期
        $count = Db::table('mdeh_reception')
            ->where('r_date', '>=', $weekStart)
            ->where('r_date', '<=', $weekEnd)
            ->count();
        
        $counts[] = $count;
    }
    
    $weeklyVisitStats = [
        'weeks' => $weeks,
        'counts' => $counts
    ];
    
    // 转换为JSON格式供前端使用
    $deptStats = json_encode($deptStats, JSON_UNESCAPED_UNICODE);
    $doctorStats = json_encode($doctorStats, JSON_UNESCAPED_UNICODE);
    $patientStats = json_encode($patientStats, JSON_UNESCAPED_UNICODE);
    $weeklyVisitStats = json_encode($weeklyVisitStats, JSON_UNESCAPED_UNICODE);
    
    // 模板变量赋值
    View::assign("deptStats", $deptStats);
    View::assign("doctorStats", $doctorStats);
    View::assign("patientStats", $patientStats);
    View::assign("weeklyVisitStats", $weeklyVisitStats);
    
    return View::fetch();
}

2.替换下面的样式在public/static/index.css中.content-page-banner之后的代码（约第170行之后）：

.stats-container {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    gap: 15px;
}

.chart-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    border-left: 4px solid #007bff;
    padding-left: 10px;
    line-height: 1.2;
    flex-shrink: 0; /* 防止标题被压缩 */
}

/* 饼图行样式容器 */
.pie-chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 0 0 auto;
    margin-bottom: 5px;
}

/* 折线统计图行容器 - 修复错乱问题 */
.row {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* 折线图列 */
.line-chart-col {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
}

/* 折线统计图容器 - 修复高度问题 */
.line-chart-box {
    width: 100%;
    height: 100%;
    min-height: 300px;
    flex: 1;
}

/* 饼图卡片列 - 等宽均匀分布 */
.pie-chart-col {
    flex: 1;
    min-width: 0; /* 防止flex溢出 */
    display: flex;
}

/* 统计图容器 */
.chart-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.chart-card:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

/* 饼图容器 - 增加高度 */
.chart-box {
    width: 100%;
    height: 260px; /* 增加高度，从200px增加到260px */
    min-height: 220px;
    flex-shrink: 0;
}

/* 大屏幕优化（1920x1080及以上）- 进一步增加饼图高度 */
@media (min-width: 1600px) {
    .stats-container {
        padding: 20px 30px;
        gap: 20px;
    }
    
    .pie-chart-row {
        gap: 25px;
        margin-bottom: 10px;
    }
    
    .chart-box {
        height: 320px; /* 大屏幕进一步增加 */
        min-height: 280px;
    }
    
    .line-chart-box {
        min-height: 380px;
    }
    
    .chart-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
}

/* 中等屏幕（1200px左右）- 修复标题方块问题 */
@media (min-width: 992px) and (max-width: 1400px) {
    .chart-box {
        height: 280px; /* 适中高度 */
        min-height: 240px;
    }
    
    .line-chart-box {
        min-height: 320px;
    }
    
    /* 确保卡片内部布局紧凑 */
    .chart-card {
        padding: 12px;
    }
    
    .chart-title {
        margin-bottom: 8px;
        font-size: 15px;
    }
}

/* 小屏幕（笔记本） */
@media (min-width: 768px) and (max-width: 991px) {
    .pie-chart-row {
        gap: 15px;
    }
    
    .pie-chart-col {
        min-width: 0;
    }
    
    .chart-box {
        height: 240px;
        min-height: 200px;
    }
    
    .line-chart-box {
        min-height: 280px;
    }
    
    .row {
        min-height: 350px; /* 给折线图一个最小高度 */
    }
}

/* 平板竖屏及以下 */
@media (max-width: 767px) {
    .stats-container {
        padding: 12px 15px;
        height: auto;
        gap: 12px;
    }
    
    .pie-chart-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .pie-chart-col {
        width: 100%;
        min-width: auto;
    }
    
    .chart-box {
        height: 220px;
    }
    
    .line-chart-box {
        min-height: 250px;
    }
    
    .chart-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .row {
        min-height: auto;
        height: 400px; /* 手机端固定高度 */
    }
}

/* 手机小屏幕 */
@media (max-width: 576px) {
    .stats-container {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .chart-card {
        padding: 12px;
    }
    
    .chart-box {
        height: 200px;
    }
    
    .line-chart-box {
        min-height: 220px;
    }
    
    .row {
        height: 350px;
    }
}

/* 确保ECharts容器在flex布局中正常工作 */
.chart-card > div {
    flex-shrink: 0;
}

/* 针对折线图容器的特殊处理 */
.line-chart-col {
    display: flex;
    width: 100%;
    height: 100%;
}

.line-chart-col .chart-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.line-chart-col .line-chart-box {
    flex: 1;
    min-height: 0;
}

/* 优化滚动条样式 */
.stats-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.stats-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.stats-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.stats-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 确保卡片内容不溢出 */
.chart-card {
    overflow: hidden;
}

/* 隐藏ECharts可能产生的多余滚动条 */
.chart-box canvas,
.line-chart-box canvas {
    max-width: 100%;
}

3.修改app/view/index/echart.html中的饼图配置JavaScript代码：

// 饼图配置
        var pieOption = function(name, data) {
            return {
                tooltip: { trigger: 'item' },
                legend: { top: '1%', left: 'center',itemWidth:20,itemHeight:6,itemGap:5,textStyle:{fontSize:11,fontFamily:'Arial'}},
                series: [{
                    name: name,
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['50%', '145px'],
                    avoidLabelOverlap: false,
                    itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 2 },
                    label: { show: false, position: 'center' },
                    emphasis: { label: { show: true, fontSize: 25, fontWeight: 'bold' } },
                    labelLine: { show: false },
                    data: data
                }]
            };
        };