Merge branch 'xykt-master'

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

README.md

@@ -47,15 +47,16 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/lemoeo" title="Lemoe"><img src="https://avatars.githubusercontent.com/u/18618627?v=4" width="50;" alt="Lemoe"/></a>
 <a href="https://github.com/cantoblanco" title="Kris"><img src="https://avatars.githubusercontent.com/u/116849421?v=4" width="50;" alt="Kris"/></a>
 <a href="https://github.com/nap0o" title="nap0o"><img src="https://avatars.githubusercontent.com/u/144927971?v=4" width="50;" alt="nap0o"/></a>
-<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
-<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
 <a href="https://github.com/CosmosZ-code" title="CosmosZ-code"><img src="https://avatars.githubusercontent.com/u/81398224?v=4" width="50;" alt="CosmosZ-code"/></a>
-<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
+<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
-<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
+<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
-<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
 <a href="https://github.com/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></a>
+<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
+<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
+<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
 <a href="https://github.com/Mmx233" title="Mmx"><img src="https://avatars.githubusercontent.com/u/36563672?v=4" width="50;" alt="Mmx"/></a>
 <a href="https://github.com/rootmelo92118" title="rootmelo92118"><img src="https://avatars.githubusercontent.com/u/32770959?v=4" width="50;" alt="rootmelo92118"/></a>
+<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
 <a href="https://github.com/iilemon" title="Sean"><img src="https://avatars.githubusercontent.com/u/33201711?v=4" width="50;" alt="Sean"/></a>
 <a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
 <a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
@@ -66,7 +67,7 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/colour93" title="玖叁"><img src="https://avatars.githubusercontent.com/u/64313711?v=4" width="50;" alt="玖叁"/></a>
 <a href="https://github.com/arkylin" title="凌"><img src="https://avatars.githubusercontent.com/u/35104502?v=4" width="50;" alt="凌"/></a>
 <a href="https://github.com/ysicing" title="缘生"><img src="https://avatars.githubusercontent.com/u/8605565?v=4" width="50;" alt="缘生"/></a>
-<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
+<a href="https://github.com/sunnywangzi" title="wang"><img src="https://avatars.githubusercontent.com/u/88769439?v=4" width="50;" alt="wang"/></a>
 <a href="https://github.com/unclezs" title="unclezs"><img src="https://avatars.githubusercontent.com/u/42318775?v=4" width="50;" alt="unclezs"/></a>
 <a href="https://github.com/yuanweize" title="I"><img src="https://avatars.githubusercontent.com/u/30067203?v=4" width="50;" alt="I"/></a>
 <a href="https://github.com/guoyongchang" title="guoyongchang"><img src="https://avatars.githubusercontent.com/u/10484506?v=4" width="50;" alt="guoyongchang"/></a>

resource/static/theme-default/css/main.css

@@ -10,14 +10,6 @@
   .ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
     margin-top:0.4em !important;
   }
-  .ui.card>.content>.header,.ui.cards>.card>.content>.header {
-    padding-top: 0.5rem;
-    display: flex;
-    color: rgba(0, 0, 0, .85);
-    align-items: center;
-    padding-bottom: .2em;
-    border-bottom: 1px solid rgba(0, 0, 0, .2);
-  }
   .ui.menu .item>img:not(.ui){
     width: 2.2rem;
   }

resource/template/theme-daynight/network.html

@@ -53,7 +53,7 @@
 
     <main>
         <div id="network">
-        <div class="server-info-container" v-for='server in servers' :id="server.ID" style="font-size: .6em">
+            <div class="server-info-container" v-for='server in servers' :id="server.ID">
                 <div class="info-body" @click="redirectNetwork(server.ID)">
                     <ul class="server-info-body-container">
                         <li>
@@ -93,7 +93,8 @@
 
     <footer>
         <div class="footer-container">
-        <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a>
+            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} ·
+                    {{.Version}}</a>
                 <p>&copy; <span id="copyright-date">
                         <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
                     </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
@@ -104,23 +105,23 @@
 
     <script src="/static/theme-daynight/js/main.js?v202102012266"></script>
     <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
-<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
+    <script
+        src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 
     <script>
         const monitorInfo = JSON.parse('{{.MonitorInfos}}');
         const initData = JSON.parse('{{.Servers}}').servers;
         let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
