<!-- 每个模型独立显示图表 -->
<div class="row">
    {% for chart in charts_data %}
    <div class="col-lg-6">
        <div class="chart-container" style="margin: 20px 0;">
            <h3>{{ chart.verbose_name }}更新趋势（最近{{ chart.dates|length }}天）</h3>
            <div id="{{ chart.model_name|slugify }}Chart" 
                style="width: 100%; height: 400px;"></div>
        </div>
    </div>
    
    {% endfor %}
</div>


<!-- ECharts初始化脚本 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    {% for chart in charts_data %}
    // 初始化图表
    const chart_{{ forloop.counter }} = echarts.init(
        document.getElementById('{{ chart.model_name|slugify }}Chart')
    );
    
    // 配置项
    const option_{{ forloop.counter }} = {
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: {{ chart.dates|safe }}
        },
        yAxis: { type: 'value' },
        series: [{
            data: {{ chart.counts }},
            type: 'line',
            smooth: true,
            areaStyle: {},
            lineStyle: { width: 3 },
            itemStyle: { color: '#36a3eb' }
        }]
    };
    
    chart_{{ forloop.counter }}.setOption(option_{{ forloop.counter }});
    {% endfor %}
    
    // 窗口大小变化时自适应
    window.addEventListener('resize', function() {
        {% for chart in charts_data %}
        chart_{{ forloop.counter }}.resize();
        {% endfor %}
    });
});
</script>
