微服务场景下基于监控指标数据按照场景入口自动生成链路数据图实时展示-CSDN博客

本文链接：https://blog.csdn.net/2401_85195615/article/details/142033321

  const fittingString = (str, maxWidth, fontSize) => {
    let currentWidth = 0;
    let res = str;
    const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters

str.split(‘’).forEach((letter, i) => {
if (currentWidth > maxWidth) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth) {
res = ${str.substr(0, i)}\n${str.substr(i)};
}
});
return res;
};
const ICON_MAP = {
pod: ‘src/icons/pod.png’,
service: ‘src/icons/service.png’,
trans: ‘src/icons/trans.png’,
alarm: ‘src/icons/alarm.png’,
useTime: ‘src/icons/time.png’,
successRate: ‘src/icons/success.png’,
};


### 4.2 自定义节点样式

// 自定义节点
G6.registerNode(
“service”, //第一个参数自定义节点的名字
// 第二个参数是这个节点的图形分组
{
draw: function (cfg, group){
//根据数据动态改变颜色或者图片
let duration_avg = cfg.statistics.duration_avg>1 ?“#F3FAFF” :“#F3FAFF”;
// let img2=cfg.statistics.duration_avg>1 ?require(‘…/…/…/…/…/assets/shouye备份1.png’) :require(‘…/…/…/…/…/assets/shouye备份.png’);
let alert_num = cfg.statistics.alert_num>20 ?“#F3FAFF” :“#F3FAFF”;
// let img3=cfg.statistics.alert_num>20 ?require(‘…/…/…/…/…/assets/a-fuwuqilan2.png’) :require(‘…/…/…/…/…/assets/fuwuqilan.png’);
let svc_fontsize = 10
let metric_fontsize = 8
// 增加一个图像最外边的虚线框
let keyShape=group.addShape(‘rect’,{
// 代表矩形的一些属性
// 设置节点部署相对定位，整个节点布局
attrs:{
x: 0,
y: 0,
width: 130,
height: 80,
stroke: “#1a66b2”, //描边色
fill: “#d7dae0”, //填充颜色
radius: 3,
lineWidth: 2,
lineDash: [2,2] //设置虚线的样式
},
name:“card-node-keyShape” //起个唯一名字便于识别
});
// 设置节点上方服务名显示布局
group.addShape(“rect”,{
attrs:{
x:5,
y:1,
width: 120,
height:25,
// stroke:“pink”, //描边色
fill:“#3d8ad7”,
radius:3,
},
name:“card-node-titleShape”
});
// 左上布局
group.addShape(“rect”,{ // 指标部分展示
attrs:{
x: 5,
y: 29,
width: 59,
height: 24,
// stroke:“pink”, //描边色
fill: “#F3FAFF”,
radius: 3,
},
name:“card-node-countShape”
});
// 右上布局
group.addShape(“rect”,{ // 指标部分展示
attrs:{
x: 66,
y: 29,
width: 59,
height: 24,
fill: duration_avg,
radius: 3,
},
name:“card-node-timeShape”
});
// 左下布局
group.addShape(“rect”,{ // 指标部分展示
attrs:{
x: 5,
y: 55,
width: 59,
height: 24,
fill: alert_num,
radius: 3,
},
name:“card-node-alarmShape”
});
// 右下布局
group.addShape(“rect”,{ // 指标部分展示
attrs:{
x: 66,
y: 55,
width: 59,
height: 24,
fill: “#F3FAFF”,
radius: 3,
},
name:“card-node-successShape”
});
// 设置服务图标
group.addShape(‘image’, {
attrs: {
x: 4,
y: 2,
height: 16,
width: 16,
cursor: ‘pointer’,
img: ICON_MAP[cfg.nodeType],
},
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
name: ‘node-icon’,
});
// 设置服务名称位置
group.addShape(‘text’,{
attrs:{
text: fittingString(cfg.name,80, 8), //fittingString(‘Break the line if it is too long’, 80, globalFontSize),
x: 20,
y: 2,
fontSize: svc_fontsize,
fill: “block”,
textBaseline: “top”
},
name: “card-node-title”
});
// 交易量布局
group.addShape(“image”,{
attrs:{
x: 5,
y: 33,
width: 16,
height: 16,
img: ICON_MAP[‘trans’],
},
name:“card-node-countIco”
});
group.addShape(“text”,{
attrs:{
text:cfg.statistics.trace_num,
x: 22,
y: 46,
fill: “#226DFF”,
fontSize: metric_fontsize,
},
name:“card-node-count”,
});
// 平均响应时长布局
group.addShape(“image”,{
attrs:{
x: 65,
y: 33,
width: 16,
height: 16,
img: ICON_MAP[‘useTime’],
},
name:“card-node-timeIco”
});
group.addShape(“text”,{
attrs:{
text:cfg.statistics.duration_avg*1000+“ms”,
x: 82,
y: 46,
fill: “#226DFF”,
fontSize: metric_fontsize,
},
name:“card-node-time”,
});
// 告警数
group.addShape(“image”,{
attrs:{
x: 5,
y: 57,
width: 16,
height: 16,
img: ICON_MAP[‘alarm’],
},
name:“card-node-alarmIco”
});
group.addShape(“text”,{
attrs:{
text:cfg.statistics.alert_num,
x: 22,
y: 72,
fill: “#226DFF”,
fontSize: metric_fontsize,
},
name:“card-node-alarm”,
});
// 成功率模块
group.addShape(“image”,{
attrs:{
x: 65,
y: 57,
width: 16,
height: 16,
img: ICON_MAP[‘successRate’],
},
name:“card-node-successIco”
});
group.addShape(“text”,{
attrs:{
text: cfg.statistics.situation_num + “%”,
x: 82,
y: 72,
fill: “#226DFF”,
fontSize: metric_fontsize,
},
name:“card-node-success”,
});
return keyShape;
},
},‘rect’); //第三个参数，是如果没有设置样式，会默认继承rect的样式


### 4.3 对节点或画布双击、单击事件