## pieChart.html — 饼图通用模板

### 适用场景
用于展示任何需要饼图可视化的占比数据分析场景，如能源结构占比、设备类型分布、成本构成、区域分布等。

### 所需 JSON 数据格式

```json
{
  "page_title": "能源占比分析",
  "data": {
    "text_values": {
      "PAGE_TITLE": "能源占比分析",
      "CHART_TITLE": "能源占比",
      "STAT_TITLE": "统计数据",
      "STAT_LABEL_1_1": "总能耗",
      "STAT_VALUE_1_1": "1,245.6 kWh",
      "STAT_LABEL_1_2": "最大占比",
      "STAT_VALUE_1_2": "电力 45.2%",
      "STAT_LABEL_1_3": "最小占比",
      "STAT_VALUE_1_3": "燃气 22.0%",
      "STAT_LABEL_2_1": "折标煤",
      "STAT_VALUE_2_1": "152.8 tce",
      "STAT_LABEL_2_2": "碳排放",
      "STAT_VALUE_2_2": "385.2 tCO₂",
      "STAT_LABEL_2_3": "能源种类",
      "STAT_VALUE_2_3": "3 种",
      "TABLE_TITLE": "能源占比明细",
      "TABLE_HEADERS_HTML": "<th>能源类型</th><th>能耗值</th><th>占比</th><th>折标煤（tce）</th><th>碳排放（tCO₂）</th>",
      "TABLE_ROWS": "<tr><td><span class=\"color-dot\" style=\"background-color: #1677FF;\"></span>电力</td><td>563.0 kWh</td><td>45.2%</td><td>69.1</td><td>174.2</td></tr>",
      "SUGGESTION_TITLE": "能源结构优化建议",
      "ANALYSIS_SUMMARY": "总能耗 1,245.6 kWh，其中电力占比最高（45.2%），热力次之（32.8%），燃气占比最低（22.0%）。能源结构以电力为主导，热力和燃气为辅助。总折标煤 152.8 tce，总碳排放 385.2 tCO₂。",
      "OPTIMIZATION_SUGGESTIONS": "<li>· 电力占比达 45.2%，建议优先推进电力节能改造，如更换高效节能设备、优化照明系统、加装智能控制系统等。</li><li>· 热力占比 32.8%，建议加强供热系统保温措施，减少热量损失，同时优化供热时段，避免过度供热。</li><li>· 燃气占比相对较低，但碳排放强度高，建议逐步替换为清洁能源，如电能或可再生能源。</li><li>· 建议引入光伏、风电等可再生能源，优化能源结构，降低对传统化石能源的依赖，从源头减少碳排放。</li>"
    },
    "js_variables": {
      "CHART_SERIES_NAME": "能源占比",
      "CHART_DATA": [
        { "value": 563.0, "name": "电力", "itemStyle": { "color": "#1677FF" } },
        { "value": 408.6, "name": "热力", "itemStyle": { "color": "#52c41a" } },
        { "value": 274.0, "name": "燃气", "itemStyle": { "color": "#faad14" } }
      ]
    }
  }
}
```

### 字段说明

| 字段 | 类型 | 说明 |
|------|------|------|
| PAGE_TITLE | 字符串 | 页面标题，显示在浏览器标签页 |
| CHART_TITLE | 字符串 | 饼图卡片标题 |
| STAT_TITLE | 字符串 | 统计数据卡片标题 |
| STAT_LABEL_1_1 | 字符串 | 左侧统计块第1行标签 |
| STAT_VALUE_1_1 | 字符串 | 左侧统计块第1行数值 |
| STAT_LABEL_1_2 | 字符串 | 左侧统计块第2行标签 |
| STAT_VALUE_1_2 | 字符串 | 左侧统计块第2行数值 |
| STAT_LABEL_1_3 | 字符串 | 左侧统计块第3行标签 |
| STAT_VALUE_1_3 | 字符串 | 左侧统计块第3行数值 |
| STAT_LABEL_2_1 | 字符串 | 右侧统计块第1行标签 |
| STAT_VALUE_2_1 | 字符串 | 右侧统计块第1行数值 |
| STAT_LABEL_2_2 | 字符串 | 右侧统计块第2行标签 |
| STAT_VALUE_2_2 | 字符串 | 右侧统计块第2行数值 |
| STAT_LABEL_2_3 | 字符串 | 右侧统计块第3行标签 |
| STAT_VALUE_2_3 | 字符串 | 右侧统计块第3行数值 |
| TABLE_TITLE | 字符串 | 明细表格卡片标题 |
| TABLE_HEADERS_HTML | 字符串（HTML） | 表格所有列的表头 HTML，格式：`<th>列名1</th><th>列名2</th>...`，列数由实际数据决定，自动生成 |
| TABLE_ROWS | 字符串（HTML） | 表格数据行的完整 HTML，每行格式：`<tr><td><span class="color-dot" style="background-color: 颜色值;"></span>名称</td><td>值1</td>...</tr>` |
| SUGGESTION_TITLE | 字符串 | 建议卡片标题 |
| ANALYSIS_SUMMARY | 字符串 | 数据总结文本，2-4句话概述数据情况 |
| OPTIMIZATION_SUGGESTIONS | 字符串（HTML） | 优化建议列表的完整 HTML，每条建议格式：`<li>· 建议内容</li>` |
| CHART_SERIES_NAME | 字符串 | 图表系列名称，显示在 tooltip 中 |
| CHART_DATA | 数组 | 饼图数据数组，每个元素格式：`{ "value": 数值, "name": "名称", "itemStyle": { "color": "颜色值" } }` |

### 图表特性

饼图包含以下特性：
- 环形饼图（内外半径可调）
- 自动显示百分比标签
- 右侧图例显示
- 鼠标悬停高亮效果
- 圆角边框

### 注意事项

1. **TABLE_ROWS** 和 **OPTIMIZATION_SUGGESTIONS** 字段需要填入完整的 HTML 代码
2. **TABLE_ROWS** 中第一列需要包含颜色点标记：`<span class="color-dot" style="background-color: 颜色值;"></span>`
3. **CHART_DATA** 数组中每个元素必须包含：
   - `value` - 数值
   - `name` - 名称
   - `itemStyle.color` - 颜色（与表格中的颜色点保持一致）
4. 建议使用的颜色值：
   - `#1677FF` - 蓝色
   - `#52c41a` - 绿色
   - `#faad14` - 橙色
   - `#f5222d` - 红色
   - `#722ed1` - 紫色
   - `#13c2c2` - 青色

---