# dashboardKpiBarCompare.html 模板说明

## 适用场景
用于展示两个时间期间的能耗对比分析，包含上下堆叠的对比柱状图（Y轴0在中间）、峰值分析和对比明细表格。

## 占位符说明

### HTML 占位符

| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{PAGE_TITLE}}` | 页面标题 | "能耗对比分析" |
| `{{QUERY_INFO_TEXT}}` | 查询条件说明文本 | "对比分析：2024年3月 vs 2024年2月 的电力能耗" |
| `{{CHART_TITLE}}` | 对比图表标题 | "趋势对比" |
| `{{PEAK_TITLE}}` | 峰值分析卡片标题 | "峰值分析" |
| `{{PEAK_LABEL_A}}` | 期间A峰值标签 | "期间A峰值" |
| `{{PEAK_VALUE_A}}` | 期间A峰值数值 | "142.3 kWh" |
| `{{PEAK_LABEL_B}}` | 期间B峰值标签 | "期间B峰值" |
| `{{PEAK_VALUE_B}}` | 期间B峰值数值 | "138.9 kWh" |
| `{{TREND_LABEL}}` | 趋势描述标签 | "趋势描述" |
| `{{TREND_VALUE}}` | 趋势描述值 | "上升" / "下降" / "持平" |
| `{{TABLE_TITLE}}` | 对比明细表格标题 | "对比明细" |
| `{{TABLE_HEADER_1}}` | 表格第1列表头 | "日期" |
| `{{TABLE_HEADER_2}}` | 表格第2列表头 | "期间A（kWh）" |
| `{{TABLE_HEADER_3}}` | 表格第3列表头 | "期间B（kWh）" |
| `{{TABLE_HEADER_4}}` | 表格第4列表头 | "差值（kWh）" |
| `{{TABLE_HEADER_5}}` | 表格第5列表头 | "变化率" |
| `{{TABLE_ROWS}}` | 表格数据行 | 见下方格式 |

### JavaScript 占位符

| 占位符 | 说明 | 数据类型 | 示例值 |
|--------|------|----------|--------|
| `{{INJECT_DATA}}` | 数据注入位置 | - | - |
| `CHART_X_AXIS_DATA` | X轴数据（日期） | Array | `['1日', '2日', '3日', ...]` |
| `CHART_PERIOD_A_DATA` | 期间A数据（正值） | Array | `[125.8, 132.5, 128.3, ...]` |
| `CHART_PERIOD_B_DATA` | 期间B数据（正值，会自动转负） | Array | `[118.3, 125.7, 132.1, ...]` |
| `CHART_PERIOD_A_NAME` | 期间A名称 | String | "2024年3月" |
| `CHART_PERIOD_B_NAME` | 期间B名称 | String | "2024年2月" |
| `CHART_Y_AXIS_NAME` | Y轴单位名称 | String | "kWh" |

## JSON 数据格式示例

```json
{
  "PAGE_TITLE": "能耗对比分析",
  "QUERY_INFO_TEXT": "对比分析：<span style=\"font-weight: 500; color: #1890ff;\">2024年3月</span> vs <span style=\"font-weight: 500; color: #1890ff;\">2024年2月</span> 的电力能耗",
  "CHART_TITLE": "趋势对比",
  "PEAK_TITLE": "峰值分析",
  "PEAK_LABEL_A": "期间A峰值",
  "PEAK_VALUE_A": "142.3 kWh",
  "PEAK_LABEL_B": "期间B峰值",
  "PEAK_VALUE_B": "138.9 kWh",
  "TREND_LABEL": "趋势描述",
  "TREND_VALUE": "上升",
  "TABLE_TITLE": "对比明细",
  "TABLE_HEADER_1": "日期",
  "TABLE_HEADER_2": "期间A（kWh）",
  "TABLE_HEADER_3": "期间B（kWh）",
  "TABLE_HEADER_4": "差值（kWh）",
  "TABLE_HEADER_5": "变化率",
  "TABLE_ROWS": "<tr><td>1日</td><td>125.8</td><td>118.3</td><td>+7.5</td><td><span class=\"tag-up\">+6.3% ↑</span></td></tr><tr><td>2日</td><td>132.5</td><td>125.7</td><td>+6.8</td><td><span class=\"tag-up\">+5.4% ↑</span></td></tr><tr><td>3日</td><td>128.3</td><td>132.1</td><td>-3.8</td><td><span class=\"tag-down\">-2.9% ↓</span></td></tr>",
  "INJECT_DATA": "var CHART_X_AXIS_DATA = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日'];\nvar CHART_PERIOD_A_DATA = [125.8, 132.5, 128.3, 135.7, 129.4, 118.6, 115.2, 138.9, 142.3, 136.8];\nvar CHART_PERIOD_B_DATA = [118.3, 125.7, 132.1, 128.9, 135.2, 122.4, 119.8, 131.5, 135.8, 138.9];\nvar CHART_PERIOD_A_NAME = '2024年3月';\nvar CHART_PERIOD_B_NAME = '2024年2月';\nvar CHART_Y_AXIS_NAME = 'kWh';"
}
```

## 表格行格式

`TABLE_ROWS` 应为完整的 `<tr>` 标签字符串，包含5列数据：

```html
<tr>
  <td>1日</td>
  <td>125.8</td>
  <td>118.3</td>
  <td>+7.5</td>
  <td><span class="tag-up">+6.3% ↑</span></td>
</tr>
```

变化率标签样式：
- 上升：`<span class="tag-up">+X.X% ↑</span>` （红色背景）
- 下降：`<span class="tag-down">-X.X% ↓</span>` （绿色背景）

## 图表特性

1. **上下堆叠柱状图**：两个期间的数据在同一个柱子上下堆叠显示
2. **Y轴0在中间**：期间A显示在上方（正值），期间B显示在下方（负值）
3. **Y轴标签显示绝对值**：使用 `Math.abs()` 显示，避免显示负号
4. **渐变色填充**：期间A使用蓝色渐变，期间B使用青色渐变
5. **圆角边框**：柱子顶部和底部分别有圆角效果

## 注意事项

1. `CHART_PERIOD_B_DATA` 传入正值即可，模板会自动转换为负值用于下方显示
2. `QUERY_INFO_TEXT` 可以包含 HTML 标签来高亮显示期间名称
3. 表格行数据需要手动计算差值和变化率
4. 趋势描述值建议使用简短文字："上升"、"下降"、"持平"等
5. 峰值数值建议包含单位，如 "142.3 kWh"