一、两款可视化工具的详细介绍
1. Grafana
Grafana 是一款诞生于 2014 年的开源可视化监控平台，由瑞典公司 Grafana Labs 开发并维护。它的核心定位是 “连接数据与决策”，通过统一的界面整合多源数据，让复杂的监控指标变得直观可懂。
其核心特性包括：
- 多数据源兼容：原生支持 Prometheus、InfluxDB、MySQL、Elasticsearch 等 50+ 数据源，物联网场景中最常与 Prometheus 搭配，实现设备时序数据的实时可视化。
- 模板化仪表盘：社区提供数千种现成模板（如服务器监控、物联网传感器监控模板），新手无需从零设计，导入模板后修改数据源即可使用。
- 动态交互能力：支持图表联动（点击一个面板筛选另一个面板数据）、时间范围缩放、指标下钻等操作，方便运维人员快速定位问题。
- 告警生态完善：可基于指标阈值设置多级告警（如警告、严重、紧急），并通过 Webhook 对接企业微信、钉钉、PagerDuty 等工具，确保异常信息及时触达。
2. ECharts
ECharts 是百度开源的 JavaScript 可视化库，2013 年首次发布，目前由 Apache 基金会维护。它更像一套 “可视化绘图工具包”，开发者可通过代码调用 API 绘制几乎任何形态的图表。
其核心特性包括：
- 图表类型丰富：支持折线图、柱状图等基础图表，以及热力图、桑基图、3D 地球等复杂图表，尤其在地理信息可视化（如设备分布地图）方面表现突出。
- 高度定制化：从颜色、字体到动画效果均可通过代码精细调整，例如可将物联网设备的温度数据映射到户型图的对应房间位置，实现 “数据与物理空间” 的绑定展示。
- 轻量易集成：体积仅 100KB 左右，可嵌入网页、移动端 App 或桌面软件，通过 JSON 格式与后端（如 Python Flask/Django）交互获取数据。
- 开源免费：无商业授权限制，企业级应用无需支付费用，且社区活跃，问题解决文档丰富。
二、Grafana 与 ECharts 优缺点对比表
| 工具 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Grafana | 1. 支持多数据源（Prometheus、MySQL 等）2. 自带告警功能，可联动微信 / 邮件3. 开箱即用的仪表盘模板4. 无需编程基础，鼠标点选即可配置 | 1. 定制化程度有限，复杂图表难实现2. 依赖数据源配置，新手易踩坑3. 界面风格较固定，个性化弱 | 实时监控仪表盘、多设备集中监控 |
| ECharts | 1. 完全自定义图表样式，支持 3D / 地理信息等复杂图表2. 轻量级，可嵌入网页 / APP3. 结合 Python 等语言可实现高度定制 | 1. 需要编写代码（JavaScript）2. 无内置告警功能，需自行开发3. 数据源需手动对接 | 定制化报表、业务大屏、特殊可视化需求 |
三、用 Prometheus 采集数据并构建动态仪表盘
1. Prometheus 安装与配置
先去 Prometheus 官网下载适合自己系统的安装包，解压后找到配置文件prometheus.yml。用记事本打开，在scrape_configs节点下添加要监控的设备信息，就像给快递员留收货地址一样。比如要监控前面 Python 脚本模拟的温度传感器，就加这段：
scrape_configs:
- job_name: 'iot_sensors'
static_configs:
- targets: ['localhost:8000'] # 传感器数据接口地址
保存后双击prometheus.exe启动，打开浏览器访问http://localhost:9090，能看到界面就说明装好了。点左上角的 “Status”→“Targets”，如果iot_sensors那一行显示 “UP”，就表示数据开始采集了。
2. 构建 Grafana 动态仪表盘
打开 Grafana（默认地址http://localhost:3000，初始账号密码都是 admin），先把 Prometheus 加为数据源：
- 点左边齿轮图标→“Data Sources”→“Add data source”，选 “Prometheus”
- 在 “URL” 栏填http://localhost:9090，拉到最下面点 “Save & Test”，显示绿色对勾就成了
接着做仪表盘：
- 点左边 “+” 号→“Dashboard”→“Add new panel”
- 在 “Query” 标签页，数据源选刚加的 Prometheus，查询框输入room_temperature{room=~"$room"}
- 点右上角 “Apply”，就能看到温度曲线了。想同时看多个房间？点 “Variables”→“Add variable”，类型选 “Query”，查询写label_values(room_temperature, room)，这样就能下拉切换房间了
- 觉得数据刷新慢？点仪表盘右上角的时钟图标，把刷新频率改成 “5s”，曲线就会跟着实时变
要是想温度超 30℃时报警，点面板右上角的三个点→“Edit”→“Alert”：
- 点 “Create Alert”，“Condition” 选 “Last () > 30”
- “Notifications” 里选 “Add notification channel”，类型选 “Email”，填自己的邮箱
- 保存后，温度超标的时候就能收到邮件提醒了
3. 数据流转全过程
简单说就是：Python 脚本模拟传感器不断产生温度数据→Prometheus 每隔 5 秒去脚本的 8000 端口 “抄数”→Grafana 从 Prometheus 里把数据读出来，用图表显示，同时盯着数值看要不要报警。整个过程就像快递流程：卖家（传感器）备货→快递员（Prometheus）定时取货→驿站（Grafana）展示存货并提醒收件人（运维人员）。
四、Python 代码实例分析
1. 用 Python+Prometheus+Grafana 实现温度监控
场景：用 Python 脚本模拟传感器数据，通过 Prometheus 采集，再在 Grafana 展示。
# 安装依赖：pip install prometheus-client
from prometheus_client import start_http_server, Gauge
import random
import time
# 定义一个Gauge类型指标（可增可减的数值）
temperature_gauge = Gauge(
'room_temperature', # 指标名
'Temperature of each room', # 描述
['room'] # 标签：区分不同房间
)
def generate_data():
# 模拟3个房间的温度（18-30℃）
rooms = ['living_room', 'bedroom', 'kitchen']
while True:
for room in rooms:
temp = round(random.uniform(18, 30), 1)
temperature_gauge.labels(room=room).set(temp)
time.sleep(5) # 每5秒更新一次
if __name__ == '__main__':
start_http_server(8000) # 启动HTTP服务，供Prometheus采集
generate_data()
操作步骤：
- 运行脚本后，访问http://localhost:8000可看到生成的指标
- 在 Prometheus 配置文件中添加数据源：targets: ['localhost:8000']
- Grafana 中导入room_temperature指标，拖拽生成温度曲线（参考前文步骤）
2. 用 Python+ECharts 实现温度分布图
场景：从 Prometheus 取数据，用 Python 处理后，生成带户型图的温度热力图。
# 安装依赖：pip install requests pyecharts
import requests
from pyecharts import options as opts
from pyecharts.charts import Geo
from pyecharts.globals import ChartType
# 从Prometheus获取数据
def get_temperature():
url = "http://localhost:9090/api/v1/query?query=room_temperature"
response = requests.get(url).json()
data = []
for item in response['data']['result']:
room = item['metric']['room']
temp = float(item['value'][1])
# 模拟房间坐标（x,y）
positions = {
'living_room': [100, 200],
'bedroom': [300, 200],
'kitchen': [200, 400]
}
data.append((room, temp, positions[room]))
return data
# 生成ECharts图表
def draw_heatmap():
data = get_temperature()
geo = Geo()
# 添加房间坐标
for room, _, pos in data:
geo.add_coordinate(room, pos[0], pos[1])
# 添加温度数据（值越大颜色越红）
geo.add(
"温度",
[(d[0], d[1]) for d in data],
type_=ChartType.HEATMAP,
symbol_size=50
)
geo.set_global_opts(
visualmap_opts=opts.VisualMapOpts(
min_=18, max_=30, range_text=['高温', '低温']
)
)
geo.render("room_heatmap.html") # 生成网页文件
if __name__ == '__main__':
draw_heatmap()
效果：运行后生成room_heatmap.html，打开可看到带颜色渐变的房间温度分布，红色表示高温，蓝色表示低温。
五、总结
- 想快速搭监控系统？用 Grafana+Prometheus，跟着步骤点鼠标就行，报警功能还现成
- 要做酷炫的定制大屏？ECharts+Python 更灵活，就是得写点代码
- 实际用的时候，一般是 Grafana 盯实时数据，ECharts 做汇报用的报表，两者配合着来更高效
