在go-echarts中自定义Tooltip格式化显示

go-echarts是一个强大的Go语言图表库，它基于ECharts实现。在实际使用中，我们经常需要对图表中的Tooltip（提示框）进行自定义格式化显示。本文将详细介绍如何在go-echarts中实现Tooltip的自定义格式化功能。

Tooltip格式化基础

在go-echarts中，Tooltip组件提供了多种格式化选项。最基本的格式化方式是使用字符串模板：

charts.WithTooltipOpts(opts.Tooltip{
    Formatter: "{b}: {c}小时",
})

这种简单的字符串格式化适用于大多数基础场景，其中{b}表示类目值，{c}表示数值。

使用JavaScript函数进行高级格式化

当我们需要更复杂的格式化逻辑时，可以使用JavaScript函数来实现。例如，将小时数转换为"小时:分钟"的格式：

const tooltipJSFunc = `function (params) {
    var hours = Math.floor(params.value);
    var minutes = Math.round((params.value - hours) * 60);
    return hours + '小时' + minutes + '分钟';
}`

// 在图表配置中使用
charts.WithTooltipOpts(opts.Tooltip{
    Formatter: opts.FuncOpts(tooltipJSFunc),
})

这种方式的优势在于可以完全自定义Tooltip的显示内容和格式，实现各种复杂的需求。

实际应用示例

下面是一个完整的柱状图示例，展示了如何使用JavaScript函数格式化Tooltip：

func CreateCustomTooltipChart() *charts.Bar {
    bar := charts.NewBar()
    
    // 设置全局选项
    bar.SetGlobalOptions(
        charts.WithTooltipOpts(opts.Tooltip{
            Trigger: "axis",
            AxisPointer: &opts.AxisPointer{
                Type: "line",
            },
            Formatter: opts.FuncOpts(tooltipJSFunc),
        }),
        charts.WithYAxisOpts(opts.YAxis{
            Name: "时长(小时)",
        }),
    )
    
    // 设置X轴和数据
    bar.SetXAxis([]string{"周一","周二","周三","周四","周五","周六","周日"}).
        AddSeries("使用时长", []opts.BarData{
            {Value: 4.5},
            {Value: 3.2},
            {Value: 6.7},
            {Value: 5.0},
            {Value: 4.8},
            {Value: 8.2},
            {Value: 7.5},
        })
    
    return bar
}

注意事项

1. JavaScript函数必须是一个完整的函数定义字符串
2. 函数参数params包含了当前数据项的所有信息
3. 在较新版本的go-echarts中，可以直接使用FuncOpts来包装JS函数
4. 确保JS函数的返回值是字符串类型

通过以上方法，我们可以灵活地控制Tooltip的显示内容和格式，使图表展示更加专业和用户友好。