Go go-echarts 时间轴组件与普通时间坐标轴有什么区别

go-echarts里“时间轴”容易指向两个不同概念：普通时间坐标轴使用xAxis.type="time"，按时间值确定数据点的位置；ECharts的timeline组件用于在多份图表配置之间切换或播放。前者回答“一个点发生在何时”，后者回答“当前显示哪份快照”。

官方包地址：https://pkg.go.dev/github.com/go-echarts/go-echarts/v2/charts。本文固定以go-echarts v2.7.3接口为例；该版本查询到的charts与components公开文档没有列出专门的Timeline类型，不把ECharts原生能力冒充为现成的Go封装。

做一个能区分两种需求的小示例

假设设备在8点、9点、12点各测一次温度，要看采样间隔，使用普通时间坐标轴。假设要切换9月和10月的仓库库存对比，每个月都是一组“甲仓、乙仓”柱状图，则属于快照切换，适合timeline。

项目分为两部分：Go端生成一个时间坐标轴HTML，另给一个原生timeline选项函数用于已有前端集成。两部分故意使用不同数据任务，不需要把它们混成一个对象才能理解区别。

准备依赖并确定时间数据格式

# 仅在新目录初始化模块，已有模块跳过此行
go mod init example.com/time-choice
# 固定本例依赖版本
go get github.com/go-echarts/go-echarts/v2@v2.7.3

Go的UnixMilli生成毫秒时间戳，本例采用UTC构造时刻，避免输入日期依赖机器本地时区。这里的UTC约束用于输入，浏览器显示的刻度格式与时区还需要按前端配置和消费环境确认。

先生成普通时间坐标轴图

把下面代码保存为main.go。LineData.Value用二维数据保存时间与测量值；不再把三个日期字符串作为等距分类标签传入SetXAxis。

package main

import (
    "fmt"
    "log"
    "os"
    "time"

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

func run() error {
    // 使用明确时区和不等间隔，便于区分时间轴与分类轴。
    base := time.Date(2026, 10, 1, 8, 0, 0, 0, time.UTC)
    data := []opts.LineData{
        {Value: []interface{}{base.UnixMilli(), 21}},
        {Value: []interface{}{base.Add(time.Hour).UnixMilli(), 23}},
        {Value: []interface{}{base.Add(4 * time.Hour).UnixMilli(), 22}},
    }
    line := charts.NewLine()
    line.SetGlobalOptions(
        charts.WithXAxisOpts(opts.XAxis{Type: "time"}),
        charts.WithYAxisOpts(opts.YAxis{Type: "value"}),
    )
    // 时间已放在每个数据项中，不再传一份日期分类标签。
    line.AddSeries("温度", data)

    file, err := os.Create("time-axis.html")
    if err != nil {
        return fmt.Errorf("创建页面失败: %w", err)
    }
    renderErr := line.Render(file)
    closeErr := file.Close()
    if renderErr != nil {
        return fmt.Errorf("输出HTML失败: %w", renderErr)
    }
    return closeErr
}

func main() {
    if err := run(); err != nil {
        log.Fatal(err)
    }
}

# 生成时间坐标轴示例页面
go run .

预期输出time-axis.html，页面加载ECharts资源后显示一条温度系列。两个时间间隔分别为1小时和3小时，因此第二段横向距离应体现更长的时间跨度；不应像三个等距分类那样排列。本文未运行代码，图片只解释对象结构。

按月份切换快照时使用timeline

下面是供前端使用的ECharts原生配置函数，不是go-echarts的Go方法。部署端应在已加载ECharts并创建实例后，把函数返回值交给setOption。timeline.data提供两个快照名称，options保存两份对应数据；baseOption里的横轴仍然是仓库分类。

// 返回ECharts原生timeline配置；这是前端配置函数，不是Go API。
function monthlySnapshotOption() {
  return {
    baseOption: {
      timeline: {
        axisType: "category",
        autoPlay: false,
        data: ["9月", "10月"]
      },
      xAxis: { type: "category", data: ["甲仓", "乙仓"] },
      yAxis: { type: "value", min: 0, max: 40 },
      series: [{ id: "stock", name: "库存件数", type: "bar" }]
    },
    // 每个配置项与timeline.data的同一位置对应。
    options: [
      { series: [{ id: "stock", data: [12, 18] }] },
      { series: [{ id: "stock", data: [20, 27] }] }
    ]
  };
}
// 在已由echarts.init创建的实例上调用：
// chart.setOption(monthlySnapshotOption());

选择9月时，应使用库存12、18；选择10月时，应使用20、27。这个切换关系来自options，与横轴是不是时间类型无关。示例关闭自动播放并固定纵轴0到40，方便人工比较快照；这些是本例的展示选择。

集成时不要混淆数据层和交互层

普通时间轴图部署时需要确保HTML依赖的ECharts脚本可访问。timeline扩展则需要由现有前端模板承载原生配置，或依据项目实际版本提供的扩展接口实现；不要直接复制网上的NewTimeline、AddChart之类名字并假定当前依赖存在。

把横轴Type改为time，不会自动生成播放按钮；给timeline加月份标签，也不会把仓库分类轴改成时间坐标。两者可以组合，例如按年份切换快照，每个快照内部又有时间序列，但要分别定义外层快照和内层时间数据。

用三个问题判断是否选对

日期字符串放在分类轴上算时间坐标轴吗？

不算。外观像日期不代表按实际时间差确定距离，要结合轴类型与系列坐标格式判断。

只是想拖动查看一段时间，必须timeline吗？

通常是时间轴配合dataZoom这类查看范围控制，而不是把每一段都做成快照。

快照能直接当作实时数据订阅吗？

不能据此推断。预置options只描述已有配置，实时请求和更新策略需要应用另行实现。

依据：go-echarts charts接口、opts定义、Apache ECharts坐标轴说明、timeline官方配置说明。