+        // 基于准备好的dom，初始化echarts实例
-        MaxTCPPingValue = 1000;
+        const myChart = echarts.init(document.getElementById('monitor-info-container'));
-    }
+
-    new Vue({
+        // 使用刚指定的配置项和数据显示图表。
-        el: '#app',
+        var statusCards = new Vue({
+            el: '#network',
             delimiters: ['@#', '#@'],
             data: {
-            page: 'network',
-            defaultTemplate: {{.Conf.Site.Theme}},
-            templates: {{.Themes}},
                 servers: initData,
+                cache: [],
                 option: {
                     tooltip: {
                         trigger: 'axis',
@@ -149,11 +150,6 @@
                             fontSize: 14
                         }
                     },
-                grid: {
-                    left: '8%',
-                    right: '8%',
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     toolbox: {
                         feature: {
                             dataZoom: {
@@ -165,7 +161,7 @@
                     },
                     dataZoom: [
                         {
-                        start: 0,
+                            start: 94,
                             end: 100
                         }
                     ],
@@ -175,15 +171,13 @@
                     },
                     yAxis: {
                         type: 'value',
-                    boundaryGap: false
+                        boundaryGap: [0, '100%']
                     },
                     series: [],
+                }
             },
-            chartOnOff: true,
-        },
-        mixins: [mixinsVue],
             mounted() {
-            this.renderChart();
+                this.DarkMode();
                 this.parseMonitorInfo(monitorInfo);
                 window.addEventListener('resize', this.resizeHandle);
             },
@@ -191,67 +185,18 @@
                 window.removeEventListener('resize', this.resizeHandle)
             },
             methods: {
-            getFontLogoClass(str) {
+                DarkMode() {
-                if (["almalinux",
+                    const hour = new Date(Date.now()).getHours()
-                        "alpine",
+                    if (hour > 17 || hour < 4) {
-                        "aosc",
+                        document.querySelector("input[name=theme]").checked = true;
-                        "apple",
+                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
-                        "archlinux",
+                        document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
-                        "archlabs",
-                        "artix",
-                        "budgie",
-                        "centos",
-                        "coreos",
-                        "debian",
-                        "deepin",
-                        "devuan",
-                        "docker",
-                        "elementary",
-                        "fedora",
-                        "ferris",
-                        "flathub",
-                        "freebsd",
-                        "gentoo",
-                        "gnu-guix",
-                        "illumos",
-                        "kali-linux",
-                        "linuxmint",
-                        "mageia",
-                        "mandriva",
-                        "manjaro",
-                        "nixos",
-                        "openbsd",
-                        "opensuse",
-                        "pop-os",
-                        "raspberry-pi",
-                        "redhat",
-                        "rocky-linux",
-                        "sabayon",
-                        "slackware",
-                        "snappy",
-                        "solus",
-                        "tux",
-                        "ubuntu",
-                        "void",
-                        "zorin"].indexOf(str)
-                    > -1) {
-                    return str;
                     }
-                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
-                    return 'tux';
-                }
-                if (str == 'amazon') {
-                    return 'redhat';
-                }
-                if (str == 'arch') {
-                    return 'archlinux';
-                }
-                return '';
                 },
                 redirectNetwork(id) {
                     this.getMonitorHistory(id)
                         .then(function (monitorInfo) {
-                          var vm = app.__vue__;
+                            var vm = network.__vue__;
                             vm.parseMonitorInfo(monitorInfo);
                         })
                         .catch(function (error) {
@@ -268,15 +213,6 @@
                     let tSeries = [];
                     let tLegendData = [];
                     var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                     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)';
@@ -291,7 +227,15 @@
                             }
                             else {
                                 loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                                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);
@@ -306,6 +250,11 @@
                             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 } },
@@ -313,64 +262,39 @@
                                 ]
                             }
                         });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                     }
                     this.option.title.text = monitorInfo.result[0].server_name;
                     this.option.series = tSeries;
                     this.option.legend.data = tLegendData;
-                this.myChart.clear();
+                    myChart.clear();
-                this.myChart.setOption(this.option);
+                    myChart.setOption(this.option);
-            },
-                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);
-            },
-            isWindowsPlatform(str) {
-                return str.includes('Windows')
-            },
-            renderChart() {
-              this.myChart = echarts.init(this.$refs.chartDom);
-              this.myChart.setOption(this.option);
                 },
                 resizeHandle() {
-              this.myChart.resize();
+                    myChart.resize();
-            },
-        },
-        beforeDestroy() {
-            this.myChart.dispose();
-            this.myChart = null;
                 },
+            }
         });
     </script>
 </body>
 <style>
     #network {
-    display: grid;
-    /*grid-template-columns: repeat(5, 1fr);*/
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    grid-gap: 1em;
-    width: 100%;
         width: calc(100vw - 6em);
         max-width: 1400px;
         margin: 1em auto;
-    align-content: start;
     }
+
     #monitor-info-container {
         margin: 0em auto;
         align-content: start;
         background-color: #F1F1F2;
     }
+
+    .server-info-container {
+        font-size: .6em;
+        width: fit-content;
+        display: inline-block;
+    }
 </style>
 
 </html>
 {{end}}
-

resource/template/theme-default/home.html

@@ -15,7 +15,7 @@
             <div v-for="server in group.data" :id="server.ID" class="ui card">
               <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
                 <div class="header">
-                <img v-if="server.Host.CountryCode" style="border-radius: 5px;width:45px;" :src="'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.5/flags/4x3/'+server.Host.CountryCode + '.svg'" alt="国家"/>&nbsp;<i v-if='server.Host.Platform == "darwin"'
+                <i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>&nbsp;<i v-if='server.Host.Platform == "darwin"'
                     class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
                     class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
                   @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@

resource/template/theme-default/network.html

@@ -28,9 +28,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
@@ -186,15 +183,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 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)';
@@ -209,7 +197,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            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);
@@ -224,6 +220,11 @@
                             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 } },
@@ -231,26 +232,12 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 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);
-            },
-                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);
             },
             isWindowsPlatform(str) {
                 return str.includes('Windows')

resource/template/theme-mdui/network.html

@@ -55,9 +55,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
@@ -209,15 +206,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 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)';
@@ -232,7 +220,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            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);
@@ -247,6 +243,11 @@
                             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 } },
@@ -254,14 +255,6 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;

resource/template/theme-server-status/network.html

@@ -22,9 +22,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
@@ -172,15 +169,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 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)';
@@ -195,7 +183,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            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);
@@ -210,6 +206,11 @@
                             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 } },
@@ -217,14 +218,6 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;