【bug已修正】【更新最终美化版】应小伙伴们的需求，美化了哪吒探针三网延迟的极值Marker，减少横跳污染，加入Smoke效果

前言

众所周知，本人是个绝版鸡收集癖完美主义者，之前有小伙伴@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 老哥的建议，马上安排最终美化版！

1. 将Marker缩小降低曲线遮挡
2. 设置Marker透明度降低对画面的影响
3. 将延迟极小值的Marker倒置显示以快速区别极大值
4. 设置Marker颜色为曲线对应的颜色使其更加直观
5. 将超过MaxTCPPingValue的点删除
6. 显示丢包分布（细线），以及服务器断流区间（粗线）

效果对比
原效果：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  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  0 && avgDelay  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);
            },

如果喜欢，请一键三连点个免费的赞吧！