mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 04:38:55 +08:00
253 lines
6.6 KiB
HTML
253 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
G6.registerNode('expandNode', {
|
||
draw(cfg, group) {
|
||
const mainGroup = group.addGroup({
|
||
id: 'main-group',
|
||
});
|
||
const keyShape = mainGroup.addShape('rect', {
|
||
attrs: {
|
||
x: 0,
|
||
y: 0,
|
||
width: 100 + 60 * cfg.values.length,
|
||
height: 50,
|
||
fill: '#f5f5f5',
|
||
},
|
||
});
|
||
|
||
// name text
|
||
mainGroup.addShape('text', {
|
||
attrs: {
|
||
text: cfg.name,
|
||
fill: '#000',
|
||
width: 130,
|
||
x: 10,
|
||
y: 32,
|
||
},
|
||
});
|
||
|
||
const subGroup = group.addGroup({
|
||
id: 'sub-group',
|
||
});
|
||
cfg.values.forEach((data, index) => {
|
||
subGroup.addShape('rect', {
|
||
attrs: {
|
||
x: 110 + index * 60,
|
||
y: 0,
|
||
width: 50,
|
||
height: 50,
|
||
},
|
||
});
|
||
|
||
subGroup.addShape('text', {
|
||
attrs: {
|
||
text: data.key,
|
||
fill: '#000',
|
||
x: 130 + index * 60,
|
||
y: 20,
|
||
fontSize: 10,
|
||
textBaseline: 'middle',
|
||
className: 'sub-group-text',
|
||
},
|
||
});
|
||
|
||
subGroup.addShape('text', {
|
||
attrs: {
|
||
text: data.value,
|
||
fill: '#000',
|
||
x: 130 + index * 60,
|
||
y: 30,
|
||
fontSize: 10,
|
||
textBaseline: 'middle',
|
||
textAlign: 'left',
|
||
className: 'sub-group-text',
|
||
},
|
||
});
|
||
});
|
||
|
||
const listGroup = group.addGroup({
|
||
id: 'detail-list-group',
|
||
});
|
||
|
||
listGroup.addShape('rect', {
|
||
attrs: {
|
||
width: 100 + 60 * cfg.values.length - 70,
|
||
height: 30 * cfg.properties.length + 20,
|
||
fill: '#fff',
|
||
x: 70,
|
||
y: 30,
|
||
},
|
||
});
|
||
|
||
const rectWidth = 100 + 60 * cfg.values.length - 80;
|
||
cfg.properties.forEach((property, index) => {
|
||
listGroup.addShape('rect', {
|
||
attrs: {
|
||
width: rectWidth,
|
||
height: 30,
|
||
fill: '#e8e8e8',
|
||
x: 80,
|
||
y: 40 * index + 40,
|
||
},
|
||
});
|
||
let count = 0;
|
||
for (let p in property) {
|
||
// 每个rect中添加5个文本
|
||
listGroup.addShape('text', {
|
||
attrs: {
|
||
text: property[p],
|
||
fill: '#000',
|
||
x: 85 + count * (rectWidth / cfg.values.length) - count * 10,
|
||
y: 40 * index + 40 + 15,
|
||
fontSize: 10,
|
||
textBaseline: 'middle',
|
||
textAlign: 'left',
|
||
},
|
||
});
|
||
count++;
|
||
}
|
||
});
|
||
listGroup.hide();
|
||
return keyShape;
|
||
},
|
||
});
|
||
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 500,
|
||
height: 500,
|
||
renderer: 'svg',
|
||
modes: {
|
||
default: ['drag-canvas'],
|
||
},
|
||
fitView: true,
|
||
});
|
||
|
||
const data = {
|
||
nodes: [
|
||
{
|
||
id: 'shape1',
|
||
shape: 'expandNode',
|
||
name: '主动进入',
|
||
values: [
|
||
{
|
||
key: '曝光率',
|
||
value: '19.09',
|
||
},
|
||
{
|
||
key: '流入UV',
|
||
value: '910',
|
||
},
|
||
{
|
||
key: '点击率',
|
||
value: '90',
|
||
},
|
||
{
|
||
key: '占比',
|
||
value: '90',
|
||
},
|
||
],
|
||
properties: [
|
||
{
|
||
name: '搜索',
|
||
value1: '102',
|
||
value2: '102',
|
||
value3: '102',
|
||
value4: '102',
|
||
},
|
||
{
|
||
name: '扫一扫',
|
||
value1: '102',
|
||
value2: '102',
|
||
value3: '102',
|
||
value4: '102',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 'shape1',
|
||
x: 0,
|
||
y: 150,
|
||
shape: 'expandNode',
|
||
name: '主动进入',
|
||
values: [
|
||
{
|
||
key: '曝光率',
|
||
value: '19.09',
|
||
},
|
||
{
|
||
key: '流入UV',
|
||
value: '910',
|
||
},
|
||
{
|
||
key: '点击率',
|
||
value: '90',
|
||
},
|
||
{
|
||
key: '占比',
|
||
value: '90',
|
||
},
|
||
],
|
||
properties: [
|
||
{
|
||
name: '搜索',
|
||
value1: '102',
|
||
value2: '102',
|
||
value3: '102',
|
||
value4: '102',
|
||
},
|
||
{
|
||
name: '扫一扫',
|
||
value1: '102',
|
||
value2: '102',
|
||
value3: '102',
|
||
value4: '102',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
// 点击node，展开详情
|
||
graph.on('node:click', evt => {
|
||
const { target } = evt;
|
||
const parentGroup = target.get('parent').get('parent');
|
||
const detailGroup = parentGroup.findById('detail-list-group');
|
||
// 将sub-group中的内容网上移动一段距离
|
||
const subGroup = parentGroup.findById('sub-group');
|
||
const keyTexts = subGroup.findAll(item => {
|
||
return item.attr('className') === 'sub-group-text';
|
||
});
|
||
const isVisible = detailGroup.get('visible');
|
||
if (isVisible) {
|
||
detailGroup.hide();
|
||
keyTexts.forEach(text => {
|
||
const top = text.attr('y');
|
||
text.attr('y', top + 10);
|
||
});
|
||
} else {
|
||
keyTexts.forEach(text => {
|
||
const top = text.attr('y');
|
||
text.attr('y', top - 10);
|
||
});
|
||
detailGroup.show();
|
||
}
|
||
console.log(keyTexts);
|
||
graph.paint();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|