## dashboardKpiBar.html — 仪表板KPI+柱状图模板

### 适用场景
用于展示能耗数据仪表板，包含9个KPI指标卡片、可切换的趋势柱状图（日/月/年）和功率对比曲线图。

### 所需 JSON 数据格式

```json
{
  "page_title": "能耗数据分析",
  "data": {
    "text_values": {
      "PAGE_TITLE": "能耗数据分析",
      "KPI_TITLE": "环比能耗",
      "KPI_VALUE_1": "125.8",
      "KPI_LABEL_1": "今日能耗（kWh）",
      "KPI_VALUE_2": "118.3",
      "KPI_LABEL_2": "昨日同步（kWh）",
      "KPI_VALUE_3": "+6.3%",
      "KPI_LABEL_3": "日环比",
      "KPI_VALUE_4": "3,456.7",
      "KPI_LABEL_4": "本月能耗（kWh）",
      "KPI_VALUE_5": "3,289.5",
      "KPI_LABEL_5": "上月同步（kWh）",
      "KPI_VALUE_6": "+5.1%",
      "KPI_LABEL_6": "月环比",
      "KPI_VALUE_7": "38,945.2",
      "KPI_LABEL_7": "今年能耗（kWh）",
      "KPI_VALUE_8": "36,128.9",
      "KPI_LABEL_8": "去年同步（kWh）",
      "KPI_VALUE_9": "+7.8%",
      "KPI_LABEL_9": "年同比",
      "TREND_TITLE": "能耗趋势",
      "TAB_LABEL_1": "日趋势",
      "TAB_LABEL_2": "月趋势",
      "TAB_LABEL_3": "年趋势",
      "POWER_TITLE": "日功率曲线"
    },
    "js_variables": {
      "TREND_DATA_DAY_X": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
      "TREND_DATA_DAY_Y": [3.2, 2.8, 2.5, 2.3, 2.6, 3.5, 5.8, 7.2, 6.5, 5.9, 5.2, 4.8, 5.5, 6.2, 5.8, 5.3, 6.8, 7.5, 6.9, 5.8, 4.5, 3.8, 3.5, 3.3],
      "TREND_DATA_MONTH_X": ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日"],
      "TREND_DATA_MONTH_Y": [125.8, 132.5, 128.3, 135.7, 129.4, 118.6, 115.2, 138.9, 142.3, 136.8, 131.5, 127.9, 133.2, 139.5, 134.8],
      "TREND_DATA_YEAR_X": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      "TREND_DATA_YEAR_Y": [3456.7, 3289.5, 3678.2, 3512.8, 3845.6, 3623.4, 3789.1, 3956.3, 3712.5, 3834.9, 3678.2, 3512.1],
      "POWER_DATA_X": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
      "POWER_DATA_TODAY": [3.2, 2.8, 2.5, 2.3, 2.6, 3.5, 5.8, 7.2, 6.5, 5.9, 5.2, 4.8, 5.5, 6.2, 5.8, 5.3, 6.8, 7.5, 6.9, 5.8, 4.5, 3.8, 3.5, 3.3],
      "POWER_DATA_YESTERDAY": [3.0, 2.6, 2.4, 2.2, 2.5, 3.3, 5.5, 6.8, 6.2, 5.6, 5.0, 4.6, 5.2, 5.9, 5.5, 5.1, 6.5, 7.2, 6.6, 5.5, 4.3, 3.6, 3.3, 3.1],
      "POWER_LEGEND_1": "今日",
      "POWER_LEGEND_2": "昨日"
    }
  }
}
```

### 字段说明

| 字段 | 类型 | 说明 |
|------|------|------|
| PAGE_TITLE | 字符串 | 页面标题 |
| KPI_TITLE | 字符串 | KPI卡片区域标题 |
| KPI_VALUE_1~9 | 字符串 | 9个KPI指标的数值 |
| KPI_LABEL_1~9 | 字符串 | 9个KPI指标的标签 |
| TREND_TITLE | 字符串 | 趋势图卡片标题 |
| TAB_LABEL_1~3 | 字符串 | 三个切换标签的文本 |
| POWER_TITLE | 字符串 | 功率曲线卡片标题 |
| TREND_DATA_DAY_X | 数组 | 日趋势X轴数据（24小时） |
| TREND_DATA_DAY_Y | 数组 | 日趋势Y轴数据 |
| TREND_DATA_MONTH_X | 数组 | 月趋势X轴数据（1-31日） |
| TREND_DATA_MONTH_Y | 数组 | 月趋势Y轴数据 |
| TREND_DATA_YEAR_X | 数组 | 年趋势X轴数据（1-12月） |
| TREND_DATA_YEAR_Y | 数组 | 年趋势Y轴数据 |
| POWER_DATA_X | 数组 | 功率曲线X轴数据（24小时） |
| POWER_DATA_TODAY | 数组 | 今日功率数据 |
| POWER_DATA_YESTERDAY | 数组 | 昨日功率数据 |
| POWER_LEGEND_1 | 字符串 | 功率曲线图例1名称 |
| POWER_LEGEND_2 | 字符串 | 功率曲线图例2名称 |

### 布局说明

- **KPI卡片**：3x3网格布局，共9个指标
- **趋势图**：支持日/月/年三种粒度切换
- **功率曲线**：双折线对比图

### 注意事项

1. KPI卡片按顺序排列：日对比（3个）→ 月对比（3个）→ 年对比（3个）
2. 趋势图数据需要准备三个粒度的完整数据
3. 功率曲线默认显示24小时数据

---