## barChart.html — 柱状图通用模板

### 适用场景
用于展示任何需要柱状图可视化的数据分析场景，如日能耗趋势、月能耗对比、设备能耗排名等。

### 所需 JSON 数据格式

```json
{
  "page_title": "能耗趋势分析",
  "data": {
    "text_values": {
      "PAGE_TITLE": "能耗趋势分析",
      "CHART_TITLE": "能耗趋势",
      "STAT_TITLE": "统计数据",
      "STAT_LABEL_1_1": "本月累计",
      "STAT_VALUE_1_1": "1,125.8 kWh",
      "STAT_LABEL_1_2": "上月累计",
      "STAT_VALUE_1_2": "1,089.3 kWh",
      "STAT_LABEL_1_3": "环比",
      "STAT_VALUE_1_3": "+3.4% ↑",
      "STAT_VALUE_1_3_CLASS": "up",
      "STAT_LABEL_2_1": "本月日均",
      "STAT_VALUE_2_1": "36.3 kWh",
      "STAT_LABEL_2_2": "上月日均",
      "STAT_VALUE_2_2": "35.1 kWh",
      "STAT_LABEL_2_3": "环比",
      "STAT_VALUE_2_3": "+3.4% ↑",
      "STAT_VALUE_2_3_CLASS": "up",
      "TABLE_TITLE": "每日能耗明细",
      "TABLE_HEADER_1": "日期",
      "TABLE_HEADER_2": "能耗（kWh）",
      "TABLE_HEADER_3": "环比变化",
      "TABLE_HEADER_4": "同比变化",
      "TABLE_ROWS": "<tr><td>1日</td><td>32.5</td><td><span class=\"tag-down\">-2.1% ↓</span></td><td><span class=\"tag-up\">+4.3% ↑</span></td></tr><tr><td>2日</td><td>35.2</td><td><span class=\"tag-up\">+8.3% ↑</span></td><td><span class=\"tag-up\">+5.7% ↑</span></td></tr>",
      "SUGGESTION_TITLE": "节能建议",
      "ANALYSIS_SUMMARY": "本月累计能耗 1,125.8 kWh，较上月增长 3.4%，日均能耗 36.3 kWh。其中 3日（38.6kWh）、9日（39.1kWh）为能耗高峰日，7日（31.2kWh）能耗最低。整体呈波动上升趋势，周末能耗略低于工作日。",
      "OPTIMIZATION_SUGGESTIONS": "<li>· 3日、9日能耗明显偏高，建议排查当日设备运行记录，识别高耗能时段和设备，优化运行策略。</li><li>· 本月能耗环比上升 3.4%，建议加强日常能耗监控，设置能耗预警阈值，及时发现异常波动。</li><li>· 参考7日低能耗表现，总结节能经验（如合理调整空调温度、关闭非必要照明等），推广至日常运营。</li><li>· 建议制定分时段用能计划，避开用电高峰时段，降低电费成本，同时减少电网负荷压力。</li>"
    },
    "js_variables": {
      "CHART_X_AXIS_DATA": ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日"],
      "CHART_SERIES_DATA": [32.5, 35.2, 38.6, 34.8, 36.9, 33.7, 31.2, 37.4, 39.1, 35.8],
      "CHART_Y_AXIS_NAME": "kWh",
      "CHART_SERIES_NAME": "能耗量"
    }
  }
}
```

### 字段说明

| 字段 | 类型 | 说明 |
|------|------|------|
| 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_VALUE_1_3_CLASS | 字符串 | 左侧统计块第3行样式类，可选值："up"（红色上升）、"down"（绿色下降）、""（默认） |
| 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行数值（含箭头符号） |
| STAT_VALUE_2_3_CLASS | 字符串 | 右侧统计块第3行样式类，可选值："up"（红色上升）、"down"（绿色下降）、""（默认） |
| TABLE_TITLE | 字符串 | 明细表格卡片标题 |
| TABLE_HEADER_1 | 字符串 | 表格第1列表头 |
| TABLE_HEADER_2 | 字符串 | 表格第2列表头 |
| TABLE_HEADER_3 | 字符串 | 表格第3列表头 |
| TABLE_HEADER_4 | 字符串 | 表格第4列表头 |
| TABLE_ROWS | 字符串（HTML） | 表格数据行的完整 HTML，每行格式：`<tr><td>值1</td><td>值2</td><td><span class="tag-up/tag-down">值3</span></td><td><span class="tag-up/tag-down">值4</span></td></tr>` |
| SUGGESTION_TITLE | 字符串 | 建议卡片标题 |
| ANALYSIS_SUMMARY | 字符串 | 数据总结文本，2-4句话概述数据情况 |
| OPTIMIZATION_SUGGESTIONS | 字符串（HTML） | 优化建议列表的完整 HTML，每条建议格式：`<li>· 建议内容</li>` |
| CHART_X_AXIS_DATA | 数组 | 柱状图 X 轴数据，字符串数组，如 `["1日", "2日", "3日"]` |
| CHART_SERIES_DATA | 数组 | 柱状图 Y 轴数据，数值数组，与 X 轴数据一一对应 |
| CHART_Y_AXIS_NAME | 字符串 | Y 轴单位名称，如 "kWh"、"t"、"%" |
| CHART_SERIES_NAME | 字符串 | 图表系列名称，显示在 tooltip 中 |

### 注意事项

1. **TABLE_ROWS** 和 **OPTIMIZATION_SUGGESTIONS** 字段需要填入完整的 HTML 代码
2. **STAT_VALUE_X_X_CLASS** 字段用于控制数值颜色：
   - `"up"` - 红色加粗（表示上升/增长）
   - `"down"` - 绿色加粗（表示下降/减少）
   - `""` - 默认颜色
3. **CHART_X_AXIS_DATA** 和 **CHART_SERIES_DATA** 数组长度必须一致
4. 表格标签样式：
   - `tag-up` - 红色背景（表示上升）
   - `tag-down` - 绿色背景（表示下降）

---