主页 / coding / 问题 / 79527565
Accepted
MasterShake20
Asked: 2025-03-22 22:06:58 +0800 CST

需要帮助在图表右侧显示 y 轴，以便使用 go-echarts 进行线叠加

  • 772

我有一个简单的条形图，上面叠加了一条线。条形和线是由不同的数据生成的，因此图表会歪曲条形的大小，因为线数据明显大于条形数据。我想在图表右侧为线条设置单独的 y 轴以防止这种情况发生，但我找不到有关如何执行此操作的 go-echarts 文档。

这是图表当前的图像。如您所见，条形几乎看不出来。

在此处输入图片描述

下面是我的代码。该行添加到代码底部。有人知道如何在该行的右侧添加 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) 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
go

1 个回答

  1. Best Answer

    只需添加 2 个 Y 轴并指定类别选项即可。我修改了官方示例代码中的代码：

    package main

import (
    "math/rand"
    "os"

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

func generateBarItems() []opts.BarData {
    items := make([]opts.BarData, 0)
    for i := 0; i < 7; i++ {
        items = append(items, opts.BarData{Value: rand.Intn(300)})
    }
    return items
}

func generateBarItemsBig() []opts.BarData {
    items := make([]opts.BarData, 0)
    for i := 0; i < 7; i++ {
        items = append(items, opts.BarData{Value: rand.Intn(300) + 1000})
    }
    return items
}

func main() {

    // create a new bar instance
    bar := charts.NewBar()
    // set some global options like Title/Legend/ToolTip or anything else
    bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
        Title:    "My first bar chart generated by go-echarts",
        Subtitle: "It's extremely easy to use, right?",
    }))

    // Put data into instance
    bar.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
        AddSeries("Category A", generateBarItems(), charts.WithBarChartOpts(opts.BarChart{
            YAxisIndex: 0,
        })).
        AddSeries("Category B", generateBarItemsBig(), charts.WithBarChartOpts(opts.BarChart{
            YAxisIndex: 1,
        }))
    bar.YAxisList = []opts.YAxis{
        opts.YAxis{
            Type: "value",
            Name: "small",
        },
        opts.YAxis{
            Type: "value",
            Name: "big",
        },
    }
    // Where the magic happens
    f, _ := os.Create("bar.html")
    bar.Render(f)
}
    • 1

相关问题