{# stats/pie_chart.html #}

<div class="chart-container">
    <div class="pie-grid">
      {% if chart_status %}
      <div class="pie-card">
        {# 图表容器 #}
        <div id="pie-main" style="width: 100%; height: 800px;">
        </div>
        
      </div>
      {% else %}
      <div class="empty-placeholder">
        <i class="icon-empty"></i>
        <p>暂无统计数据</p>
      </div>
      {% endif %}
    </div>
  </div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('pie-main'));
                
                const data = {{chart_status|safe}};
                const processedData = data.map(item => 
                item.name === '已发布' ? { ...item, selected: true } : item
                );
          
                option = {
                    tooltip: {
                      trigger: 'item',
                      formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                      data: {{chart_title|safe}}
                    },
                    series: [
                      {
                        name: '内容状态',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                          position: 'inner',
                          fontSize: 14
                        },
                        labelLine: {
                          show: false
                        },
                        data: processedData 
                      },
                      {
                        name: '数据统计',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                          length: 30
                        },
                        label: {
                          //formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                          formatter:params => `{a|${params.name}}\n{hr|}\n  {b|总数：}${params.value} {per|${params.percent}%}\n {mes|${params.data.mes}} ` ,
                          
                          backgroundColor: '#F6F8FC',
                          borderColor: '#8C8D8E',
                          borderWidth: 1,
                          borderRadius: 4,
                          rich: {
                            a: {
                              color: '#6E7079',
                              lineHeight: 22,
                              fontSize: 14,
                              fontWeight: 'bold',
                              align: 'center'
                            },
                            hr: {
                              borderColor: '#8Cfff',
                              width: '100%',
                              borderWidth: 1,
                              height: 0
                            },
                            b: {
                              color: '#4C5058',
                              
                              
                              lineHeight: 33
                            },
                            per: {
                              color: '#fff',
                              backgroundColor: '#4C5058',
                              padding: [3, 4],
                              borderRadius: 4
                            },
                            mes: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center'
                              },
                          }
                        },
                        data: {{chart_cate|safe}}
                      }
                    ]
                  };
          
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // 窗口大小变化时自适应
    window.addEventListener('resize', function() {
        myChart.resize();
    });

              </script>
  
              <script>
                // 确保DOM加载完成后执行
                document.addEventListener('DOMContentLoaded', function() {
                    const main = document.getElementById('pie-main');
        
                    // 计算并设置高度的函数
                    const updateHeight = () => {
                        // 方案1：使用 getBoundingClientRect（精确到小数）
                        const rect = main.getBoundingClientRect();
                        const width = rect.width;
                        
                        // 方案2：使用 offsetWidth（整数）
                        // const width = main.offsetWidth;
                        
                        // 计算高度的90%
                        const newHeight = width * 0.7;
                        
                        // 设置高度（带px单位）
                        main.style.height = `${newHeight}px`;
                    };
        
                    // 初始化执行
                    updateHeight();
        
                    // 监听窗口变化（添加节流优化）
                    let resizeTimer;
                    window.addEventListener('resize', () => {
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(updateHeight, 200); // 200ms节流
                    });
        
                    // 可选：监听元素自身尺寸变化（需ResizeObserver支持）
                    if (typeof ResizeObserver === 'function') {
                        const observer = new ResizeObserver(entries => {
                            for (let entry of entries) {
                                if (entry.target === main) {
                                    updateHeight();
                                }
                            }
                        });
                        observer.observe(main);
                    }
                });
            </script>