修改default主题 (#334)

* 修改国旗图标为4*3的大国旗

* Update main.css

README.md

@@ -47,16 +47,15 @@ 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/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/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></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/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></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/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></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/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/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/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/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>
@@ -67,7 +66,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/sunnywangzi" title="wang"><img src="https://avatars.githubusercontent.com/u/88769439?v=4" width="50;" alt="wang"/></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/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,6 +10,14 @@
   .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">
+        <div class="server-info-container" v-for='server in servers' :id="server.ID" style="font-size: .6em">
             <div class="info-body" @click="redirectNetwork(server.ID)">
                 <ul class="server-info-body-container">
                     <li>
@@ -93,8 +93,7 @@
 
 <footer>
     <div class="footer-container">
-            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} ·
+        <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a>
-                    {{.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>
@@ -105,23 +104,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
+<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></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}};
-        // 基于准备好的dom，初始化echarts实例
+    if (MaxTCPPingValue == null) {
-        const myChart = echarts.init(document.getElementById('monitor-info-container'));
+        MaxTCPPingValue = 1000;
-
+    }
-        // 使用刚指定的配置项和数据显示图表。
+    new Vue({
-        var statusCards = new Vue({
+        el: '#app',
-            el: '#network',
         delimiters: ['@#', '#@'],
         data: {
+            page: 'network',
+            defaultTemplate: {{.Conf.Site.Theme}},
+            templates: {{.Themes}},
             servers: initData,
-                cache: [],
             option: {
                 tooltip: {
                     trigger: 'axis',
@@ -150,6 +149,11 @@
                         fontSize: 14
                     }
                 },
+                grid: {
+                    left: '8%',
+                    right: '8%',
+                },
+                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                 toolbox: {
                     feature: {
                         dataZoom: {
@@ -161,7 +165,7 @@
                 },
                 dataZoom: [
                     {
-                            start: 94,
+                        start: 0,
                         end: 100
                     }
                 ],
@@ -171,13 +175,15 @@
                 },
                 yAxis: {
                     type: 'value',
-                        boundaryGap: [0, '100%']
+                    boundaryGap: false
                 },
                 series: [],
-                }
             },
+            chartOnOff: true,
+        },
+        mixins: [mixinsVue],
         mounted() {
-                this.DarkMode();
+            this.renderChart();
             this.parseMonitorInfo(monitorInfo);
             window.addEventListener('resize', this.resizeHandle);
         },
@@ -185,18 +191,67 @@
             window.removeEventListener('resize', this.resizeHandle)
         },
         methods: {
-                DarkMode() {
+            getFontLogoClass(str) {
-                    const hour = new Date(Date.now()).getHours()
+                if (["almalinux",
-                    if (hour > 17 || hour < 4) {
+                        "alpine",
-                        document.querySelector("input[name=theme]").checked = true;
+                        "aosc",
-                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
+                        "apple",
-                        document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
+                        "archlinux",
+                        "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 = network.__vue__;
+                          var vm = app.__vue__;
                           vm.parseMonitorInfo(monitorInfo);
                     })
                     .catch(function(error){
@@ -213,6 +268,15 @@
                 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)';
@@ -227,15 +291,7 @@
                         }
                         else {
                             loss += 1;
-                                datal.push({
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                                    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);
@@ -250,11 +306,6 @@
                             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 } },
@@ -262,39 +313,64 @@
                                 ]
                             }
                     });
+                    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;
-                    myChart.clear();
+                this.myChart.clear();
-                    myChart.setOption(this.option);
+                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')
+            },
+            renderChart() {
+              this.myChart = echarts.init(this.$refs.chartDom);
+              this.myChart.setOption(this.option);
             },
             resizeHandle () {
-                    myChart.resize();
+              this.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">
-                <i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>&nbsp;<i v-if='server.Host.Platform == "darwin"'
+                <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"'
                     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,6 +28,9 @@
     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: ['@#', '#@'],
@@ -183,6 +186,15 @@
                 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)';
@@ -197,15 +209,7 @@
                         }
                         else {
                             loss += 1;
-                            datal.push({
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                                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);
@@ -220,11 +224,6 @@
                             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 } },
@@ -232,12 +231,26 @@
                                 ]
                             }
                     });
+                    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,6 +55,9 @@
     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: ['@#', '#@'],
@@ -206,6 +209,15 @@
                 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)';
@@ -220,15 +232,7 @@
                         }
                         else {
                             loss += 1;
-                            datal.push({
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                                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);
@@ -243,11 +247,6 @@
                             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 } },
@@ -255,6 +254,14 @@
                                 ]
                             }
                     });
+                    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,6 +22,9 @@
     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: ['@#', '#@'],
@@ -169,6 +172,15 @@
                 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)';
@@ -183,15 +195,7 @@
                         }
                         else {
                             loss += 1;
-                            datal.push({
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                                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);
@@ -206,11 +210,6 @@
                             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 } },
@@ -218,6 +217,14 @@
                                 ]
                             }
                     });
+                    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;