{% extends "base.html" %}
{% block title %}图表画廊 - 常德空气质量分析平台{% endblock %}
{% block page_title %}图表画廊{% endblock %}

{% block content %}
<div class="charts-row">
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 污染物雷达图</div>
        <div id="radarChart" class="chart-container"></div>
    </div>
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 工作日样本分布</div>
        <div id="weekdayChart" class="chart-container"></div>
    </div>
</div>

<div class="chart-card">
    <div class="chart-title"><span class="dot"></span> 高污染日期 Top10</div>
    <table class="data-table">
        <thead>
            <tr><th>排名</th><th>日期</th><th>AQI</th><th>质量等级</th><th>PM2.5</th><th>PM10</th></tr>
        </thead>
        <tbody>
            {% for r in top10 %}
            <tr>
                <td><strong>{{ forloop.counter }}</strong></td>
                <td>{{ r.record_date }}</td>
                <td style="color:#d87a80;font-weight:700;">{{ r.aqi }}</td>
                <td>
                    <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;
                        {% if r.quality_level == '重度污染' or r.quality_level == '严重污染' %}background:#fde;color:#c23531;
                        {% elif r.quality_level == '中度污染' %}background:#fff0f0;color:#d87a80;
                        {% else %}background:#fff4e6;color:#f5a623;{% endif %}">
                        {{ r.quality_level }}
                    </span>
                </td>
                <td>{{ r.pm25|default:"-" }}</td>
                <td>{{ r.pm10|default:"-" }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="6" style="text-align:center;padding:40px;color:#aaa;">暂无数据</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script>
var C = {{ chart_json|safe }};

var c1 = echarts.init(document.getElementById('radarChart'));
c1.setOption({
    tooltip:{},
    radar:{
        indicator:C.radar.indicators, shape:'circle', splitNumber:4,
        name:{textStyle:{color:'#666',fontSize:12}},
        splitLine:{lineStyle:{color:'rgba(46,199,201,0.15)'}},
        splitArea:{areaStyle:{color:['rgba(46,199,201,0.02)','rgba(46,199,201,0.06)']}}
    },
    series:[{
        type:'radar',
        data:[{
            value:C.radar.values, name:C.radar.year+'年均值',
            areaStyle:{color:'rgba(46,199,201,0.25)'},
            lineStyle:{color:'#2ec7c9', width:2},
            itemStyle:{color:'#2ec7c9'}
        }]
    }]
});

var c2 = echarts.init(document.getElementById('weekdayChart'));
c2.setOption({
    tooltip:{trigger:'axis', axisPointer:{type:'shadow'}},
    grid:{left:'8%',right:'4%',top:'8%',bottom:'10%'},
    xAxis:{type:'category', data:C.weekday.days},
    yAxis:{type:'value', name:'记录数'},
    series:[{
        type:'bar', data:C.weekday.counts,
        itemStyle:{
            color:function(p){
                var cs=['#2ec7c9','#5ab1ef','#ffb980','#d87a80','#b6a2de','#97b552','#8d98b3'];
                return cs[p.dataIndex%cs.length];
            },
            borderRadius:[4,4,0,0]
        },
        barMaxWidth:40
    }]
});

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