因为Antv G6涉及到组件挂载,其可视化实现需要基于Vue或React等前端框架,无法在纯html上使用。
而网上能够迅速实现Antv G6的代码参考太少,因此在这里留一个模板供大家快速实现可视化。
注:
需要本地存在@antv依赖包,vue可以用线上依赖链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Antv G6 模板html</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="container" style="height: 1000px;"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="G6依赖路径\@antv\g6\dist\g6.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Radial辐射图"
},
created(){
console.log("created完成");
},
mounted(){
console.log("mounted进行");
// 后续代码可直接从Antv G6样例中cv
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '2',
label: '2',
},
{
id: '3',
label: '3',
},
{
id: '4',
label: '4',
},
{
id: '5',
label: '5',
},
{
id: '6',
label: '6',
},
{
id: '9',
label: '9',
},
{
id: '10',
label: '10',
},
],
edges: [
{
source: '0',
target: '2',
},
{
source: '0',
target: '3',
},
{
source: '0',
target: '4',
},
{
source: '0',
target: '5',
},
{
source: '0',
target: '9',
},
{
source: '0',
target: '10',
},
{
source: '2',
target: '3',
},
{
source: '4',
target: '5',
},
{
source: '6',
target: '4',
},
{
source: '5',
target: '6',
},
{
source: '9',
target: '10',
},
],
};
const descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: false';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 20;
const graph = new G6.Graph({
container: 'container',
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
},
layout: {
type: 'radial',
unitRadius: 50,
},
animate: true,
defaultNode: {
size: 20,
},
defaultEdge: {
style: {
endArrow: {
path: 'M 0,0 L 8,4 L 8,-4 Z',
fill: '#e2e2e2',
},
},
},
});
graph.data(data);
graph.render();
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight - 20);
};
layoutConfigTranslation();
setInterval(function () {
layoutConfigTranslation();
}, 7000);
function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: true';
graph.updateLayout({
preventOverlap: true,
nodeSize: 20,
});
}, 1000);
setTimeout(function () {
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 0, unitRadius = 80, preventOverlap: true';
graph.updateLayout({
unitRadius: 80,
});
}, 2500);
setTimeout(function () {
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 10, unitRadius = 80, preventOverlap: true';
graph.updateLayout({
focusNode: '10',
});
}, 4000);
setTimeout(function () {
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 20, unitRadius = 80, preventOverlap: true';
graph.updateLayout({
focusNode: '20',
});
}, 5500);
setTimeout(function () {
descriptionDiv.innerHTML =
'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: false';
graph.updateLayout({
focusNode: '0',
preventOverlap: false,
unitRadius: 50,
});
}, 5500);
}
}
})
</script>
</body>
</html>