go-echart 简单使用

GO echart 简单使用

package main

import (
	"os"

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

func main() {
	// 创建图表实例
	graph := charts.NewGraph()
	const JFunc = `(params) => alert(params.name)`

	graph.SetGlobalOptions(
		charts.WithTitleOpts(opts.Title{
			Title:    "Graph with Double-Clickable Nodes",
			Subtitle: "Double-click a node to copy its name",
		}),
		charts.WithEventListeners(
			event.Listener{
				EventName: "click",
				// Handler:   JFunc,
				Handler: opts.FuncOpts(JFunc),
			},
		),
	)

	// 添加节点和链接
	graph.AddSeries("Graph Example",
		[]opts.GraphNode{
			{Name: "Node A", SymbolSize: 20},
			{Name: "Node B", SymbolSize: 30},
		},
		[]opts.GraphLink{
			{Source: "Node A", Target: "Node B"},
		},
	)
	// 添加自定义 JavaScript（双击事件）
	// graph.AddJSFuncStrs(`
	// 	document.addEventListener("DOMContentLoaded", function() {
	// 		let chartDom = document.getElementById("chart");
	// 		if (chartDom) {
	// 			chartDom.addEventListener("dblclick", function(event) {
	// 				let node = event.target;
	// 				debugger;
	// 				if (node && node.tagName === 'text') {
	// 					let nodeName = node.innerHTML;
	// 					navigator.clipboard.writeText(nodeName).then(function() {
	// 						alert("Copied: " + nodeName);
	// 					}, function(err) {
	// 						console.error("Copy failed", err);
	// 					});
	// 				}
	// 			});
	// 		}
	// 	});
	// `)

	// 输出 HTML
	f, err := os.OpenFile("tmp.html", os.O_CREATE|os.O_WRONLY|os.O_TRUNC, 0644)
	if err != nil {
		panic(err)
	}
	defer f.Close()
	graph.Render(f)
}

这段代码主要是在使用 go-echarts 库来创建一个 Graph（图）并设置其各项属性。下面是对代码的逐行解析：

代码解析

si := gg.AddSeries("Graph", nodes, link)

• AddSeries 是将图表数据添加到图表实例中。
• "Graph" 是该系列的名称，后续图表操作将引用此名称。
• nodes 是图表的节点数据（即图中的点）。
• link 是图表的连接数据（即节点之间的边）。

SetSeriesOptions 设置系列的各种选项

接下来通过 SetSeriesOptions 方法设置了多个选项，具体包括：

1. charts.WithGraphChartOpts

charts.WithGraphChartOpts(
	opts.GraphChart{
		EdgeSymbol:         "arrow",                // 边的符号设置为箭头
		Force:              &opts.GraphForce{Repulsion: 8000}, // 设置图的力引擎，增加节点之间的排斥力
		Layout:             "force",                // 布局方式为“力导向布局”
		Roam:               opts.Bool(true),        // 允许平移/缩放，设置为 true 启用
		FocusNodeAdjacency: opts.Bool(true),        // 聚焦节点邻接关系，聚焦时邻接节点会高亮显示
	},
)

• EdgeSymbol: 设置边（连接）上的符号为 "arrow"，即显示箭头，表示连接方向。
• Force: 配置图的力引擎（GraphForce）。通过 Repulsion: 8000 设置节点之间的排斥力，数值越大，节点之间越远。
• Layout: 设置图的布局方式为 "force"，即力导向布局（Force-Directed Layout）。这种布局方式通过模拟物理力的相互作用来自动布局图节点，避免重叠并使图形平衡。
• Roam: 设置图表是否可以拖动和缩放。opts.Bool(true) 表示启用该功能，使得图表可以被用户拖动和缩放。
• FocusNodeAdjacency: 设置聚焦节点时，是否高亮显示与该节点相邻的节点。opts.Bool(true) 表示启用此功能，聚焦一个节点时其邻接节点将高亮显示。

2. charts.WithLabelOpts

charts.WithLabelOpts(opts.Label{Show: opts.Bool(true), Position: "right"})

• Show: opts.Bool(true): 使标签可见。这里设置为 true，即显示节点的标签。
• Position: "right": 设置标签的位置为右侧，标签会显示在节点的右侧。

3. charts.WithLineStyleOpts

charts.WithLineStyleOpts(opts.LineStyle{
	Curveness: 0.3, // 设置边的曲率为 0.3，使得边不完全是直线，而是带有轻微弯曲
})

• Curveness: 0.3: 设置边的曲率。0 表示直线，1 表示最大弯曲。0.3 表示边有轻微的弯曲。

4. charts.WithEmphasisOpts

charts.WithEmphasisOpts(opts.Emphasis{
	Label: &opts.Label{
		Show:     opts.Bool(true),
		Color:    "black",
		Position: "left", // 在节点的左侧显示标签
	},
})

• WithEmphasisOpts: 设置当鼠标悬停在节点或边上时的高亮效果（强调效果）。
• Label: 当节点被高亮时，显示标签。
  • Show: opts.Bool(true): 高亮时显示标签。
  • Color: "black": 标签的颜色设置为黑色。
  • Position: "left": 标签的位置设置为节点的左侧。

总结

这段代码是用来配置一个带有力导向布局、箭头边和节点标签的图。具体包括：

• 节点和边：设置了节点和边的数据源（nodes 和 link）。
• 图形布局：选择了力导向布局，并设置了节点的排斥力。
• 标签显示：节点和边都启用了标签显示，并设置标签位置。
• 高亮效果：启用了鼠标悬停时高亮显示节点的标签，并设置了颜色和位置。
• 箭头效果：边的符号设置为箭头，表示连接的方向。

这些设置让图表变得更加生动、交互性强，适合用于展示复杂的网络结构、节点之间的连接关系等图形化的数据展示。