{% extends "base.html" %}



{% block content %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">数据可视化分析仪表盘</h1>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 1. 目标变量分布 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">中风 vs 未中风 (样本分布)</h3>
                <div id="chart-target" class="w-full h-80"></div>
            </div>

            <!-- 2. 性别分布 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">性别分布</h3>
                <div id="chart-gender" class="w-full h-80"></div>
            </div>

            <!-- 3. 年龄分布 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">年龄段分布</h3>
                <div id="chart-age" class="w-full h-80"></div>
            </div>

            <!-- 4. 风险因素分析 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">中风患者中的风险因素</h3>
                <div id="chart-disease" class="w-full h-80"></div>
            </div>

            <!-- 5. 工作类型 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">工作类型分布</h3>
                <div id="chart-work" class="w-full h-80"></div>
            </div>

            <!-- 6. 吸烟状况 -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">吸烟状况分布</h3>
                <div id="chart-smoking" class="w-full h-80"></div>
            </div>

            <!-- 7. BMI vs 血糖 散点图 (占据整行) -->
            <div class="bg-white overflow-hidden shadow rounded-lg p-4 md:col-span-2">
                <h3 class="text-lg font-medium text-gray-900 mb-4">BMI 与 平均血糖水平 关系图 (抽样 1000 点)</h3>
                <div id="chart-scatter" class="w-full h-96"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 获取后端传递的数据
    const chartData = {{ data | tojson }};

    // 1. 目标变量分布 (饼图)
    const chartTarget = echarts.init(document.getElementById('chart-target'));
    chartTarget.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: '5%', left: 'center' },
        series: [{
            name: '样本分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: chartData.target_dist
        }]
    });

    // 2. 性别分布 (饼图)
    const chartGender = echarts.init(document.getElementById('chart-gender'));
    chartGender.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: '5%', left: 'center' },
        series: [{
            name: '性别',
            type: 'pie',
            radius: '50%',
            data: chartData.gender_dist,
            emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
        }]
    });

    // 3. 年龄分布 (柱状图)
    const chartAge = echarts.init(document.getElementById('chart-age'));
    chartAge.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: [{ type: 'category', data: chartData.age_data.categories, axisTick: { alignWithLabel: true } }],
        yAxis: [{ type: 'value' }],
        series: [{ name: '人数', type: 'bar', barWidth: '60%', data: chartData.age_data.values, itemStyle: { color: '#5470C6' } }]
    });

    // 4. 风险因素 (柱状图)
    const chartDisease = echarts.init(document.getElementById('chart-disease'));
    chartDisease.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'value' },
        yAxis: { type: 'category', data: ['高血压', '心脏病', '总中风人数'] },
        series: [{
            name: '人数',
            type: 'bar',
            data: [
                chartData.disease_stats.hypertension,
                chartData.disease_stats.heart_disease,
                {
                    value: chartData.disease_stats.total_stroke,
                    itemStyle: { color: '#91CC75' }
                }
            ],
            itemStyle: { color: '#EE6666' }
        }]
    });

    // 5. 工作类型 (环形图)
    const chartWork = echarts.init(document.getElementById('chart-work'));
    chartWork.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: '0%' },
        series: [{
            name: '工作类型',
            type: 'pie',
            radius: ['30%', '60%'],
            data: chartData.work_dist.categories.map((k, i) => ({ value: chartData.work_dist.values[i], name: k }))
        }]
    });

    // 6. 吸烟状况 (柱状图)
    const chartSmoking = echarts.init(document.getElementById('chart-smoking'));
    chartSmoking.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: chartData.smoking_dist.categories },
        yAxis: { type: 'value' },
        series: [{ data: chartData.smoking_dist.values, type: 'bar', itemStyle: { color: '#FAC858' } }]
    });

    // 7. BMI vs Glucose (散点图)
    const chartScatter = echarts.init(document.getElementById('chart-scatter'));
    chartScatter.setOption({
        tooltip: {
            formatter: function (param) {
                return `血糖: ${param.data[0]}<br>BMI: ${param.data[1]}<br>中风: ${param.data[2] === 1 ? '是' : '否'}`;
            }
        },
        xAxis: { scale: true, name: '平均血糖' },
        yAxis: { scale: true, name: 'BMI' },
        visualMap: {
            min: 0,
            max: 1,
            dimension: 2,
            orient: 'horizontal',
            right: 10,
            top: 10,
            text: ['中风', '未中风'],
            calculable: false,
            inRange: { color: ['#37A2DA', '#FF9F7F'] }
        },
        series: [{
            type: 'scatter',
            symbolSize: 8,
            data: chartData.scatter_data
        }]
    });

    // 响应式调整
    window.addEventListener('resize', function () {
        chartTarget.resize();
        chartGender.resize();
        chartAge.resize();
        chartDisease.resize();
        chartWork.resize();
        chartSmoking.resize();
        chartScatter.resize();
    });
</script>
{% endblock %}