面板创建

面板是 Grafana 中可视化的基本单元，支持多种图表类型和配置选项。

面板类型

时间序列（Time Series）

最适合展示随时间变化的指标数据。

promql

# QPS 查询
sum(rate(http_requests_total[5m])) by (service)

# 响应时间查询
histogram_quantile(0.95, rate(http_request_duration_seconds_bucket[5m]))

配置示例：

json

{
  "type": "timeseries",
  "title": "HTTP QPS",
  "targets": [
    {
      "expr": "sum(rate(http_requests_total[5m])) by (service)",
      "legendFormat": "{{service}}"
    }
  ],
  "fieldConfig": {
    "defaults": {
      "unit": "reqps",
      "min": 0
    }
  }
}

统计值（Stat）

展示单个数值，支持趋势和颜色阈值。

promql

# 当前 QPS
sum(rate(http_requests_total[5m]))

# 错误率
sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m])) * 100

配置示例：

json

{
  "type": "stat",
  "title": "Current QPS",
  "targets": [
    {
      "expr": "sum(rate(http_requests_total[5m]))"
    }
  ],
  "options": {
    "colorMode": "value",
    "graphMode": "area",
    "orientation": "auto"
  },
  "fieldConfig": {
    "defaults": {
      "unit": "reqps",
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {"color": "green", "value": null},
          {"color": "yellow", "value": 100},
          {"color": "red", "value": 500}
        ]
      }
    }
  }
}

仪表盘（Gauge）

适合展示百分比或进度。

promql

# CPU 使用率
100 - (avg(irate(node_cpu_seconds_total{mode="idle"}[5m])) * 100)

# 内存使用率
(node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes) / node_memory_MemTotal_bytes * 100

配置示例：

json

{
  "type": "gauge",
  "title": "CPU Usage",
  "targets": [
    {
      "expr": "100 - (avg(irate(node_cpu_seconds_total{mode=\"idle\"}[5m])) * 100)"
    }
  ],
  "options": {
    "showThresholdMarkers": true,
    "showThresholdLabels": false
  },
  "fieldConfig": {
    "defaults": {
      "unit": "percent",
      "min": 0,
      "max": 100,
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {"color": "green", "value": null},
          {"color": "yellow", "value": 70},
          {"color": "red", "value": 90}
        ]
      }
    }
  }
}

表格（Table）

展示表格数据，适合明细查询。

promql

# 服务状态表
up{job="node"}

配置示例：

json

{
  "type": "table",
  "title": "Service Status",
  "targets": [
    {
      "expr": "up{job=\"node\"}",
      "format": "table",
      "instant": true
    }
  ],
  "transformations": [
    {
      "id": "organize",
      "options": {
        "excludeByName": {
          "Time": true,
          "__name__": true
        }
      }
    }
  ]
}

热力图（Heatmap）

展示时间序列数据的分布。

promql

# 响应时间分布
sum(rate(http_request_duration_seconds_bucket[5m])) by (le)

配置示例：

json

{
  "type": "heatmap",
  "title": "Response Time Distribution",
  "targets": [
    {
      "expr": "sum(rate(http_request_duration_seconds_bucket[5m])) by (le)",
      "format": "heatmap",
      "legendFormat": "{{le}}"
    }
  ],
  "options": {
    "calculate": false,
    "color": {
      "scheme": "Spectral"
    }
  }
}

面板配置

查询配置

yaml

# 面板查询配置
targets:
  - expr: rate(http_requests_total[5m])
    legendFormat: "{{method}} - {{status}}"
    refId: A
    instant: false
    intervalFactor: 1

图例配置

json

{
  "legend": {
    "displayMode": "list",
    "placement": "bottom",
    "showLegend": true,
    "sortBy": "Last",
    "sortDesc": true,
    "calcs": ["lastNotNull", "mean", "max"]
  }
}

颜色和阈值

json

{
  "fieldConfig": {
    "defaults": {
      "color": {
        "mode": "thresholds"
      },
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {"color": "green", "value": null},
          {"color": "yellow", "value": 80},
          {"color": "orange", "value": 90},
          {"color": "red", "value": 95}
        ]
      }
    }
  }
}

单位配置

json

{
  "fieldConfig": {
    "defaults": {
      "unit": "short",
      "decimals": 2,
      "min": 0,
      "max": null
    }
  }
}

常用单位：

单位类型	值	说明
无	short	纯数字
百分比	percent	百分比
时间	s, ms	秒、毫秒
数据	bytes, Bps	字节、字节/秒
速率	reqps, rps	请求/秒
频率	hertz, Hz	赫兹

查询选项

时间范围

json

{
  "targets": [
    {
      "expr": "rate(http_requests_total[5m])",
      "interval": "1m",
      "intervalFactor": 1
    }
  ]
}

变量查询

promql

# 使用变量过滤
sum(rate(http_requests_total{service="$service"}[5m])) by (method)

