mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
132 lines
2.9 KiB
HTML
132 lines
2.9 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>画廊-指标卡</title>
|
||
<style>
|
||
.card-container {
|
||
width: 170px;
|
||
height: 74px;
|
||
border: 1px solid #DBDBDB;
|
||
border-radius: 4px;
|
||
}
|
||
.card-container .main-text{
|
||
text-align: center;
|
||
margin: 12px 14px;
|
||
padding-bottom: 8px;
|
||
margin-bottom: 0px;
|
||
font-size: 16px;
|
||
border-bottom: 1px solid #DBDBDB;
|
||
}
|
||
.card-container p{
|
||
font-size: 12px;
|
||
margin: 8px;
|
||
}
|
||
.card-container .value-text{
|
||
margin-left: 12px;
|
||
text-align: left;
|
||
}
|
||
.card-container .percent-text{
|
||
margin-right: 12px;
|
||
float: right;
|
||
color: red
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script src="../build/plugins.js"></script>
|
||
<script>
|
||
G6.registerNode('card', {
|
||
draw(item) {
|
||
const group = item.getGraphicGroup();
|
||
const {main, value, percent, type} = item.getModel();
|
||
const width = 170;
|
||
const height = 74;
|
||
const html = G6.Util.createDOM(`
|
||
<div class="card-container">
|
||
<h1 class="main-text">${main}</h1>
|
||
<p>
|
||
<span class="value-text">${value}</span>
|
||
<span class="percent-text">${percent}</span>
|
||
</p>
|
||
</div>
|
||
`);
|
||
return group.addShape('dom', {
|
||
attrs: {
|
||
x: 0,
|
||
y: 0,
|
||
width,
|
||
height,
|
||
html
|
||
}
|
||
});
|
||
},
|
||
anchor: [
|
||
[0.5, 0],
|
||
[0.5, 1]
|
||
]
|
||
});
|
||
G6.registerEdge('polyline', {
|
||
offset: 20
|
||
});
|
||
const data = {
|
||
roots: [{
|
||
main: '主指标一',
|
||
value: 123111,
|
||
percent: '100%',
|
||
type: 'a',
|
||
children: [{
|
||
main: '指标 1',
|
||
value: 12312,
|
||
percent: '39%',
|
||
type: 'b',
|
||
children: [
|
||
{
|
||
main: '指标 1.1',
|
||
value: 111,
|
||
percent: '90%',
|
||
type: 'a',
|
||
}
|
||
]
|
||
}, {
|
||
main: '指标 2',
|
||
value: 12312,
|
||
percent: '79%',
|
||
type: 'b',
|
||
}]
|
||
}]
|
||
};
|
||
const tree = new G6.Tree({
|
||
container: 'mountNode',
|
||
height: 500,
|
||
renderer: 'svg',
|
||
layout: new G6.Layouts.CompactBoxTree({
|
||
// direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
|
||
getHGap: function getHGap() /* d */ {
|
||
// 横向间距
|
||
return 100;
|
||
},
|
||
getVGap: function getVGap() /* d */ {
|
||
// 竖向间距
|
||
return 24;
|
||
},
|
||
direction: 'TB'
|
||
}),
|
||
fitView: 'tc'
|
||
});
|
||
tree.node({
|
||
shape: 'card'
|
||
});
|
||
tree.edge({
|
||
shape: 'polyline'
|
||
});
|
||
tree.read(data);
|
||
</script>
|
||
</body>
|
||
</html> |