G6 自定义节点
白智
// Custom a line chart node 双锥形
G6.registerNode('circleLine', {
afterDraw(cfg, group) {
const baseR = 15;//基础半径
let nowAngle = 2 * Math.PI / 20; //0;//旋转角度
const everyIncAngle = 2 * Math.PI / 10;//(2 * Math.PI * (360 / 5 / 5)) / 360;
cfg.details.forEach((cat,index) => {
if(index == 1){return ;}
// 计算一系列点的位置
const postions = [];
cat.values.forEach((item, index) => {
const r = baseR + item;
const xPos = r * Math.cos(nowAngle);
const yPos = r * Math.sin(nowAngle);
nowAngle += everyIncAngle;
postions.push([xPos, yPos]);
if (index === 9) {
const r = baseR + item;
const xPos = r * Math.cos(nowAngle);
const yPos = r * Math.sin(nowAngle);
postions.push([xPos, yPos]);
}
});
const pathArrayL = postions.map((item) => ['L', ...item]);
// add the connecting line
group.addShape('path', {
zIndex: -3,
attrs: {
path: [
['M', 0, 0], // the top vertex
...pathArrayL,
['Z'], // close the path
],
stroke: cfg.style.fill,
fill:cfg.centerColor,
},
name: 'path-shape',
});
});
if (cfg.label && cfg.labelCfg.position == 'center') {
group.addShape('text', {
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: 'black',
fontSize:14,
//fontStyle: 'bold',
},
name: 'text-shape',
});
}
return group;
},
},'rect');
// Custom a line chart node 正六边形
G6.registerNode('circleLine-hexagon', {
afterDraw(cfg, group) {
const baseR = 10;//基础半径
let nowAngle = 0;//旋转角度
const everyIncAngle = 2 * Math.PI / 6;//(2 * Math.PI * (360 / 5 / 5)) / 360;
cfg.details.forEach((cat,index) => {
if(index == 0){return ;}
// 计算一系列点的位置
const postions = [];
cat.values.forEach((item, index) => {
const r = baseR + item;
const xPos = r * Math.cos(nowAngle);
const yPos = r * Math.sin(nowAngle);
nowAngle += everyIncAngle;
postions.push([xPos, yPos]);
if (index === 5) {
const r = baseR + item;
const xPos = r * Math.cos(nowAngle);
const yPos = r * Math.sin(nowAngle);
postions.push([xPos, yPos]);
}
});
const pathArrayL = postions.map((item) => ['L', ...item]);
// add the connecting line
group.addShape('path', {
zIndex: -3,
attrs: {
path: [
['M', 0, 0], // the top vertex
...pathArrayL,
['Z'], // close the path
],
stroke: cfg.style.fill,
fill:cfg.centerColor
},
name: 'path-shape',
});
});
if (cfg.label && cfg.labelCfg.position == 'center') {
group.addShape('text', {
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: 'black',
fontSize:14,
//fontStyle: 'bold',
},
name: 'text-shape',
});
}
return group;
},
},'circle');
// Background Animation 扩散报警的圆形
G6.registerNode(
'background-animate',
{
afterDraw(cfg, group) {
// console.log('afterDraw',cfg,cfg.label,group)
const r = cfg.size && cfg.size[0] ? cfg.size[0] : cfg.size / 2;
const back1 = group.addShape(cfg.label.indexOf('-') > -1 ? 'circle' : 'rect', {
zIndex: -3,
attrs: {
x: 0,
y: 0,
r,
fill: cfg.color,
opacity: 0.6,
},
name: 'back1-shape',
});
const back2 = group.addShape(cfg.label.indexOf('-') > -1 ? 'circle' : 'rect', {
zIndex: -2,
attrs: {
x: 0,
y: 0,
r,
fill: cfg.color,
opacity: 0.6,
},
name: 'back2-shape',
});
const back3 = group.addShape(cfg.label.indexOf('-') > -1 ? 'circle' : 'rect', {
zIndex: -1,
attrs: {
x: 0,
y: 0,
r,
fill: cfg.color,
opacity: 0.6,
},
name: 'back3-shape',
});
group.sort(); // Sort according to the zIndex
back1.animate(
{
// Magnifying and disappearing
r: r + 50,
opacity: 0.1,
},
{
duration: 3000,
easing: 'easeCubic',
delay: 0,
repeat: true, // repeat
},
); // no delay
back2.animate(
{
// Magnifying and disappearing
r: r + 50,
opacity: 0.1,
},
{
duration: 3000,//一次动画的时长 默认值 500
easing: 'easeCubic',//动画函数 函数是指动画的函数。例如线性插值、先快后慢等。 默认值 'linearEasing'
delay: 1000,//延迟一段时间后执行动画 默认值 0
repeat: true, // repeat 是否重复执行动画 默认值 false
},
); // 1s delay
back3.animate(
{
// Magnifying and disappearing
r: r + 50,
opacity: 0.1,//透明度
},
{
duration: 3000,
easing: 'easeCubic',
delay: 2000,
repeat: true, // repeat
},
); // 3s delay
},
},
'circle',
);
// Background Animation 扩散报警的方形
G6.registerNode(
'background-animate-rect',
{
afterDraw(cfg, group) {
// console.log('afterDraw',cfg,cfg.label,group)
const size = cfg.size;
const width = size[0];
const height = size[1];
const back1 = group.addShape('rect', {
zIndex: -3,
attrs: {
x: -width / 2,
y: -height / 2,
height,
width,
fill: cfg.color,
opacity: 0.6,
},
name: 'back1-shape',
});
const back2 = group.addShape('rect', {
zIndex: -2,
attrs: {
x: -width / 2,
y: -height / 2,
height,
width,
fill: cfg.color,
opacity: 0.6,
},
name: 'back2-shape',
});
const back3 = group.addShape('rect', {
zIndex: -1,
attrs: {
x: -width / 2,
y: -height / 2,
height,
width,
fill: cfg.color,
opacity: 0.6,
},
name: 'back3-shape',
});
group.sort(); // Sort according to the zIndex
back1.animate(
{
// Magnifying and disappearing
x: -(width+100) / 2,
y: -(height+100) / 2,
height: height + 100,
width: width + 100,
opacity: 0.1,//透明度
},
{
duration: 3000,
easing: 'easeCubic',
delay: 0,
repeat: true, // repeat
},
); // no delay
back2.animate(
{
// Magnifying and disappearing
x: -(width+100) / 2,
y: -(height+100) / 2,
height: height + 100,
width: width + 100,
opacity: 0.1,//透明度
},
{
duration: 3000,
easing: 'easeCubic',
delay: 1000,
repeat: true, // repeat
},
); // 1s delay
back3.animate(
{
// Magnifying and disappearing
x: -(width+100) / 2,
y: -(height+100) / 2,
height: height + 100,
width: width + 100,
opacity: 0.1,//透明度
},
{
duration: 3000,
easing: 'easeCubic',
delay: 2000,
repeat: true, // repeat
},
); // 3s delay
// console.log(back1,back2,back3)
},
},
'rect',
);
类似资料：