mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
194 lines
5.3 KiB
HTML
194 lines
5.3 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>
|
|
#mountNode {
|
|
background:#001528;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script>
|
|
/**
|
|
* 该案例演示如何自定义一个折线图节点
|
|
* by 镜曦
|
|
*
|
|
*/
|
|
|
|
// 自定义折线图节点
|
|
G6.registerNode('circleLine', {
|
|
draw(cfg, group) {
|
|
const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
|
|
const width = size[0];
|
|
const height = size[1];
|
|
|
|
const baseR = 30;
|
|
let nowAngle = 0;
|
|
|
|
// Ref line
|
|
let refR = baseR;
|
|
const refInc = 10;
|
|
for(let i = 0; i< 5; i++){
|
|
group.addShape('circle', {
|
|
// attrs: style
|
|
attrs: {
|
|
x: 0, // 居中
|
|
y: 0,
|
|
r: refR += refInc,
|
|
stroke:'rgba(255,255,255,0.4)',
|
|
lineDash:[4, 4],
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
const everyIncAngle = 2 * Math.PI * (360 / 5 / 5) / 360;
|
|
cfg.details.forEach(cat =>{
|
|
// 计算一系列点的位置
|
|
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 === 4){
|
|
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]));
|
|
// 添加连线
|
|
const shape = group.addShape('path', {
|
|
attrs: {
|
|
path: [
|
|
['M', 0, 0 ], // 上部顶点
|
|
...pathArrayL,
|
|
['Z'] // 封闭
|
|
],
|
|
stroke: cat.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
|
|
}
|
|
});
|
|
// 添加标注点
|
|
postions.forEach(( pos, index )=>{
|
|
if(index !== 5){
|
|
const littleCircle = group.addShape('circle', {
|
|
// attrs: style
|
|
attrs: {
|
|
x: pos[0], // 居中
|
|
y: pos[1],
|
|
r: 2,
|
|
fill: 'black',
|
|
stroke:cat.color,
|
|
cursor: "pointer",
|
|
}
|
|
});
|
|
// 加上交互动画
|
|
littleCircle.on('mouseenter', function(evt) {
|
|
littleCircle.animate({
|
|
r: 5,
|
|
repeat: false
|
|
}, 200);
|
|
});
|
|
littleCircle.on('mouseleave', function(evt) {
|
|
littleCircle.animate({
|
|
r: 2,
|
|
repeat: false
|
|
}, 200);
|
|
});
|
|
// 设置class
|
|
littleCircle.set("className", 'littleCircle');
|
|
}
|
|
|
|
})
|
|
|
|
/*
|
|
const shape = group.addShape('path', {
|
|
attrs: {
|
|
path: [
|
|
['M', 0, 0 ], // 上部顶点
|
|
['L', width / 2, 0], // 右侧点
|
|
['L', 0, height / 2], // 下部
|
|
['L', - width / 2, 0], // 左侧
|
|
['Z'] // 封闭
|
|
],
|
|
stroke: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
|
|
}
|
|
});
|
|
|
|
*/
|
|
|
|
});
|
|
|
|
// 添加一个和背景色相同的圆形
|
|
group.addShape('circle', {
|
|
// attrs: style
|
|
attrs: {
|
|
x: 0, // 居中
|
|
y: 0,
|
|
r: baseR,
|
|
fill: cfg.centerColor,
|
|
stroke:'darkgray',
|
|
}
|
|
});
|
|
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;
|
|
}
|
|
});
|
|
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 500,
|
|
height: 500
|
|
})
|
|
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: 'nodeB',
|
|
x: 400,
|
|
y: 150,
|
|
label: 'Line',
|
|
shape:'circleLine',
|
|
anchorPoints: [
|
|
[0, 0.5], [1, 0.5]
|
|
],
|
|
details:[
|
|
{cat:'pv', values:[20,30,40,30,30], color:"#25cbfd"},
|
|
{cat:'dal', values:[40,30,20,30,50], color:"#feff7b"},
|
|
{cat:'uv', values:[40,30,30,40,40], color:"#feab3a"},
|
|
{cat:'sal', values:[20,30,50,20,20], color:"#fe5766"},
|
|
{cat:'cal', values:[10,10,20,20,20], color:"#16c176"},
|
|
],
|
|
centerColor:'#0066FF',
|
|
|
|
}
|
|
]
|
|
}
|
|
|
|
graph.data(data)
|
|
graph.render()
|
|
</script>
|
|
</body>
|
|
</html> |