## lineChartCompare.html — 对比折线图通用模板

### 适用场景
用于展示两组数据的对比分析场景，如实际值与预测值对比、计划值与实际值对比、不同年份数据对比等趋势分析。

### 所需 JSON 数据格式

```json
{
  "page_title": "实际功率与预测功率对比分析",
  "data": {
    "text_values": {
      "PAGE_TITLE": "实际功率与预测功率对比分析",
      "CHART_TITLE": "功率趋势对比",
      "STAT_TITLE": "统计数据",
      "STAT_LABEL_1_1": "实际功率均值",
      "STAT_VALUE_1_1": "580.2 kW",
      "STAT_LABEL_1_2": "预测功率均值",
      "STAT_VALUE_1_2": "595.6 kW",
      "STAT_LABEL_1_3": "偏差",
      "STAT_VALUE_1_3": "-15.4 kW ↓",
      "STAT_VALUE_1_3_CLASS": "down",
      "STAT_LABEL_2_1": "实际功率峰值",
      "STAT_VALUE_2_1": "850.3 kW",
      "STAT_LABEL_2_2": "预测功率峰值",
      "STAT_VALUE_2_2": "875.1 kW",
      "STAT_LABEL_2_3": "偏差",
      "STAT_VALUE_2_3": "-24.8 kW ↓",
      "STAT_VALUE_2_3_CLASS": "down",
      "TABLE_TITLE": "功率明细对比",
      "TABLE_HEADERS_HTML": "<th>时间</th><th>实际功率(kW)</th><th>预测功率(kW)</th><th>偏差率</th>",
      "TABLE_ROWS": "<tr><td>00:00</td><td>0</td><td>0</td><td><span class=\"tag-down\">0%</span></td></tr><tr><td>07:00</td><td>600</td><td>620</td><td><span class=\"tag-down\">-3.3% ↓</span></td></tr>",
      "SUGGESTION_TITLE": "优化建议",
      "ANALYSIS_SUMMARY": "实际功率整体略低于预测功率，平均偏差约为 2.6%。峰值时段（12:45）偏差较小，为 2.9%；早间时段（07:00）偏差为 3.3%。整体趋势与预测基本一致，说明预测模型准确性较高。",
      "OPTIMIZATION_SUGGESTIONS": "<li>· 预测模型整体表现良好，建议继续优化模型参数，特别是针对早间时段的预测精度。</li><li>· 实际功率在峰值时段接近预测值，说明系统运行状态良好，建议保持当前运行策略。</li><li>· 建议增加实时数据采集频率，进一步提高预测模型的准确性。</li><li>· 针对偏差较大的时段，建议分析原因并调整预测算法。</li>"
    },
    "js_variables": {
      "CHART_X_AXIS_DATA": ["00:00", "07:00", "08:45", "10:00", "11:00", "12:00", "12:45", "13:30", "14:00", "14:15", "14:45", "17:15"],
      "CHART_SERIES_DATA_1": [0, 600, 700, 750, 780, 800, 850, 700, 650, 700, 650, 0],
      "CHART_SERIES_DATA_2": [0, 620, 720, 770, 800, 820, 875, 720, 670, 720, 670, 0],
      "CHART_Y_AXIS_NAME": "kW",
      "CHART_SERIES_NAME_1": "实际功率",
      "CHART_SERIES_NAME_2": "预测功率"
    }
  }
}
```

### 字段说明

| 字段 | 类型 | 说明 |
|------|------|------|
| 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_HEADERS_HTML | 字符串（HTML） | 表格所有列的 `<th>` 标签拼接，列数由实际数据决定，例如：`<th>时间</th><th>实际功率(kW)</th><th>预测功率(kW)</th>`。**日期类字段自动按 年→月→日 顺序排在最前面。** |
| TABLE_ROWS | 字符串（HTML） | 表格数据行的完整 HTML，列数与 TABLE_HEADERS_HTML 一致，每行格式：`<tr><td>值1</td><td>值2</td>...</tr>` |
| SUGGESTION_TITLE | 字符串 | 建议卡片标题 |
| ANALYSIS_SUMMARY | 字符串 | 数据总结文本，2-4句话概述数据情况 |
| OPTIMIZATION_SUGGESTIONS | 字符串（HTML） | 优化建议列表的完整 HTML，每条建议格式：`<li>· 建议内容</li>` |
| CHART_X_AXIS_DATA | 数组 | 折线图 X 轴数据，字符串数组，如 `["00:00", "07:00", "08:45"]` |
| CHART_SERIES_DATA_1 | 数组 | 第一组折线图 Y 轴数据，数值数组，与 X 轴数据一一对应 |
| CHART_SERIES_DATA_2 | 数组 | 第二组折线图 Y 轴数据，数值数组，与 X 轴数据一一对应 |
| CHART_Y_AXIS_NAME | 字符串 | Y 轴单位名称，如 "kW"、"t"、"kWh" |
| CHART_SERIES_NAME_1 | 字符串 | 第一组数据系列名称，显示在图例和 tooltip 中 |
| CHART_SERIES_NAME_2 | 字符串 | 第二组数据系列名称，显示在图例和 tooltip 中 |

### 图表特性

对比折线图包含以下特性：
- 两条平滑曲线对比显示
- 不同颜色区分两组数据
- 区域填充（渐变色）
- 圆点标记
- 鼠标悬停显示详细数据
- 图例说明

### 注意事项

1. **TABLE_HEADERS_HTML** 列数必须与 **TABLE_ROWS** 每行的 `<td>` 数量严格一致
2. 日期字段（year/month/day）会自动排序为 年→月→日 顺序置于表格最左侧
3. **STAT_VALUE_X_X_CLASS** 字段用于控制数值颜色：
   - `"up"` - 红色加粗（表示上升/增长）
   - `"down"` - 绿色加粗（表示下降/减少）
   - `""` - 默认颜色
4. **CHART_X_AXIS_DATA**、**CHART_SERIES_DATA_1** 和 **CHART_SERIES_DATA_2** 数组长度必须一致
5. 表格标签样式：
   - `tag-up` - 红色背景（表示上升）
   - `tag-down` - 绿色背景（表示下降）

---