文章目录
- 1、前言
- 2、数据处理
- 3、自定义节点样式方法
- 4、完整代码
1、前言
目前实现了两点：
1. 根据准备好的数据生成树形图
2. 根据数据数值改变节点以及节点文本颜色
百度上关于g6树形图的文章挺少的，因为g6功能很齐全非常庞大 （非常用心的在做图表，真的好用）但用脚写的文档而且主要我比较菜
实现效果如下：
2、数据处理
- 安装和引入G6
我直接在用到树图的vue文件引入了，在main.js中全局引入似乎没有效果
npm install --save @antv/g6
import G6 from "@antv/g6";- 数据处理
- 注意：
- 1、生成树形图的数据中必须包含id 和 children 两个数据项，
- 2、id的数据类型为字符串类型，不然在图上操作收缩节点的时，收到最后一个节点的时候会报错。可以在数据处理将id转为string类型
id: String(item.id)- 从后台返回的数据没有包含上面两个必要数据项，所以这里写了个方法处理一下
- 定义了一个数组接收处理后的数据 treedata 使用的时候图表数据 const data = this.treedata[0]
changeTreeData() {
this.getTreedata.forEach((item, i) => {
let data2 = [];
for (var i in item.indexList) {
let data3 = [];
for (var j in item.indexList[i].indexList) {
var data = (
item.indexList[i].indexList[j].indexName +
"(" +
item.indexList[i].indexList[j].newData +
"/" +
item.indexList[i].indexList[j].tarData +
")"
).replace(/(.{18})/g, "$1\n");
data3.push({ id: String(item.indexList[i].indexList[j].id), label: data, status: item.indexList[i].indexList[j].status });
}
data2.push({
id: String(item.indexList[i].id),
label: item.indexList[i].indexTitle,
children: data3,
});
}
this.treedata.push({id: String(item.id),label: item.indexTitle, children: data2 })
});
},处理出来的数据长这样
3、自定义节点样式方法
官方文档里做了样式的详细介绍 节点总览
我这里做了个简单的，根据数据项判断，修改节点样式
// 这个方法是为不同节点进行配置 必须在 render 之前调用 定义的样式优先级
graph.node(function (node) {
return {
//节点样式 根据数据项更改节点填充和描边颜色
style: {
fill:node.depth==2 && node.status?'#c1422b':'#c6e5ff',
stroke:node.depth==2 && node.status?'#c1422b':'#6b9bfa'
},
//String 类型。标签文本的文字内容,在本文开头展示的图里这里写的是 label: node.id
label: node.label,
labelCfg: {
// 文本的偏移
offset: 10,
// 文本相对于节点的位置
position: node.children && node.children.length > 0 ? 'left' : 'right',
//文本样式 根据数据项更改文本颜色
style:{ fill:node.depth==2 && node.status?'#c1422b':'#2c3e50'},
},
};
});4、完整代码
<template>
<div>
<div id="container" :style="{ height: '800px', width: '100%' }" />
</div>
</template>
<script>
import G6 from "@antv/g6";
export default {
data() {
return {
getTreedata: [
..你的数据
],
treedata: [],
};
},
mounted() {
this.changeTreeData();
this.showChart();
},
methods: {
//处理数据
changeTreeData() {
this.getTreedata.forEach((item, i) => {
let data2 = [];
for (var i in item.indexList) {
let data3 = [];
for (var j in item.indexList[i].indexList) {
var data = (
item.indexList[i].indexList[j].indexName +
"(" +
item.indexList[i].indexList[j].newData +
"/" +
item.indexList[i].indexList[j].tarData +
")"
).replace(/(.{18})/g, "$1\n");
data3.push({ id:item.indexList[i].indexList[j].id, label: data, status: item.indexList[i].indexList[j].status });
}
data2.push({
id: String(item.indexList[i].id),
label: item.indexList[i].indexTitle,
children: data3,
});
}
this.treedata.push({id: item.id,label: item.indexTitle, children: data2 })
console.log(this.treedata);
},
//生成树图
showChart() {
const data = this.treedata[0]
const container = document.getElementById("container");
if (container) {
const width = container.clientWidth;
const height = container.clientHeight;
const graph = new G6.TreeGraph({
// 图的DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
container: container,
width: width,
height: height,
// 设置画布的模式 包含default 模式和 edit 模式
modes: {
// default 模式中包含点击选中节点行为和拖拽画布行为
default: [
{
type: "collapse-expand",
trigger: 'click',
},
// 拖拽画布 和 缩放画布
"drag-canvas",
"zoom-canvas",
],
},
// 默认的节点设置
defaultNode: {
//节点的大小
size: 14,
// 指定边连入节点的连接点的位置
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
// 节点样式
style: {
fill: "#C6E5FF",
stroke: "#5B8FF9",
},
},
// 默认的配置
defaultEdge: {
type: "cubic-horizontal",
style: {
stroke: "#A3B1BF",
},
},
layout: {
type: "compactBox",
direction: "LR",
// 指定节点 ID
getId: function getId(d) {
return d.id;
},
// 指定节点高度
getHeight: function getHeight() {
return 16;
},
//指定节点宽度
getWidth: function getWidth() {
return 16;
},
// 指定节点之间的垂直间距
getVGap: function getVGap() {
return 10;
},
// 指定节点之间的水平间距
getHGap: function getHGap() {
return 100;
},
},
});
// 为不同节点进行不同的配置 必须在 render 之前调用
graph.node(function (node) {
return {
style: {
fill:node.depth==2 && node.status?'#c1422b':'#c6e5ff',
stroke:node.depth==2 && node.status?'#c1422b':'#6b9bfa'
},
//String 类型。标签文本的文字内容
label: node.label,
labelCfg: {
// 文本的偏移
offset: 10,
// 文本相对于节点的位置
position: node.children && node.children.length > 0 ? 'left' : 'right',
//文本样式
style:{ fill:node.depth==2 && node.status?'#c1422b':'#2c3e50'},
},
};
});
//初始化数据
graph.data(data);
//渲染视图
graph.render();
//让画布内容适应视口
graph.fitView();
}
},
},
};
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
