From a52b3dab512fbfc35096b96796335d5b520466ba Mon Sep 17 00:00:00 2001
From: zCans <1224895921@qq.com>
Date: Sun, 19 Feb 2023 17:49:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/components/DailyTrafficChart.vue    | 58 +++++++++-------
 .../home/admin/components/LicenseChart.vue    | 67 +++++++++++++------
 .../admin/components/PortMappingChart.vue     | 54 ++++++++++-----
 .../home/admin/components/TrafficSumChart.vue |  4 +-
 .../src/views/home/admin/index.vue            |  3 +
 5 files changed, 123 insertions(+), 63 deletions(-)

diff --git a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
index 2f72d52e..74c7e7fc 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
@@ -22,7 +22,7 @@ export default {
     },
     height: {
       type: String,
-      default: '160px'
+      default: '250px'
     },
     data: {
       type: Object,
@@ -57,60 +57,70 @@ export default {
       const option = {
         title: {
           text: this.data.text,
-          left: 'center',
-          bottom: '0',
+          subtext: '上行：' + this.data.upload + '\n\n' + '下行：' + this.data.download,
           textStyle: {
-            fontSize: 12,
+            fontSize: 18,
             fontWeight: 800,
-            color: '#6c7a89'
+            align: 'center'
           }
         },
         tooltip: {
           trigger: 'item'
         },
         legend: {
+          data: ['上行', '下行'],
           orient: 'vertical',
-          left: 'left'
+          left: 'right'
         },
         series: [
           {
             name: this.data.text,
             type: 'pie',
-            radius: '68%',
+            radius: [45, 65],
+            center: ['50%', '58%'],
             // 隐藏指示线
             labelLine: {
               normal: {
                 show: false
               }
             },
+            // 隐藏圆环上文字
             label: {
               normal: {
-                show: true,
-                position: 'inner',
-                fontSize: 10,
-                color: '#fff',
-                formatter: (data) => {
-                  return `${data.name}${data.value > 1000 ? '：\n\n' : '：'}${data.value}`
-                }
+                show: false,
+                position: 'center'
               }
             },
             data: [
               {
                 value: this.data.upload,
-                name: '上行'
+                name: '上行',
+                lineStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                }
               },
               {
                 value: this.data.download,
-                name: '下行'
+                name: '下行',
+                lineStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                }
               }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+            ]
           }
         ]
       }
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
index 768576bf..d9882033 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
@@ -1,5 +1,7 @@
 <template>
-  <div :class="className" id="license-div" :style="{height:height,width:width}"></div>
+  <div>
+    <div :class="className" id="license-div" :style="{height:height,width:width}"></div>
+  </div>
 </template>
 
 <script>
@@ -18,7 +20,7 @@ export default {
     },
     height: {
       type: String,
-      default: '160px'
+      default: '250px'
     },
     data: {
       type: Object,
@@ -51,33 +53,30 @@ export default {
       this.myChart = echarts.init(this.chartDom)
       const option = {
         title: {
-          text: this.data.onLine,
-          subtext: 'License在线数',
-          left: 'center',
-          top: '32%',
+          text: 'License统计',
+          subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
           textStyle: {
-            fontSize: 22,
+            fontSize: 18,
             fontWeight: 800,
-            color: '#c23531',
             align: 'center'
-          },
-          subtextStyle: {
-            fontSize: 10,
-            fontWeight: 800,
-            color: '#6c7a89'
           }
-          // bottom:'0'
         },
         tooltip: {
           trigger: 'item'
         },
+        legend: {
+          data: ['在线数', '离线数'],
+          orient: 'vertical',
+          left: 'right'
+        },
         series: [
           {
             // 第一张圆环
             name: 'License',
             type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['50%', '50%'],
+            radius: [45, 65],
+            center: ['50%', '58%'],
+            avoidLabelOverlap: false,
             // 隐藏指示线
             labelLine: {
               normal: {
@@ -87,18 +86,48 @@ export default {
             // 隐藏圆环上文字
             label: {
               normal: {
-                show: false
+                show: false,
+                position: 'center'
+              }
+            },
+            emphasis: {
+              itemStyle: {
+                label: {
+                  show: true,
+                  fontSize: 40,
+                  fontWeight: 'bold'
+                }
               }
             },
             data: [
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.data.onLine
+                value: this.data.onLine,
+                lineStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                }
               },
               {
                 name: '离线数',
-                value: this.data.total - this.data.onLine
+                value: this.data.total - this.data.onLine,
+                lineStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                }
               }
             ]
           }
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
index 64ac7f68..3163960c 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
@@ -18,7 +18,7 @@ export default {
     },
     height: {
       type: String,
-      default: '160px'
+      default: '250px'
     },
     data: {
       type: Object,
@@ -51,33 +51,30 @@ export default {
       this.myChart = echarts.init(this.chartDom)
       const option = {
         title: {
-          text: this.data.onLine,
-          subtext: '端口映射在线数',
-          left: 'center',
-          top: '32%',
+          text: '端口映射统计',
+          subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
           textStyle: {
-            fontSize: 22,
+            fontSize: 18,
             fontWeight: 800,
-            color: '#c23531',
             align: 'center'
-          },
-          subtextStyle: {
-            fontSize: 10,
-            fontWeight: 800,
-            color: '#6c7a89'
           }
-          // bottom:'0'
         },
         tooltip: {
           trigger: 'item'
         },
+        legend: {
+          data: ['在线数', '离线数'],
+          orient: 'vertical',
+          left: 'right'
+        },
         series: [
           {
             // 第一张圆环
             name: '端口映射',
             type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['50%', '50%'],
+            radius: [45, 65],
+            center: ['50%', '58%'],
+            avoidLabelOverlap: false,
             // 隐藏指示线
             labelLine: {
               normal: {
@@ -87,18 +84,39 @@ export default {
             // 隐藏圆环上文字
             label: {
               normal: {
-                show: false
+                show: false,
+                position: 'center'
               }
             },
             data: [
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.data.onLine
+                value: this.data.onLine,
+                lineStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#2B81B1'
+                  }
+                }
               },
               {
                 name: '离线数',
-                value: this.data.total - this.data.onLine
+                value: this.data.total - this.data.onLine,
+                lineStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#dbebf7'
+                  }
+                }
               }
             ]
           }
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
index acb381a7..4b6f4555 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       chartDom: null,
-      colorList: ['#75ddfa', '#2B81B1', '#53a7e3', '#029fe8', '#015dae']
+      colorList: ['#2B81B1', '#75ddfa', '#53a7e3', '#029fe8', '#015dae']
     }
   },
   mounted() {
@@ -59,7 +59,7 @@ export default {
           data: item.value,
           areaStyle: {
             normal: {
-              color: this.colorList[index] + '7f'
+              color: this.colorList[index] + '1f'
             }
           },
           lineStyle: {
diff --git a/neutrino-proxy-admin/src/views/home/admin/index.vue b/neutrino-proxy-admin/src/views/home/admin/index.vue
index f48dbb5e..73c540d5 100644
--- a/neutrino-proxy-admin/src/views/home/admin/index.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/index.vue
@@ -128,6 +128,9 @@ export default {
     }
     .pie-chart{
       padding-top: 16px;
+      .el-card{
+        min-height: 300px;
+      }
     }
   }
 }