2019-09-03 14:51:52 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
2020-02-14 10:10:54 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
#mountNode {
|
|
|
|
|
|
background: #001528;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="mountNode"></div>
|
|
|
|
|
|
<script src="../build/g6.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 该案例演示如何自定义一个堆叠柱状图节点
|
|
|
|
|
|
* by 镜曦
|
|
|
|
|
|
*
|
|
|
|
|
|
*/
|
2019-09-03 14:51:52 +08:00
|
|
|
|
|
2020-02-14 10:10:54 +08:00
|
|
|
|
// 自定义标注点节点
|
|
|
|
|
|
G6.registerNode('stacked-bar-node', {
|
|
|
|
|
|
draw(cfg, group) {
|
|
|
|
|
|
const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
|
|
|
|
|
|
const width = size[0];
|
|
|
|
|
|
const height = size[1];
|
|
|
|
|
|
/*
|
2019-09-03 14:51:52 +08:00
|
|
|
|
G：
|
|
|
|
|
|
Fan
|
|
|
|
|
|
x: 扇形圆心的 x 坐标
|
|
|
|
|
|
y: 扇形圆心的 y 坐标
|
|
|
|
|
|
rs: 内圈半径
|
|
|
|
|
|
re: 外圈半径
|
|
|
|
|
|
startAngle: 起点弧度
|
|
|
|
|
|
endAngle: 终点弧度
|
|
|
|
|
|
clockwise: 为true时顺时针渲染，为false时逆时针渲染
|
|
|
|
|
|
*/
|
2020-02-14 10:10:54 +08:00
|
|
|
|
const baseR = 30;
|
|
|
|
|
|
let nowAngle = 0;
|
|
|
|
|
|
const everyIncAngle = (2 * Math.PI * (360 / 5 / 5)) / 360;
|
|
|
|
|
|
cfg.details.forEach(cat => {
|
|
|
|
|
|
cat.values.forEach(item => {
|
|
|
|
|
|
const baseNbr = Math.ceil(item / 10);
|
|
|
|
|
|
const baseIncR = 7;
|
|
|
|
|
|
let nowStartR = baseR;
|
|
|
|
|
|
const last = item % 10;
|
|
|
|
|
|
const endAngle = nowAngle + everyIncAngle;
|
|
|
|
|
|
for (let i = 0; i < baseNbr; i++) {
|
2019-09-03 14:51:52 +08:00
|
|
|
|
const fan = group.addShape('fan', {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
rs: nowStartR,
|
|
|
|
|
|
re: nowStartR + baseIncR,
|
|
|
|
|
|
startAngle: nowAngle,
|
|
|
|
|
|
endAngle: endAngle,
|
|
|
|
|
|
clockwise: false,
|
2019-09-03 14:51:52 +08:00
|
|
|
|
stroke: 'darkgray',
|
2020-02-14 10:10:54 +08:00
|
|
|
|
fill: cat.color,
|
|
|
|
|
|
},
|
2019-09-03 14:51:52 +08:00
|
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
|
nowStartR = nowStartR + baseIncR + 2;
|
|
|
|
|
|
if (i === baseNbr - 1 && last !== 0) {
|
|
|
|
|
|
const fan = group.addShape('fan', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
rs: nowStartR,
|
|
|
|
|
|
re: nowStartR + (baseIncR * last) / 10,
|
|
|
|
|
|
startAngle: nowAngle,
|
|
|
|
|
|
endAngle: endAngle,
|
|
|
|
|
|
clockwise: false,
|
|
|
|
|
|
stroke: 'darkgray',
|
|
|
|
|
|
fill: cat.color,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2019-09-03 14:51:52 +08:00
|
|
|
|
}
|
2020-02-14 10:10:54 +08:00
|
|
|
|
nowAngle = endAngle;
|
|
|
|
|
|
});
|
2019-09-03 14:51:52 +08:00
|
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
|
|
|
|
|
|
|
group.addShape('circle', {
|
2019-09-03 14:51:52 +08:00
|
|
|
|
// attrs: style
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0, // 居中
|
|
|
|
|
|
y: 0,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
r: baseR,
|
|
|
|
|
|
fill: cfg.centerColor,
|
|
|
|
|
|
stroke: 'darkgray',
|
|
|
|
|
|
},
|
2019-09-03 14:51:52 +08:00
|
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
|
if (cfg.label) {
|
|
|
|
|
|
group.addShape('text', {
|
|
|
|
|
|
// attrs: style
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0, // 居中
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
textBaseline: 'middle',
|
|
|
|
|
|
text: cfg.label,
|
|
|
|
|
|
fill: 'white',
|
|
|
|
|
|
fontStyle: 'bold',
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
return group;
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
2019-09-03 14:51:52 +08:00
|
|
|
|
|
2020-02-14 10:10:54 +08:00
|
|
|
|
const graph = new G6.Graph({
|
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
|
width: 500,
|
|
|
|
|
|
height: 500,
|
|
|
|
|
|
});
|
2019-09-03 14:51:52 +08:00
|
|
|
|
|
2020-02-14 10:10:54 +08:00
|
|
|
|
const data = {
|
|
|
|
|
|
nodes: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'nodeF',
|
|
|
|
|
|
x: 100,
|
|
|
|
|
|
y: 100,
|
|
|
|
|
|
label: 'StackedBar',
|
|
|
|
|
|
shape: 'stacked-bar-node',
|
|
|
|
|
|
anchorPoints: [
|
|
|
|
|
|
[0, 0.5],
|
|
|
|
|
|
[1, 0.5],
|
|
|
|
|
|
],
|
|
|
|
|
|
details: [
|
|
|
|
|
|
{ cat: 'pv', values: [20, 30, 48, 30, 30], color: '#25cbfd' },
|
|
|
|
|
|
{ cat: 'dal', values: [40, 30, 20, 30, 50], color: '#feff7b' },
|
|
|
|
|
|
{ cat: 'uv', values: [40, 30, 30, 4, 40], color: '#feab3a' },
|
|
|
|
|
|
{ cat: 'sal', values: [20, 30, 50, 20, 20], color: '#fe5766' },
|
|
|
|
|
|
{ cat: 'cal', values: [10, 10, 25, 20, 20], color: '#16c176' },
|
|
|
|
|
|
],
|
|
|
|
|
|
centerColor: '#0066FF',
|
|
|
|
|
|
},
|
2019-09-03 14:51:52 +08:00
|
|
|
|
],
|
2020-02-14 10:10:54 +08:00
|
|
|
|
};
|
2019-09-03 14:51:52 +08:00
|
|
|
|
|
2020-02-14 10:10:54 +08:00
|
|
|
|
graph.data(data);
|
|
|
|
|
|
graph.render();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
