G6使用步骤

关注

原创最新推荐文章于 2026-02-24 05:01:46 发布 864 阅读 AI 写同款· GEO 优化 ›

vue中使用antv G6 的树图TreeGraph G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。它是一款国产可视化插件，中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表，d3作为一款国外很强大的可视化插件，它的官方文档是非汉语文档，社区虽然很活跃，但几乎是英文文档，阅读和学习起来并不是那么轻松，尤其是英语不太好的同学，阅读和学习d3更吃力。这时候G6就是不错的选择。因为G6包含丰富的图表类型，还可以实现节点，边等自定义。代码如下（示例）： ListaData.json........... 阅读详情

Step 1	创建容器
Step 2	创建关系图
Step 3	配置数据源，渲染

 1. 需要在HTML中创建一个用于容纳G6绘制的图的容器，G6在绘制时会在该容器下追加canvas标签，将图绘制其中
<div id="vessel"></div>
 2. 创建关系图时，至少需要为图设置容器、宽和高
const graph = new G6.Graph({
	container:'vessel',
	width:1000,
	Height:600,
})
 3. G6的数据源为JSON格式的对象，该对象中需要有节点和边字段，分别用数组表示。然后用数据去渲染图。
const data={
			nodes:[
				{id:'node1',x:100,y:200},
				{id:'node2',x:200,y:300}
			],
			edges:[
				{source:'node1', target:'node2'}
			]
	}
graph.data(data)//读取数据源到图上
graph.render()//渲染图