如何在Go ECharts仪表盘图表中设置自定义区间？

要实现仪表盘0-30绿色、31-65橙色、66-100红色的自定义区间，你需要通过配置仪表盘系列的AxisLine属性定义分段颜色，具体实现如下：

修改代码示例 #

在AddSeries方法中传入opts.GaugeSeriesOpts配置，指定区间对应的颜色：

import (
    "math/rand"
    "fmt"
    "github.com/go-echarts/go-echarts/v2/charts"
    "github.com/go-echarts/go-echarts/v2/opts"
)

func gaugeBase() *charts.Gauge {
    gauge := charts.NewGauge()
    gauge.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{Title: "自定义区间仪表盘示例"}),
    )

    // 配置自定义区间颜色
    gauge.AddSeries("ProjectA", []opts.GaugeData{{Name: "工作进度", Value: rand.Intn(100)}},
        charts.WithGaugeSeriesOpts(
            opts.GaugeSeries{
                // 设置刻度分割数，让区间显示更清晰
                SplitNumber: 10,
                AxisLine: &opts.GaugeAxisLine{
                    LineStyle: &opts.GaugeLineStyle{
                        // 定义区间与对应颜色：[区间上限值, 颜色]
                        Color: [][]interface{}{
                            {30, "#52c41a"}, // 0-30 绿色
                            {65, "#faad14"}, // 31-65 橙色
                            {100, "#f5222d"},// 66-100 红色
                        },
                        Width: 30, // 仪表盘环形线条宽度
                    },
                },
            },
        ),
    )
    return gauge
}

func gaugeTimer() *charts.Gauge {
    gauge := charts.NewGauge()
    gauge.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{Title: "带定时器的自定义区间仪表盘"}),
    )

    gauge.AddSeries("ProjectB", []opts.GaugeData{{Name: "工作进度", Value: rand.Intn(100)}},
        charts.WithGaugeSeriesOpts(
            opts.GaugeSeries{
                SplitNumber: 10,
                AxisLine: &opts.GaugeAxisLine{
                    LineStyle: &opts.GaugeLineStyle{
                        Color: [][]interface{}{
                            {30, "#52c41a"},
                            {65, "#faad14"},
                            {100, "#f5222d"},
                        },
                        Width: 30,
                    },
                },
            },
        ),
    )

    fn := fmt.Sprintf(`setInterval(function () {
            option_%s.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            goecharts_%s.setOption(option_%s, true);
        }, 2000);`, gauge.ChartID, gauge.ChartID, gauge.ChartID)
    gauge.AddJSFuncs(fn)
    return gauge
}

关键配置说明 #

• AxisLine.LineStyle.Color：核心配置项，通过二维数组定义每个区间的上限值和对应颜色。数组中每个元素的第一个值是区间上限，颜色会自动应用到「前一个区间上限到当前值」的范围（比如{30, "#52c41a"}对应0-30的范围）。
• SplitNumber：设置仪表盘的刻度分割数量，数值越大刻度越密集，区间划分显示更精准。
• Width：控制仪表盘环形线条的粗细，可根据需求调整。

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