1. 前端選型
本著凡事先問GPT的原則爱沟，先看看GPT給我哪些答案。
ChatGPT
1.1 vis：好像沒聽過，試一下看看
1.2. echarts：一般用來做圖表铣减，關(guān)系圖也沒用過，試一下
1.4. d3：聽說入門比較麻煩脚作，對菜鳥不友好葫哗，算了，先不嘗試了
1.3. G6：螞蟻出品的可視化的組件球涛，試試劣针。
2. 測試數(shù)據(jù)準(zhǔn)備
這里主要準(zhǔn)備了一些《狂飆》電視劇中的人物關(guān)系，只當(dāng)個Demo做演示用宾符，不要琢磨細(xì)致程度
3. 寫代碼測試效果
3.1. vis
<template>
<div id="graphContainer"></div>
</template>
<script>
import {Network, DataSet} from "vis-network/standalone";
import "vis-network/styles/vis-network.css";
import {nodes, edges} from './data/data'
export default {
name: "Index",
data() {
return {
graph: undefined,
nodes: [],
edges: [],
container: undefined,
}
},
mounted() {
this.$nextTick(() => {
this.initGraph()
})
},
methods: {
// 初始化圖形配置
initGraph() {
edges.forEach((item) => {
item.from = item.source
item.to = item.target
})
this.nodes = new DataSet(nodes);
this.edges = new DataSet(edges);
const container = document.getElementById("graphContainer");
const data = {
nodes: this.nodes,
edges: this.edges
};
const options = {};
const network = new Network(container, data, options);
console.log(network)
}
}
}
</script>
<style scoped>
#graphContainer {
width: 100%;
height: 800px;
background-color: white;
}
</style>
vis.png
3.2. echarts
<template>
<div id="graphContainer"></div>
</template>
<script>
import * as echarts from 'echarts'
import {nodes, edges} from './data/data'
export default {
name: "Index",
data() {
return {
graph: undefined,
nodes: [],
edges: [],
option: {}
}
},
mounted() {
this.$nextTick(() => {
this.initGraph()
})
},
methods: {
initData() {
this.nodes = [...nodes]
this.edges = [...edges]
let iconList = []
this.nodes.forEach(item => {
item.name = item.label
item.symbolSize = 50
item.icon = item.icon || 'logo.png'
iconList.push(this.getImgData(item.icon))
})
this.edges.forEach(item => {
item.name = item.label
item.value = item.label
})
// Promise.all(iconList).then(imgUrls => {
// this.nodes.forEach((item, i) => {
// item.symbol = "image://" + imgUrls[i]
// })
// this.renderGraph()
// })
this.renderGraph()
},
// 初始化圖形配置
initGraph() {
this.graph = echarts.init(document.getElementById("graphContainer"))
this.initData()
this.renderGraph()
},
// 用數(shù)據(jù)渲染圖形
renderGraph() {
this.option = {
title: {
text: '狂飆人物關(guān)系圖',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {
show: false
},
series: [
{
name: '狂飆人物關(guān)系圖',
type: 'graph',
layout: 'force',
data: this.nodes,
links: this.edges,
roam: true,
itemStyle: {},
label: {
show: true,
position: 'bottom',
formatter: '酿秸'
},
edgeLabel: {
show: true,
formatter: '{c}'
},
force: {
edgeLength: [100, 200],
repulsion: 800
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
},
edgeLabel: {
color: 'red'
}
}
}
]
}
this.graph.setOption(this.option)
},
getImgData(imgSrc) {
let fun = function (resolve) {
const canvas = document.createElement('canvas');
const contex = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = '';
img.onload = function () {
// 設(shè)置圖形寬高比例
let center = {
x: img.width / 2,
y: img.height / 2
};
let diameter = img.width;
let radius = diameter / 2; // 半徑
canvas.width = diameter;
canvas.height = diameter;
contex.clearRect(0, 0, diameter, diameter);
contex.save();
contex.beginPath();
contex.arc(radius, radius, radius, 0, 2 * Math.PI); // 畫出圓
contex.clip();
contex.drawImage(
img,
center.x - radius,
center.y - radius,
diameter,
diameter,
0,
0,
diameter,
diameter
); // 在剛剛裁剪的園上畫圖
contex.restore(); // 還原狀態(tài)
resolve(canvas.toDataURL('image/png', 1));
};
img.src = imgSrc;
};
let promise = new Promise(fun);
return promise;
}
}
}
</script>
<style scoped>
#graphContainer {
width: 100%;
height: 800px;
background-color: white;
}
</style>
echarts.png
3.3. G6
<template>
<div id="graphContainer"></div>
</template>
<script>
import G6 from '@antv/g6'
import {nodes, edges} from './data/data'
export default {
name: "Index",
data() {
return {
graph: undefined,
nodes: [],
edges: [],
container: undefined,
}
},
mounted() {
this.$nextTick(() => {
this.initGraph()
})
},
methods: {
// 初始化圖形配置
initGraph() {
this.container = document.getElementById("graphContainer")
const width = this.container.scrollWidth
const height = this.container.scrollHeight
this.graph = new G6.Graph({
container: 'graphContainer',
width,
height,
layout: {
type: 'force',
preventOverlap: true,
linkDistance: 120, // 可選，邊長
nodeStrength: 30, // 可選
edgeStrength: 0.6, // 可選
collideStrength: 0.2, // 可選
nodeSize: 120
},
defaultNode: {
color: '#5B8FF9',
size: 40,
labelCfg: {
position: 'bottom'
}
},
modes: {
default: ['drag-canvas'],
},
});
this.graph.on('node:dragstart', e => {
this.graph.layout();
console.log(e)
this.refreshDragedNodePosition(e);
});
this.graph.on('node:drag', e => {
console.log(e)
this.refreshDragedNodePosition(e);
});
this.graph.on('node:dragend', e => {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
this.renderGraph()
},
// 用數(shù)據(jù)渲染圖形
renderGraph() {
this.nodes = nodes || []
this.edges = nodes || []
this.graph.data({
nodes: nodes,
edges: edges.map(function (edge, i) {
edge.id = 'edge' + i;
return Object.assign({}, edge);
}),
});
this.graph.render();
},
refreshDragedNodePosition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
}
}
}
</script>
<style scoped>
#graphContainer {
width: 100%;
height: 800px;
background-color: white;
}
</style>
G6.png
3. 加上人物頭像
三個組件其實展示效果都差不多魏烫，需要更好的效果還是需要后期再進(jìn)行一些配置與編碼辣苏，這里我用了echarts進(jìn)行了進(jìn)一步的配置，增加了頭像哄褒，這里獲取人物頭像這個參考了網(wǎng)絡(luò)上的稀蟋，具體的地址忘記了，如有需要聯(lián)系加上哈呐赡。
image.png
echarts中有個突出關(guān)聯(lián)節(jié)點的配置還比較實用退客，vis其實也有，g6的我是沒找到链嘀，可能是我還沒看到萌狂，看下echarts中的效果。
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
},
edgeLabel: {
color: 'red'
}
}
emphasis.png
