Go go-echarts 怎样把多个图表放进同一页面

如果一个页面既要放趋势折线图，又要放分类柱状图，Go go-echarts/v2 的做法不是把两组数据混进同一个图表实例，而是分别创建图表，再交给 components.Page 统一组织。页面容器负责收集图表、设置布局和输出；每个图表仍然保留自己的坐标轴、系列和标题。

官方地址：https://pkg.go.dev/github.com/go-echarts/go-echarts/v2/components

这也是从旧版 API 迁移时最容易忽略的边界：图表类型来自 charts，页面组合来自 components，不要把“多个系列”误当成“多个图表”。

先分清单图 Render 和页面组合

单个柱状图或折线图可以直接调用自己的 Render。这种方式适合一个输出只服务一个图表的场景；一旦页面需要多个图表，就应先创建页面容器，再把图表作为独立对象加入。

用 components.NewPage 加入多个图表

下面的例子创建一个柱状图和一个折线图。两者使用各自的数据类型和标题，最后通过 AddCharts 交给同一个页面。这样做的好处是每个图表仍然可以独立调整，不需要维护一个包含两套坐标轴的巨型配置。

package main

import (
	"os"

	"github.com/go-echarts/go-echarts/v2/charts"
	"github.com/go-echarts/go-echarts/v2/components"
	"github.com/go-echarts/go-echarts/v2/opts"
)

func makeBar() *charts.Bar {
	bar := charts.NewBar()
	bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
		Title: "季度订单量",
	}))
	// 柱状图只负责自己的分类轴和数据系列。
	bar.SetXAxis([]string{"一季度", "二季度", "三季度"}).
		AddSeries("订单", []opts.BarData{
			{Value: 120}, {Value: 168}, {Value: 151},
		})
	return bar
}

func makeLine() *charts.Line {
	line := charts.NewLine()
	line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
		Title: "季度转化率",
	}))
	// 折线图使用同一组分类轴，但仍是独立的图表实例。
	line.SetXAxis([]string{"一季度", "二季度", "三季度"}).
		AddSeries("转化率", []opts.LineData{
			{Value: 0.18}, {Value: 0.23}, {Value: 0.21},
		})
	return line
}

func main() {
	page := components.NewPage()
	page.SetPageTitle("订单分析")
	// AddCharts 接收多个 Charter，把独立图表放入同一个页面。
	page.AddCharts(makeBar(), makeLine())

	file, err := os.Create("dashboard.html")
	if err != nil {
		panic(err)
	}
	defer file.Close() // 页面写完后关闭文件，避免资源泄漏。
	if err := page.Render(file); err != nil {
		panic(err)
	}
}

这里的关键不是把柱状图改成“组合图”，而是让 page.AddCharts 接收多个满足页面图表接口的对象。页面会合并各图表需要的资源，并把它们安排到同一份 HTML 输出中。

按页面形态选择布局

go-echarts/v2 的 components 包提供页面布局选项。常见的 PageFlexLayout 适合让多个图表按页面容器排列；如果需要更少的布局干预，也可以使用默认布局或其他页面布局常量。布局是页面层设置，不要逐个图表重复设置。

page := components.NewPage()
page.SetPageTitle("销售与转化")
// Flex 布局把多个图表交给页面容器统一排列。
page.SetLayout(components.PageFlexLayout)
page.AddCharts(salesBar, conversionLine)

// 也可以把 HTTP 响应作为输出写入器，直接返回同一页面。
func dashboard(w http.ResponseWriter, _ *http.Request) {
	// 生产代码中应复用已经构造好的图表，避免每次请求重复准备大数据。
	page.Render(w)
}

如果页面需要更复杂的栅格、卡片宽度或响应式断点，建议把图表数量控制在读者能比较的范围内，并把 CSS 布局当作页面层问题处理。go-echarts 的 Page 解决的是图表组合和输出，不替代整套前端布局系统。

从 v1 迁移到 v2 时检查哪些地方

如果旧项目使用的是早期 API，最先检查模块导入路径。v2 的模块路径包含 /v2/，页面容器使用 components.NewPage，图表对象仍从 charts 创建。不要只改一个 import 就把旧版 Page 与新版图表混用。

官方包文档还显示，页面会合并加入图表的资源；如果部署环境需要自托管静态资源，应在页面层统一配置资源地址，而不是在每个图表里随意混用不同地址。

发布前的最小回归清单

1. 确认所有导入路径都来自同一个 /v2/ 模块。
2. 确认每个图表对象都已经调用自己的数据与系列配置。
3. 确认所有图表都通过一次 AddCharts 加入页面。
4. 确认页面布局只在 Page 层设置，并且输出 writer 没有提前关闭。
5. 确认文件输出或 HTTP 输出只调用一次 page.Render，错误能够向上返回。

我的经验是，页面空白时先看“有没有把图表加入 Page”和“输出 writer 是否有效”，而不是马上去改 ECharts 配色。多个图表同页的核心链路很短：创建图表、加入页面、设置布局、渲染输出。

相关问题

多个图表必须使用相同的 X 轴吗？

不必须。每个图表仍有自己的坐标轴和系列；只有业务上需要对齐比较时，才建议使用一致的分类顺序。

可以把 Page 直接写到 HTTP 响应吗？

可以，只要响应对象实现了写入接口。实际服务中还要处理请求并发、缓存和错误返回，不要在每次请求中无条件重建很大的数据集。

为什么新增图表后页面没有变化？

优先检查新增图表是否真的传给了 AddCharts，以及是否在加入图表之后才调用 Render。