go-echarts仅负责图表渲染，不采集指标；需先用prometheus/client_golang或expvar暴露数据，再手动拉取并构造[]float64等数据喂入，如调用newline()后须setxaxis()和addseries()且长度对齐，否则图表空白。
Go-Echarts 不能直接采集指标，得先有数据
Go-Echarts 只是把数据渲染成 ECharts 图表的 Go 封装库，它不负责采集 CPU、内存、请求延迟这些指标。你得先用 prometheus/client_golang 暴露指标端点，或用 expvar + 自定义 handler 把运行时数据结构化输出，再把它们喂给 Go-Echarts。
常见错误是以为调用 NewBar() 就能自动画出服务 P95 延迟曲线——实际它连 HTTP 请求都没发过。数据必须是你自己构造的 []float64 或 []string，比如从 Prometheus 查询接口拉回的 JSON，解析后塞进 XAxisData 和 Series。
-
微服务场景下，建议用
github.com/prometheus/client_golang注册自定义指标（如http_request_duration_seconds_bucket），再通过http.Get("http://localhost:9090/api/v1/query?query=...")拉取最近 5 分钟数据 - 如果不想依赖 Prometheus，可用
runtime.ReadMemStats()+time.Now().Unix()手动攒点时间序列，但注意采样频率别太高（比如每 10 秒一次），否则影响服务性能 - Go-Echarts 的
SetXAxis()和AddSeries()都要求数据长度对齐，常见坑是 X 轴时间戳数量和 Y 轴数值数量不一致，会静默渲染失败（图表空白）
用 Go-Echarts 渲染折线图展示 QPS 和延迟趋势
微服务最常看的是请求量（QPS）和 P90/P95 延迟随时间的变化，适合用带时间轴的折线图。Go-Echarts 对时间轴支持有限，TimeLine 组件不成熟，推荐用字符串数组模拟时间点，配合 CategoryAxis。
示例中把最近 60 个采样点（每 10 秒一个）转成两个折线系列：
chart := charts.NewLine()
chart.SetGlobalOptions(
charts.WithTitleOpts(opts.Title{Title: "QPS & P95 Latency"}),
charts.WithLegendOpts(opts.Legend{Show: true}),
)
chart.XAxis.Data = make([]string, len(timestamps))
for i, t := range timestamps {
chart.XAxis.Data[i] = time.Unix(t, 0).Format("15:04")
}
chart.AddSeries("QPS", charts.LineData{Values: qpsValues})
chart.AddSeries("P95 Latency (ms)", charts.LineData{Values: p95Values})
chart.Render(w) // w 是 http.ResponseWriter
-
timestamps必须是升序 int64 时间戳，且与qpsValues、p95Values等长；否则图表错位或报错 - 不要用
opts.Tooltip{Formatter: "xxx"}直接拼 JS 字符串，Go-Echarts 会原样输出，ECharts 不识别；应改用opts.Tooltip{Trigger: "axis"}启用默认坐标轴提示 - 若数据点超过 200 个，建议开启
opts.LineChartOpts{Smooth: true}并设置opts.DataZoom{Type: "slider"}，否则页面卡顿
把图表嵌入 HTML 页面时注意静态资源路径
Go-Echarts 默认生成纯 HTML 文件（含内联 JS），但微服务通常用 http.ServeFile 或模板渲染，这时 ECharts 的 JS 库没加载，页面只显示空白容器。
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
正确做法是：用 chart.RenderAsHTML() 获取不含 JS 的 HTML 片段（只有 <div id="chart"></div>），然后在自己的 HTML 模板里手动引入 CDN 或本地 ECharts JS：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><div id="chart" style="width: 800px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({ /* 这里填 Go-Echarts 生成的 option JSON */ });
</script>
- Go-Echarts 的
RenderAsHTML()返回的是完整 HTML 文档（含标签），不能直接插入已有页面；要用chart.JSON()提取 raw option 数据，再手写 JS 初始化 - CDN 版本必须与 Go-Echarts 依赖的 ECharts 版本一致（查看
go.mod中github.com/go-echarts/go-echarts/v2的 require 行），否则series.type: "line"可能被忽略 - 如果服务部署在子路径（如
/dashboard/metrics），ECharts 的地图 JSON 等异步资源会 404，需配置opts.Initialization{Renderer: "canvas", Width: "100%", Height: "400px"}并禁用所有非必要扩展（如geo、map）
多实例指标聚合时避免前端计算溢出
一个微服务通常有多个 Pod 实例，如果每个实例都渲染自己的图表，运维人员就得切来切去。更合理的是后端聚合——但别在 Go-Echarts 渲染前做复杂计算，比如把 10 个实例的 P95 延迟求平均值，这会掩盖长尾问题。
真实场景中应该保留原始分布，用箱线图（BoxPlot）或小提琴图（Violin）呈现，但 Go-Echarts v2 目前不支持 Violin，BoxPlot 需手动构造五数概括（min, Q1, median, Q3, max）：
boxData := []opts.BoxData{
{Low: min, Q1: q1, Median: med, Q3: q3, High: max},
}
chart := charts.NewBoxPlot()
chart.AddSeries("P95 Latency across Pods", boxData)
- BoxPlot 的输入不是原始数组，而是每个实例算出的一组五数，必须提前在采集层完成（例如用 Prometheus 的
quantile_over_time(0.95, ...)） - 如果实例数动态变化（如 K8s HPA 扩缩容），别把所有实例数据硬编码进 Go 服务；应设计成按服务名查标签，再批量拉取各实例指标，否则每次扩容都要重启服务
- Go-Echarts 的
charts.NewBoxPlot()默认用category轴，若想横轴显示时间、纵轴显示延迟，需手动设置YAxis类型为value，否则刻度错乱
真正麻烦的不是画图，而是让指标有意义：P95 延迟突增时，得能立刻关联到具体 Pod、Trace ID 和 GC 次数——Go-Echarts 只解决最后 1% 的事，前面 99% 得靠指标设计、采集链路和告警联动。
