在go-echarts中实现自定义HTML模板渲染树形图的技术实践

2025-05-30 22:37:36作者：管翌锬

go-echarts是一个强大的Go语言图表库，它基于ECharts实现。本文将详细介绍如何使用go-echarts库创建树形图，并将其嵌入到自定义HTML模板中的技术实现方案。

核心问题分析

在实际开发中，我们经常需要将生成的图表嵌入到自定义的HTML页面中。当使用go-echarts生成树形图时，会遇到以下技术难点：

图表配置中的HTML特殊字符会被自动转义
工具提示(Tooltip)中的超链接无法正常显示
如何将图表配置与自定义模板结合

解决方案实现

1. 基础树形图配置

首先创建基础的树形图数据结构，包含节点名称、子节点和需要显示的值：

var TreeNodes = []*opts.TreeData{
    {
        Name: "Node1",
        Children: []*opts.TreeData{
            {
                Name: "Chield1",
            },
        },
    },
    {
        Name: "Node2",
        Children: []*opts.TreeData{
            {
                Name:  "Chield1",
                Value: fmt.Sprintf("link: \n<a href='https://example.com' target='_blank'>%s</a>", "to example"),
            },
        },
    },
}

2. 图表初始化与配置

创建图表实例并设置全局选项：

graph := charts.NewTree()
graph.SetGlobalOptions(
    charts.WithInitializationOpts(opts.Initialization{Width: "100%", Height: "95vh"}),
    charts.WithTitleOpts(opts.Title{Title: "basic tree example"}),
    charts.WithTooltipOpts(opts.Tooltip{
        Show:       opts.Bool(true),
        Enterable:  opts.Bool(true),
        Formatter:  opts.FuncOpts("==function(params){return params.value;}=="),
    }),
)

关键点在于Tooltip的Formatter配置，使用特殊标记"=="包裹JavaScript函数，以便后续处理。

3. 处理图表配置

使用RenderSnippet方法获取图表配置片段，并进行特殊处理：

chartSnippet := graph.RenderSnippet()
myOptions := functionMarker.ReplaceAllString(chartSnippet.Option, "")

其中functionMarker是一个正则表达式，用于清理配置中的特殊标记：

var functionMarker = regexp.MustCompile(`(__f__")|("__f__)|(==")|("==)`)

4. 自定义模板渲染

创建自定义HTML模板，并使用Go的template包进行渲染：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Awesome go-echarts</title>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="item" id="chart" style="width: 100%; height: 95vh"></div>
    </div>
    <script type="text/javascript">
      let chart = echarts.init(document.getElementById('chart'), 'white', { renderer: 'canvas' });
      let option = {{ . | safeJS }}
      chart.setOption(option);
    </script>
  </body>
</html>

模板中使用safeJS函数防止HTML转义：

myTpl := template.New("myTpl").Funcs(template.FuncMap{
    "safeJS": func(s interface{}) template.JS {
        return template.JS(fmt.Sprint(s))
    },
})