{% 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> 年度AQI与PM2.5趋势</div>
        <div id="yearlyLineChart" class="chart-container"></div>
    </div>
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 月均AQI对比</div>
        <div id="monthlyBarChart" class="chart-container"></div>
    </div>
</div>
<div class="charts-row">
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> PM2.5与AQI关系散点图</div>
        <div id="scatterChart" class="chart-container"></div>
    </div>
    <div class="chart-card">
        <div class="chart-title"><span class="dot"></span> 月份-质量等级热力图</div>
        <div id="heatmapChart" class="chart-container"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
var C = {{ chart_json|safe }};
var levelColors = {'优':'#27ae60','良':'#2ec7c9','轻度污染':'#ffb980','中度污染':'#d87a80','重度污染':'#c23531','严重污染':'#6e0000'};

var c1 = echarts.init(document.getElementById('yearlyLineChart'));
c1.setOption({
    tooltip:{trigger:'axis'},
    legend:{data:['AQI','PM2.5'], top:4, textStyle:{fontSize:12}},
    grid:{left:'8%',right:'4%',top:'16%',bottom:'10%'},
    xAxis:{type:'category', data:C.yearly_line.years, boundaryGap:false},
    yAxis:{type:'value'},
    color:['#2ec7c9','#ffb980'],
    series:[
        {name:'AQI', type:'line', data:C.yearly_line.aqi, smooth:true,
         areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[
             {offset:0,color:'rgba(46,199,201,0.3)'},{offset:1,color:'rgba(46,199,201,0.02)'}
         ])}},
        {name:'PM2.5', type:'line', data:C.yearly_line.pm25, smooth:true,
         areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[
             {offset:0,color:'rgba(255,185,128,0.3)'},{offset:1,color:'rgba(255,185,128,0.02)'}
         ])}}
    ]
});

var c2 = echarts.init(document.getElementById('monthlyBarChart'));
c2.setOption({
    tooltip:{trigger:'axis', axisPointer:{type:'shadow'}},
    grid:{left:'8%',right:'4%',top:'8%',bottom:'10%'},
    xAxis:{type:'category', data:C.monthly_bar.months},
    yAxis:{type:'value', name:'AQI'},
    series:[{
        type:'bar', data:C.monthly_bar.aqi,
        itemStyle:{
            color:new echarts.graphic.LinearGradient(0,0,0,1,[
                {offset:0,color:'#5ab1ef'},{offset:1,color:'#2ec7c9'}
            ]),
            borderRadius:[4,4,0,0]
        },
        barMaxWidth:32
    }]
});

var c3 = echarts.init(document.getElementById('scatterChart'));
c3.setOption({
    tooltip:{trigger:'item', formatter:function(p){return 'PM2.5: '+p.data[0]+'<br/>AQI: '+p.data[1]+'<br/>'+p.data[2];}},
    grid:{left:'10%',right:'4%',top:'8%',bottom:'12%'},
    xAxis:{type:'value', name:'PM2.5', nameLocation:'middle', nameGap:28},
    yAxis:{type:'value', name:'AQI'},
    series:[{
        type:'scatter', symbolSize:6,
        data:C.scatter,
        itemStyle:{color:function(p){return levelColors[p.data[2]]||'#2ec7c9';}, opacity:0.6}
    }]
});

var c4 = echarts.init(document.getElementById('heatmapChart'));
c4.setOption({
    tooltip:{position:'top', formatter:function(p){return C.heatmap.months[p.data[0]]+' '+C.heatmap.levels[p.data[1]]+': '+p.data[2]+'天';}},
    grid:{left:'14%',right:'4%',top:'4%',bottom:'16%'},
    xAxis:{type:'category', data:C.heatmap.months, splitArea:{show:true}},
    yAxis:{type:'category', data:C.heatmap.levels, splitArea:{show:true}},
    visualMap:{min:0, max:80, calculable:true, orient:'horizontal', left:'center', bottom:0,
               inRange:{color:['#ebedf0','#c6e48b','#7bc96f','#239a3b','#196127']}, textStyle:{fontSize:11}},
    series:[{type:'heatmap', data:C.heatmap.data, label:{show:true, fontSize:11},
             emphasis:{itemStyle:{shadowBlur:6, shadowColor:'rgba(0,0,0,0.2)'}}}]
});

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