{% extends "base.html" %}
{% block title %}数据概览 - 常德空气质量分析平台{% endblock %}
{% block page_title %}数据概览{% endblock %}

{% block content %}
<div class="stat-cards">
    <div class="stat-card">
        <div class="stat-icon green">📋</div>
        <div class="stat-info">
            <h3>{{ data.stats.total }}</h3>
            <p>数据总量</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue">🌡</div>
        <div class="stat-info">
            <h3>{{ data.stats.avg_aqi }}</h3>
            <p>平均AQI</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon orange">⭐</div>
        <div class="stat-info">
            <h3>{{ data.stats.good_ratio }}%</h3>
            <p>优良天数占比</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple">📅</div>
        <div class="stat-info">
            <h3>{{ data.stats.years }}</h3>
            <p>监测年限</p>
        </div>
    </div>
</div>

<div class="charts-row">
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> AQI月度 Top10</div>
        <div id="topMonthsChart" class="chart-container"></div>
    </div>
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 空气质量等级分布</div>
        <div id="qualityPieChart" class="chart-container"></div>
    </div>
</div>

<div class="charts-row">
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 年度平均AQI</div>
        <div id="yearlyChart" class="chart-container"></div>
    </div>
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 污染物均值分布</div>
        <div id="pollutantPieChart" class="chart-container"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
var D = {{ chart_json|safe }};
var colors = ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3','#e5cf0d','#97b552'];

var c1 = echarts.init(document.getElementById('topMonthsChart'));
c1.setOption({
    tooltip:{trigger:'axis'},
    grid:{left:'8%',right:'4%',top:'8%',bottom:'12%'},
    xAxis:{type:'category', data:D.top_months.labels, boundaryGap:false,
           axisLabel:{fontSize:11, color:'#666'}},
    yAxis:{type:'value', name:'AQI', nameTextStyle:{color:'#999'}},
    series:[{
        type:'line', data:D.top_months.values, smooth:true,
        lineStyle:{color:'#2ec7c9', width:2}, itemStyle:{color:'#2ec7c9'},
        areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[
            {offset:0,color:'rgba(46,199,201,0.35)'},{offset:1,color:'rgba(46,199,201,0.02)'}
        ])}, symbolSize:6
    }]
});

var c2 = echarts.init(document.getElementById('qualityPieChart'));
c2.setOption({
    tooltip:{trigger:'item', formatter:'{b}: {c} ({d}%)'},
    legend:{orient:'vertical', right:'6%', top:'center', textStyle:{color:'#666',fontSize:12}},
    color:colors,
    series:[{
        type:'pie', radius:['45%','72%'], center:['40%','50%'],
        data:D.quality_levels,
        label:{show:true, formatter:'{b}', fontSize:11, color:'#666'},
        emphasis:{itemStyle:{shadowBlur:10, shadowColor:'rgba(0,0,0,0.15)'}}
    }]
});

var c3 = echarts.init(document.getElementById('yearlyChart'));
c3.setOption({
    tooltip:{trigger:'axis'},
    grid:{left:'8%',right:'4%',top:'8%',bottom:'10%'},
    xAxis:{type:'category', data:D.yearly_trend.years, boundaryGap:false,
           axisLabel:{fontSize:12, color:'#666'}},
    yAxis:{type:'value', name:'AQI', nameTextStyle:{color:'#999'}},
    series:[{
        type:'line', data:D.yearly_trend.values, smooth:true,
        lineStyle:{color:'#5ab1ef', width:2}, itemStyle:{color:'#5ab1ef'},
        areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[
            {offset:0,color:'rgba(90,177,239,0.35)'},{offset:1,color:'rgba(90,177,239,0.02)'}
        ])}, symbolSize:6
    }]
});

var c4 = echarts.init(document.getElementById('pollutantPieChart'));
c4.setOption({
    tooltip:{trigger:'item', formatter:'{b}: {c} ({d}%)'},
    legend:{orient:'vertical', right:'6%', top:'center', textStyle:{color:'#666',fontSize:12}},
    color:['#5ab1ef','#2ec7c9','#ffb980','#d87a80','#b6a2de','#97b552'],
    series:[{
        type:'pie', radius:'68%', center:['40%','50%'],
        data:D.pollutants,
        label:{show:true, formatter:'{b}\n{d}%', fontSize:11, color:'#666'},
        emphasis:{itemStyle:{shadowBlur:10, shadowColor:'rgba(0,0,0,0.15)'}}
    }]
});

window.addEventListener('resize',function(){c1.resize();c2.resize();c3.resize();c4.resize();});
</script>
{% endblock %}