# 多选变量
sum(rate(http_requests_total{service=~"$service"}[5m])) by (method)

表达式

promql

# 数学运算
rate(http_requests_total[5m]) * 60

# 条件过滤
rate(http_requests_total[5m]) > 100

# 聚合
sum by (status) (rate(http_requests_total[5m]))

转换

数据转换

json

{
  "transformations": [
    {
      "id": "organize",
      "options": {
        "excludeByName": {
          "Time": true
        },
        "indexByName": {
          "instance": 0,
          "value": 1
        },
        "renameByName": {
          "instance": "Server",
          "value": "Status"
        }
      }
    }
  ]
}

计算字段

json

{
  "transformations": [
    {
      "id": "calculateField",
      "options": {
        "mode": "reduceRow",
        "reduce": {
          "reducer": "sum"
        },
        "alias": "Total"
      }
    }
  ]
}

高级配置

链接和钻取

json

{
  "links": [
    {
      "title": "View Details",
      "url": "/d/dashboard-id?var-service=${__field.labels.service}",
      "targetBlank": false
    }
  ]
}

重复面板

json

{
  "repeat": "service",
  "repeatDirection": "h",
  "maxPerRow": 4
}

条件渲染

json

{
  "options": {
    "showThresholdMarkers": true,
    "text": {
      "titleSize": 12,
      "valueSize": 30
    },
    "reduceOptions": {
      "calcs": ["lastNotNull"],
      "fields": "",
      "values": false
    }
  }
}

面板示例

QPS 监控面板

json

{
  "type": "timeseries",
  "title": "HTTP QPS by Service",
  "targets": [
    {
      "expr": "sum(rate(http_requests_total[5m])) by (service)",
      "legendFormat": "{{service}}"
    }
  ],
  "fieldConfig": {
    "defaults": {
      "unit": "reqps",
      "custom": {
        "lineWidth": 2,
        "fillOpacity": 10
      }
    }
  },
  "gridPos": {
    "x": 0,
    "y": 0,
    "w": 12,
    "h": 8
  }
}

错误率面板

json

{
  "type": "stat",
  "title": "Error Rate",
  "targets": [
    {
      "expr": "sum(rate(http_requests_total{status=~\"5..\"}[5m])) / sum(rate(http_requests_total[5m])) * 100"
    }
  ],
  "options": {
    "colorMode": "value",
    "graphMode": "area"
  },
  "fieldConfig": {
    "defaults": {
      "unit": "percent",
      "decimals": 2,
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {"color": "green", "value": null},
          {"color": "yellow", "value": 1},
          {"color": "red", "value": 5}
        ]
      }
    }
  }
}

服务状态表

json

{
  "type": "table",
  "title": "Service Status",
  "targets": [
    {
      "expr": "up{job=\"app\"}",
      "format": "table",
      "instant": true
    }
  ],
  "transformations": [
    {
      "id": "organize",
      "options": {
        "excludeByName": {
          "Time": true,
          "__name__": true,
          "job": true
        },
        "renameByName": {
          "instance": "Instance",
          "value": "Status"
        }
      }
    },
    {
      "id": "calculateField",
      "options": {
        "mode": "reduceRow",
        "reduce": {
          "reducer": "lastNotNull"
        },
        "alias": "Status Text"
      }
    }
  ]
}

最佳实践

合理选择面板类型：根据数据特性选择合适的可视化类型
使用变量：提高面板复用性和灵活性
设置阈值：使用颜色直观展示状态
优化查询：避免高基数查询，使用合理的时间窗口
添加描述：为面板添加描述说明用途
使用模板：创建可复用的面板模板
控制面板数量：每个仪表板不超过 20 个面板
合理布局：相关面板放在一起，使用合理的网格大小

参考：https://grafana.com/docs/grafana/latest/panels-visualizations/

面板创建 ​

面板类型 ​

时间序列（Time Series） ​

统计值（Stat） ​

仪表盘（Gauge） ​

表格（Table） ​

热力图（Heatmap） ​

面板配置 ​

查询配置 ​

图例配置 ​

颜色和阈值 ​

单位配置 ​

查询选项 ​

时间范围 ​

变量查询 ​

表达式 ​

转换 ​

数据转换 ​

计算字段 ​

高级配置 ​

链接和钻取 ​

重复面板 ​

条件渲染 ​

面板示例 ​

QPS 监控面板 ​

错误率面板 ​

服务状态表 ​

最佳实践 ​

面板创建

面板类型

时间序列（Time Series）

统计值（Stat）

仪表盘（Gauge）

表格（Table）

热力图（Heatmap）

面板配置

查询配置

图例配置

颜色和阈值

单位配置

查询选项

时间范围

变量查询

表达式

转换

数据转换

计算字段

高级配置

链接和钻取

重复面板

条件渲染

面板示例

QPS 监控面板

错误率面板

服务状态表

最佳实践