如何为go-echarts折线叠加柱状图设置右侧独立Y轴？

我制作了一个柱状图叠加折线图的图表，两者数据来源不同。由于折线图数据远大于柱状图数据，导致柱状图几乎无法辨认。希望为折线图在图表右侧设置独立Y轴解决此问题，但未找到go-echarts相关文档说明。

当前图表效果：

以下是我的原代码：

// Sort the dates so that the x-axis is ordered.
var dates []string
for date := range data {
    dates = append(dates, date)
}
sort.Strings(dates)

// Build series data for the bars (profit) and line (transaction count).
var barData []opts.BarData
for _, date := range dates {
    stat := data[date]
    barData = append(barData, opts.BarData{Value: stat.Profit})
}

// Create the bar chart for profit.
bar := charts.NewBar()
bar.SetGlobalOptions(
    charts.WithTitleOpts(opts.Title{
        Title:    "Daily Profit",
        Subtitle: "Profit in USDT",
    }),
    charts.WithLegendOpts(opts.Legend{
        Show: opts.Bool(false),
    }),
    charts.WithDataZoomOpts(opts.DataZoom{
        Type:  "slider",
        Start: 50,
        End:   100,
    }),
    // First y-axis (index 0) for Profit USDT; no explicit index needed.
    charts.WithYAxisOpts(
        opts.YAxis{
            Type: "value",
        },
    ),
)
bar.SetXAxis(dates).AddSeries("Profit USDT", barData)

// Build series data for the bars (profit) and line (transaction count).
var lineData []opts.LineData
for _, date := range dates {
    stat := data[date]
    lineData = append(lineData, opts.LineData{Value: stat.Count, YAxisIndex: 1})
}

// Create the bar chart for profit.
line := charts.NewLine()
line.SetXAxis(dates).
    AddSeries("Transaction Count", lineData)
line.SetGlobalOptions(
    // First y-axis (index 0) for Profit USDT; no explicit index needed.
    charts.WithYAxisOpts(
        opts.YAxis{
            Type: "value",
            Position: "right",
        },
    ),
)
line.ExtendYAxis(opts.YAxis{Type: "value", Position: "right", Show: opts.Bool(true)})

bar.Overlap(line)

return bar

解决方案 #

核心思路是在主柱状图中添加右侧Y轴，并让折线图的系列绑定到这个新轴上——Overlap模式下主图表的全局配置会主导整个图表，子图表单独配置Y轴会失效。

修正后的完整代码 #

// Sort the dates so that the x-axis is ordered.
var dates []string
for date := range data {
    dates = append(dates, date)
}
sort.Strings(dates)

// Build series data for the bars (profit)
var barData []opts.BarData
for _, date := range dates {
    stat := data[date]
    barData = append(barData, opts.BarData{Value: stat.Profit})
}

// Create the bar chart for profit, add both left and right Y-axis here
bar := charts.NewBar()
bar.SetGlobalOptions(
    charts.WithTitleOpts(opts.Title{
        Title:    "Daily Profit",
        Subtitle: "Profit in USDT & Transaction Count",
    }),
    charts.WithLegendOpts(opts.Legend{Show: opts.Bool(true)}), // 显示图例区分两个系列
    charts.WithDataZoomOpts(opts.DataZoom{
        Type:  "slider",
        Start: 50,
        End:   100,
    }),
    // 左侧Y轴（索引0）：对应柱状图利润数据
    charts.WithYAxisOpts(opts.YAxis{
        Type: "value",
        Name: "Profit (USDT)",
    }),
)
// 添加右侧Y轴（索引1）：对应折线图交易数量数据
bar.ExtendYAxis(opts.YAxis{
    Type:     "value",
    Position: "right",
    Name:     "Transaction Count",
})

// 绑定柱状图到左侧Y轴（默认索引0，可省略）
bar.SetXAxis(dates).AddSeries("Profit USDT", barData)

// Build series data for the line (transaction count)
var lineData []opts.LineData
for _, date := range dates {
    stat := data[date]
    // 指定折线图使用索引1的右侧Y轴
    lineData = append(lineData, opts.LineData{Value: stat.Count, YAxisIndex: 1})
}

// 创建折线图，无需单独配置全局Y轴
line := charts.NewLine()
line.SetXAxis(dates).AddSeries("Transaction Count", lineData)

// 叠加折线图到柱状图
bar.Overlap(line)

return bar

关键修改说明 #

• 主图表配置双Y轴：在柱状图中通过WithYAxisOpts设置左侧Y轴（索引0），再用ExtendYAxis添加右侧Y轴（索引1）
• 折线图绑定目标轴：构建LineData时指定YAxisIndex: 1，让折线数据关联右侧独立Y轴
• 移除子图表冗余配置：Overlap模式下子图表的全局Y轴配置会被主图表覆盖，直接删除即可
• 优化图表可读性：开启图例区分两个系列，更新标题说明包含双数据维度

内容的提问来源于stack exchange，提问作者MasterShake20