JS+CSS极速网站流量统计柱状图显示最近30天的UV/PV

        最简单、零依赖的网站流量统计柱状图，纯 CSS + 原生 JS 柱状图，不用插件、不用引入外部库、不拖慢网站，直接显示最近 30 天 UV/PV 对比。

function light_stat_admin_page(){
    if(!current_can('manage_options')) return;
	…
    // 计算真实最大值
    $real_max = 1;
    foreach($chart_data as $item){
        $current_max = max((int)$item['uv'], (int)$item['pv']);
        if($current_max > $real_max) $real_max = $current_max;
    }
    $chart_max = $real_max * 1.1;
    $chart_height = 250; // 图表总高度
    $top_padding = 10;  
    $bar_area_height = $chart_height - $top_padding;

    echo '<div style="margin:20px;font-size:16px;">';
    echo '<h2>全站流量统计（自动保留最近30天）时间：'.$now.' @ '.$tz.'</h2>';
    echo '<p><strong>今日访问：</strong>UV '.$t_uv.' &nbsp; PV '.$t_pv.'</p>';
    echo '<p><strong>全站总计：</strong>UV '.$total['uv'].' &nbsp; PV '.$total['pv'].'</p>';
    echo '<hr>';
    echo '<div style="margin:30px 0;">';
    echo '<h3>最近30天流量趋势图</h3>';

    //左侧Y轴 + 右侧图表区
    echo '<div style="display:flex; gap:8px; align-items:stretch;">';
    echo '<div style="width:60px; display:flex; flex-direction:column; justify-content:space-between; height:'.$chart_height.'px; text-align:right; padding-right:8px; color:#666; font-size:12px; position:relative;">';
    // 刻度线
    echo '<div style="position:absolute; left:100%; top:0; bottom:0; width:1px; background:#ddd;"></div>';
    // 刻度值
    for($i=1; $i>=0; $i-=0.25){
        $val = round($chart_max * $i);
        echo '<div>'.$val.'</div>';
    }
    echo '</div>';
    echo '<div style="flex:1; height:'.$chart_height.'px; background:#fff; position:relative; overflow-x:auto; box-sizing:border-box;">';
    echo '<div style="position:absolute; left:0; right:0; bottom:0; height:1px; background:#ddd;"></div>';
    for ($i = 1; $i <= 9; $i++) {
        $pos = $i * 10;
        echo '<div style="position:absolute; left:0; right:0; top:'.$pos.'%; height:1px; background:#dbeafe;"></div>';
    }
    echo '<div style="display:flex; align-items:flex-end; gap:18px; height:'.$bar_area_height.'px; padding:0 15px; position:absolute; left:0; right:0; bottom:0; box-sizing:border-box;">';

    foreach($chart_data as $date => $row){
        $uv = (int)$row['uv'];
        $pv = (int)$row['pv'];
        $uv_h = $chart_max > 0 ? round(($uv / $chart_max) * $bar_area_height) : 1;
        $pv_h = $chart_max > 0 ? round(($pv / $chart_max) * $bar_area_height) : 1;
        $day_label = substr($date, 5); // 显示 MM-DD 格式

        echo "
        <div style='flex:0 0 auto; display:flex; flex-direction:column; align-items:center;'>
            <div style='display:flex; gap:4px; align-items:flex-end;'>
                <div style='width:14px; height:{$uv_h}px; background:#4a90e2; border-radius:2px 2px 0 0;' title='{$date} UV：{$uv}'></div>
                <div style='width:14px; height:{$pv_h}px; background:#ff7a8a; border-radius:2px 2px 0 0;' title='{$date} PV：{$pv}'></div>
            </div>
            <div style='font-size:11px; color:#666; margin-top:5px;'>{$day_label}</div>
        </div>";
    }

    echo '</div></div>'; 
    echo '<div style="position:absolute; top:15px; right:20px; display:flex; gap:20px; font-size:14px;">
            <span><span style="display:inline-block; width:16px; height:16px; background:#4a90e2; vertical-align:middle; margin-right:4px;"></span> UV</span>
            <span><span style="display:inline-block; width:16px; height:16px; background:#ff7a8a; vertical-align:middle; margin-right:4px;"></span> PV</span>
          </div>';

    echo '</div></div>';
</div>';
}