Go go-echarts 怎样为图表配置缩放组件

当 Go go-echarts 图表从 7 个点扩展到几百个点时，最实用的做法不是把横轴标签全部压缩，而是给图表挂上 opts.DataZoom。通常把 inside 用作鼠标滚轮、触控板或触摸手势，把 slider 用作可见的底部范围条；桌面端和移动端都要照顾时，两者可以同时配置。

官方地址：https://github.com/go-echarts/go-echarts

先按使用场景选择缩放组件

go-echarts 的缩放配置最终会进入 ECharts 的 dataZoom 组件。inside 没有额外的可见控件，适合希望图表保持紧凑的仪表盘；slider 有明确的拖动范围，适合报表和不熟悉手势的读者。若图表同时服务桌面和触摸设备，组合配置比二选一更稳妥。

用 opts.DataZoom 配置一条可操作的折线图

下面的示例给出一条 30 天访问量曲线，并把两个缩放组件都绑定到第 0 个横轴。初始只展示中间的 80% 区间，读者仍可拖回完整数据。

package main

import (
    "os"

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

func main() {
    line := charts.NewLine()

    // 用同一个横轴承载日期，避免缩放组件误控到其他轴。
    line.SetXAxis([]string{"01日", "02日", "03日", "04日", "05日", "06日", "07日", "08日"}).
        AddSeries("访问量", []opts.LineData{
            {Value: 820}, {Value: 910}, {Value: 760}, {Value: 1180},
            {Value: 1320}, {Value: 1250}, {Value: 1490}, {Value: 1610},
        })

    line.SetGlobalOptions(
        // inside 适合滚轮和触摸；slider 让区间边界始终可见。
        charts.WithDataZoomOpts(
            opts.DataZoom{Type: "inside", XAxisIndex: 0, Start: 10, End: 90, Throttle: 80},
            opts.DataZoom{Type: "slider", XAxisIndex: 0, Start: 10, End: 90, FilterMode: "none"},
        ),
    )

    // 关闭文件句柄，Render 的错误必须交给调用方处理。
    file, err := os.Create("visits.html")
    if err != nil {
        panic(err)
    }
    defer file.Close()
    if err := line.Render(file); err != nil {
        panic(err)
    }
}

这里的 Start 和 End 是数据范围百分比，取值范围是 0 到 100；它们不是数组下标。XAxisIndex: 0 让绑定关系明确，尤其适合后续增加第二个横轴的图表。FilterMode: "none" 可以把“视窗变化”和“数据项是否被过滤”分开考虑，若业务需要只保留窗口内数据，再选择其他过滤策略。

参数怎么取：初始窗口、节流和多轴边界

短图表不必强行加缩放，数据点超过一屏后再设置一个合理的初始窗口。实时或频繁刷新图表可先保留默认节流，再根据拖动时的刷新压力调大 Throttle；若关闭动画、数据量也不大且拖动不顺，再考虑设为 0。对于垂直缩放，需要显式设置 Orient: "vertical" 并指定 YAxisIndex，不要依赖默认轴。

多个坐标轴时，最容易出现的错误是 slider 看起来能拖动，但实际控制了另一组数据。做法是为每个 DataZoom 写清 XAxisIndex 或 YAxisIndex；若要让一个范围条同时影响多轴，应把多个轴索引作为数组传入，并在正文里说明这个联动决定。

不适合加缩放的情况与检查清单

如果横轴只有几项分类，缩放会增加操作成本；如果读者必须同时看到全量趋势，优先考虑概览图加明细图，而不是把默认窗口设得过窄。发布前可按下面清单检查：

• 组件类型是否与设备匹配：手势、滑块，还是两者组合。
• Start 是否小于 End，且没有把百分比误写成数组下标。
• 每个缩放组件是否绑定了正确的横轴或纵轴。
• 过滤模式是否符合“只看窗口数据”或“保留全量数据”的业务语义。

常见问题

为什么只配置 slider 却看不到滑块？

先确认组件确实通过 SetGlobalOptions 传入，并且图表容器有足够高度；同时检查 Type 是否拼成了 slider，而不是把它放进了 series 选项。

inside 和 slider 能否同时使用？

可以。它们共享同一数据窗口，前者提供隐式手势，后者提供可见范围条；要保持相同的 Start、End 和轴索引，避免两个控件初始状态不一致。

数据很多时是不是把 Throttle 设为 0 最好？

不一定。Throttle 越小，刷新越频繁；大量数据或动画更新时应先保留正值，再用实际拖动体验调整，而不是只追求立即刷新。