perf: overview饼图优化、配色优化

nezha-fronted/src/assets/stylus/main.scss

@@ -723,13 +723,13 @@ li{
   background-color: $content-right-background-color;
 }
 .nz-table td.danger .cell>span {
-  background-color: #ff6666;
+  background-color: #d64f40;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
 }
 .nz-table td.success .cell>span {
-  background-color: #1bd383;
+  background-color: #50d050;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
@@ -1510,10 +1510,10 @@ li{
   margin-right: 5px;
 }
 .red {
-  background-color: #ff6666 !important;
+  background-color: #d64f40 !important;
 }
 .green {
-  background-color:#1bd383 !important;
+  background-color:#50d050 !important;
 }
 .grey {
   background-color:lightGrey;

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -8,7 +8,11 @@
       '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
       '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
       '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-    ]
+    ];
+    let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
+      '#ac958f', '', '', '', '', '', '', '', '', '', '', ];
+    let pieColor = ['#d64f40', '#e65f50', '#f66f60', '#f69f90',
+      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
     const commonOption={
       title:{
         show:false,
@@ -138,7 +142,7 @@
       title: {
         show: false,
       },
-      color: bgColorList,
+      color: pieColor,
       legend: {
         show: false,
       },
@@ -150,7 +154,7 @@
       title: {
         show: false,
       },
-      color: bgColorList,
+      color: overviewBgColor,
       legend: {
         show: false,
       },
@@ -196,11 +200,11 @@
         triggerEvent: true
       },
     };
-    const overViewLine = {
+    const overviewLine = {
       title:{
         show: false,
       },
-      color: bgColorList,
+      color: overviewBgColor,
       legend:{
         show:false,
       },
@@ -227,9 +231,9 @@
       },
       grid: {
         left: 6,
-        right: 30,
+        right: 20,
         containLabel: true,
-        bottom:8,
+        bottom: 0,
       },
       xAxis: {
         type: 'time',
@@ -285,7 +289,7 @@
     };
     const chartTypes={
       line:{name:'line',option:commonOption},
-      overviewLine: {name: 'line', option: overViewLine},
+      overviewLine: {name: 'line', option: overviewLine},
       map:{name:'map',option:mapOptions},
       pie: {name: 'assetType', option: assetTypePie},
       bar: {name: 'alertMessage', option: alertMessageBar}

nezha-fronted/src/components/page/dashboard/overview/overview2.scss

@@ -124,11 +124,12 @@
   align-items: center;
   height: calc(100% - 1.6rem);
   justify-content: center;
-  padding: 0 8px;
+  padding: 0 0.5rem;
   border-radius: 0 0 6px 6px;
 }
-.content-row-box:nth-of-type(2) .content-col-box:last-of-type .content-col-content {
-  padding: 0;
+.content-row-box:nth-of-type(2) .content-col-box .content-col-content {
+  padding: 0.7rem;
+  height: calc(100% - 3rem);
 }
 .content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
   position: relative;

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -115,6 +115,9 @@
       </div>
     </left-menu>
     <div class="axis-tooltip el-popover"></div>
+    <!--用于assetType饼图label-->
+    <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
+    <img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
   </div>
 </template>
 
@@ -207,34 +210,96 @@
             this.$refs.assetTypePie.startLoading();
             let legendData = [];
             let typeSeriesData = [];
-            let modelSeriesData = [];
+            //let modelSeriesData = [];
             this.assetData.typeStat.forEach(item => {
               legendData.push(item.name);
-              typeSeriesData.push({name: item.name, value: item.total});
+              typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
             });
-            this.assetData.modelStat.forEach(item => {
+            /*this.assetData.modelStat.forEach(item => {
               legendData.push(item.name);
               modelSeriesData.push({name: item.name, value: item.total});
-            });
+            });*/
             let series = [{
               name: 'Type',
-              data: typeSeriesData,
+              data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
               type: 'pie',
-              radius: [0, '50%'],
+              minAngle: 15,
+              itemStyle: {
+                borderColor: "#fff",
+                borderWidth: 1,
+              },
               label: {
-                position: 'inner',
-                formatter: function(params) {
-                  if (params.name.length > 12) {
-                    return params.name.substring(0, 9) + "...";
+                borderWidth: 1,
+                borderColor: "#cfcfcf",
+                borderRadius: 4,
+                formatter: function(param) {
+                  return ['{title|' + param.name + ' (' + param.percent + '%)}',
+                          '{hr|}',
+                          '{block5|}{upPic|}{block3|}{upNum|' + param.data.up + '}{block15|}{downPic|}{block3|}{downNum|' + param.data.down + '}{block15|}']
+                    .join("\n");
+                },
+                rich: {
+                  title: {
+                    align: 'center',
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    padding: [0, 8, 0, 8]
+                  },
+                  hr: {
+                    width: '100%',
+                    borderWidth: 0.5,
+                    height: 0,
+                    borderColor: "#cfcfcf"
+                  },
+                  block3: {
+                    width: 3*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  block5: {
+                    width: 5*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  block15: {
+                    width: 15*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  upPic: {
+                    backgroundColor: {
+                      image: document.getElementById("upPic")
+                    },
+                    height: 15*window.devicePixelRatio,
+                    align: 'left',
+                    width: 15*window.devicePixelRatio,
+                  },
+                  upNum: {
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    align: 'left',
+                    //width: 35*window.devicePixelRatio,
+                    lineHeight: 18*window.devicePixelRatio,
+                  },
+                  downPic: {
+                    backgroundColor: {
+                      image: document.getElementById("downPic")
+                    },
+                    height: 15*window.devicePixelRatio,
+                    align: 'left',
+                    width: 15*window.devicePixelRatio
+                  },
+                  downNum: {
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    align: 'left',
+                    //width: 43*window.devicePixelRatio,
+                    lineHeight: 18*window.devicePixelRatio,
                   }
-                  return params.name;
                 }
               },
               labelLine: {
-                show: false
+                show: true
               },
-              left: '25%'
-            }, {
+              //left: '25%'
+            }, /*{
               name: 'Model',
               radius: ['65%', '80%'],
               data: modelSeriesData,
@@ -248,18 +313,18 @@
                   return params.name;
                 }
               }
-            }];
-            this.$refs.assetTypePie.modifyOption('legend','show', true);
+            }*/];
+            /*this.$refs.assetTypePie.modifyOption('legend','show', true);
             this.$refs.assetTypePie.modifyOption('legend','orient', "vertical");
             this.$refs.assetTypePie.modifyOption('legend','data', legendData);
-            this.$refs.assetTypePie.modifyOption('legend','left', 0);
-            this.$refs.assetTypePie.modifyOption('legend','top', 5);
+            this.$refs.assetTypePie.modifyOption('legend','left', 40);
+            this.$refs.assetTypePie.modifyOption('legend','top', 40);
             this.$refs.assetTypePie.modifyOption('legend','formatter', function(name) {
               if (name.length > 12) {
                 return name.substring(0, 9) + "...";
               }
               return name;
-            });
+            });*/
             this.$refs.assetTypePie.setSeries(series);
             this.$refs.assetTypePie.endLoading();
           }
@@ -593,7 +658,7 @@
         return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
       },
       assetTypeFormatter(params) {
-        return `<div class="tooltip" style="min-width: unset;">${params.seriesName}<br/>${params.name}:&nbsp;${params.value}</div>`;
+        return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
       },
       switchFullScreen:function(){
         this.isFullScreen = this.judgeFullScreen();