前言
众所周知，本人是个绝版鸡收集癖完美主义者，之前有小伙伴@leslieowo 反馈说哪吒探针三网延迟的Marker红红绿绿的太违和，这种不完美状态令人感到焦虑，因此本贴旨在进一步美化解决问题，并提出A/B两种方案，供小伙伴们自行选择已更新最终美化效果
原效果
原效果是实心大红大绿，Marker硕大，当监测曲线多的时候，画面会变得非常混乱
修改代码
修改network.html，一般在
vim /opt/nezha/dashboard/theme-custom/template/network.html
或者
vim /opt/nezha/dashboard/resource/template/theme-custom/network.html
定位到markPoint字段，并按照下述A/B方案进行修改找到文件后，请于此处直接跳到最终美化版
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
]
}
优化效果A 请直接跳到最终美化版
将Marker缩小降低对画面的影响，并设置为曲线对应的颜色使其更加直观，将延迟极小值的Marker倒置显示以快速区别极大值
代码：
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', symbolSize: 30, label: { fontSize: 8 } },
{ type: 'min', symbol: 'pin', name: 'Min', symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
]
}
优化效果B 请直接跳到最终美化版
保留方案A的Marker优点，仍选取红绿色以直观表示极大极小值，通过提升Marker的透明度以提升美感，同时大幅降低对画面的干扰
代码：
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: 'rgba(255,0,0,0.35)' }, symbolSize: 30, label: { fontSize: 8 } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: 'rgba(0,255,0,0.35)' }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
]
}
关于PR
那么问题来了，A/B两种效果你更喜欢哪种呢？如果要选取一种效果PR给官方，作为下一官方版本的标配，你会选哪种呢？
请把你的选择(打在弹幕上)留言回复并(一键三连) 点个免费的赞吧
最终美化版！！！！！！！
感谢@LALALAYES 老哥的建议，马上安排最终美化版！
- 将Marker缩小降低曲线遮挡
- 设置Marker透明度降低对画面的影响
- 将延迟极小值的Marker倒置显示以快速区别极大值
- 设置Marker颜色为曲线对应的颜色使其更加直观
- 将超过MaxTCPPingValue的点删除
- 显示丢包分布（细线），以及服务器断流区间（粗线）
| 效果对比 |
|---|
| 原效果：Marker大红大绿体积巨大，标识不清，体验较差 |
| 初步美化：减小了Marker尺寸，提升了透明度，极小值倒置，效果改善 |
| 最终效果：Marker还原为曲线色彩更加清晰直观，显示丢包分布（细条条），以及服务器断流区间（粗棒棒），消除延迟超时横跳造成的画面污染 |
找到下述代码：
parseMonitorInfo(monitorInfo) {
let tSeries = [];
let tLegendData = [];
for (let i = 0; i < monitorInfo.result.length; i++) {
let loss = 0;
let data = [];
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0.9 * MaxTCPPingValue) {
loss += 1
}
if (avgDelay > 0) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]);
}
}
lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
tLegendData.push(legendName);
tSeries.push({
name: legendName,
type: 'line',
smooth: true,
symbol: 'none',
data: data,
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
]
}
});
}
this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries;
this.option.legend.data = tLegendData;
this.myChart.clear();
this.myChart.setOption(this.option);
},
整体替换为：
parseMonitorInfo(monitorInfo) {
let tSeries = [];
let tLegendData = [];
var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
for (let i = 0; i < monitorInfo.result.length; i++) {
var lcolor = lcolors[i % lcolors.length];
var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
let loss = 0;
let data = [];
let datal = [];
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]);
}
else {
loss += 1;
datal.push({
xAxis: monitorInfo.result[i].created_at[j],
label: { show: false },
emphasis: { disabled: true },
lineStyle: {
type: "solid",
color: rgbaColorBar
}
});
}
}
lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
if (lossRate > 99) {
datal = [];
}
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
tLegendData.push(legendName);
tSeries.push({
name: legendName,
type: 'line',
smooth: true,
symbol: 'none',
data: data,
markLine: {
symbol: "none",
symbolSize :0,
data: datal
},
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
]
}
});
}
this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries;
this.option.legend.data = tLegendData;
this.myChart.clear();
this.myChart.setOption(this.option);
},
如果喜欢，请一键三连点个免费的赞吧！