feat: overview（部分）

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,21 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="overview-project" unicode="&#58988;" d="M1023.06176 661.461333c0-33.066667-26.794667-59.861333-59.861333-59.861333H59.904427A59.861333 59.861333 0 0 0 0.000427 661.461333V836.096A59.861333 59.861333 0 0 0 59.904427 896h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634667zM850.13376 748.8a39.253333 39.253333 0 1 1 78.549333 0 39.253333 39.253333 0 0 1-78.549333 0zM1023.06176 297.81333299999994a59.904 59.904 0 0 0-59.861333-59.946666H59.904427A59.861333 59.861333 0 0 0 0.000427 297.81333299999994V472.533333a59.904 59.904 0 0 0 59.904 59.861334h903.253333a59.861333 59.861333 0 0 0 59.904-59.861334v-174.762666zM870.059093 385.152a39.253333 39.253333 0 1 1 78.549334 0 39.253333 39.253333 0 0 1-78.506667 0zM1023.06176-56.53333299999997a59.904 59.904 0 0 0-59.861333-59.904H59.904427A59.904 59.904 0 0 0 0.000427-56.53333299999997v174.634666a59.904 59.904 0 0 0 59.904 59.904h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634666zM878.80576 30.80533300000002a39.296 39.296 0 1 1 78.592 0 39.296 39.296 0 0 1-78.592 0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="overview-alert" unicode="&#58990;" d="M702.99205 82.26788699999997a307.133443 307.133443 0 1 1 34.507075 613.294135 307.133443 307.133443 0 0 1-34.507075-613.294135zM1226.895455 895.641618L1154.502275 823.248438a613.60132 613.60132 0 0 0 0-868.564572l72.39318-72.393181a716.559372 716.559372 0 0 1 0 1013.350933zM430.621669 678.462077L358.279686 750.8552569999999a511.820809 511.820809 0 0 1 0-723.829408l72.39318 72.444377a409.067547 409.067547 0 0 0 0 579.043048z m651.487426 72.39318L1009.664717 678.462077a409.067547 409.067547 0 0 0 0-579.043048l72.39318-72.341983a511.872006 511.872006 0 0 1 0 723.829409v-0.051198zM154.155492 149.89970500000004A613.60132 613.60132 0 0 0 285.886506 823.299635L213.544523 895.692815a716.610569 716.610569 0 0 1 0-1013.40213l72.39318 72.393181a612.167792 612.167792 0 0 0-131.679816 195.215839z"  horiz-adv-x="1484" />
+
+    
+    <glyph glyph-name="overview-asset" unicode="&#58992;" d="M512 896C229.266286 896 0 666.843429 0 384.109714c0-282.697143 229.266286-512 512-512 282.697143 0 512 229.302857 512 512C1024 666.843429 794.697143 896 512 896m230.4-544.914286l-197.485714-197.376a46.555429 46.555429 0 0 0-65.828572 0L281.6 351.08571400000005a46.555429 46.555429 0 0 0 0 65.828572l197.485714 197.485714a46.555429 46.555429 0 0 0 65.828572 0l197.485714-197.485714c18.176-18.176 18.176-47.542857 0-65.828572"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="overview-endpoint" unicode="&#58993;" d="M514.121143 896C231.606857 896 2.56 666.989714 2.56 384.512c0-282.514286 229.010286-511.524571 511.524571-511.524571 282.477714 0 511.488 229.010286 511.488 511.524571C1025.609143 666.989714 796.598857 896 514.121143 896z m287.707428-655.36a15.981714 15.981714 0 0 0-15.981714-15.981714H242.395429a15.981714 15.981714 0 0 0-16.018286 15.981714v287.707429c0 8.850286 7.168 15.981714 16.018286 15.981714h543.451428c8.813714 0 15.981714-7.131429 15.981714-15.981714v-287.707429zM290.340571 288.585143h447.561143v191.817143H290.340571zM514.121143 336.53028600000005h159.817143v95.926857h-159.817143zM354.267429 384.512a47.945143 47.945143 0 1 1 95.890285 0 47.945143 47.945143 0 0 1-95.890285 0zM514.121143 640.256a147.858286 147.858286 0 0 1-138.24-95.926857h276.48a147.858286 147.858286 0 0 1-138.24 95.926857z m0-87.917714a31.963429 31.963429 0 1 0 0 63.926857 31.963429 31.963429 0 0 0 0-63.926857z"  horiz-adv-x="1060" />
+
+    
+    <glyph glyph-name="overview-module" unicode="&#58995;" d="M1004.507429 152.90514299999995l-448.146286-268.909714a89.124571 89.124571 0 0 0-44.8-11.154286c-16.201143 0-32.438857 3.730286-44.836572 11.154286L18.541714 152.90514299999995c-24.722286 14.848-24.722286 38.948571 0 53.76l76.032 45.568 345.782857-207.506286c19.894857-11.812571 45.092571-18.358857 71.204572-18.358857 26.038857 0 51.236571 6.546286 71.131428 18.358857l345.819429 207.506286 75.995429-45.568c24.758857-14.848 24.758857-38.912 0-53.76zM1004.507429 357.59542899999997l-448.146286-268.982858a89.124571 89.124571 0 0 0-44.8-11.154285c-16.201143 0-32.438857 3.766857-44.836572 11.154285L18.541714 357.59542899999997c-24.722286 14.811429-24.722286 38.948571 0 53.76l76.032 45.604571 345.782857-207.506286c19.894857-11.922286 45.092571-18.432 71.204572-18.432 26.038857 0 51.236571 6.509714 71.131428 18.432l345.856 207.506286 75.995429-45.641143c24.722286-14.811429 24.722286-38.948571-0.036571-53.76zM1004.507429 562.212571l-448.146286-268.982857a89.124571 89.124571 0 0 0-44.8-11.154285c-16.201143 0-32.438857 3.766857-44.836572 11.154285L18.541714 562.212571c-24.722286 14.774857-24.722286 38.948571 0 53.76L466.724571 884.845714C479.085714 892.342857 495.36 896 511.561143 896c16.128 0 32.402286-3.657143 44.8-11.117714l448.146286-268.946286c24.758857-14.848 24.758857-38.948571 0-53.76z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="jiantou-down" unicode="&#60412;" d="M532.27749995 72.77658226999995L736.50089476 379.11167386c8.69035701 15.20812491 0 34.76142863-17.38071463 34.76142927l-95.5939295 0L623.52625063 674.58381937c0 13.03553581-8.69035701 21.72589282-21.7258928 21.7258928l-173.80714439 0c-13.03553581 0-21.72589282-8.69035701-21.72589281-21.72589281l-1e-8-260.71071625-95.59392949 0c-17.38071462 0-28.24366073-19.55330372-17.380714-34.76142925L497.51607132 70.60399316999997c6.5177679-10.86294671 26.07107163-10.86294671 34.76142863 2.1725891z"  horiz-adv-x="1024" />
 
     

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

@@ -1604,10 +1604,12 @@ li{
   margin-right: 5px;
 }
 .red {
-  background-color: #d64f40 !important;
+  //background-color: #d64f40 !important;
+  background-color: #ec7f66 !important;
 }
 .green {
-  background-color:#50d050 !important;
+  //background-color:#50d050 !important;
+  background-color:#23bf9a !important;
 }
 .grey {
   background-color:lightGrey;

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

@@ -71,7 +71,7 @@
         this.legend=legend.filter((item,index)=>index<this.dataSize);
         this.resize();
       },
-      setSeries:function(series){
+      setSeries:function(series, legend, legendData){
         if(!this.chart){
           this.chart = echarts.init(document.getElementById(this.chartId));
         }
@@ -88,6 +88,15 @@
         if(!this.option){
           this.option = chartConfig.getOption(this.chartType);
         }
+        if (legend && legendData) {
+          legend.formatter = function(name) {
+            let type = legendData.find(item => {
+              return item[0] == name;
+            });
+            return `${name} (${type[1]}%)`;
+          }
+          this.$set(this.option, "legend", legend);
+        }
 
         if(this.chartType == 'map'){
           let geoObj=JSON.parse(this.map.geoJson.geoJson)

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

@@ -15,15 +15,16 @@
       '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
       '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
     ];
-    let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
+    let overviewBgColor =
+      ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
       '#ac958f', '', '', '', '', '', '', '', '', '', '', ];
 /*    let pieColor = ["#0c69ff","#59f747","#2eeab8","#b5ed8e",
       "#205299","#ffd6c6","#a0ffdf","#9be524",
       "#8abafc","#d181e8","#d88d50","#cce8ff",
       "#161ef9"];*/
 
-    let pieColor = ['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
+    let pieColor = ["#ECCD82", "#99CEB9", "#EEA694", "#8EA8DF", "#92C9DF"];/*['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
-      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
+      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];*/
 
     const commonOption={
       title:{
@@ -185,10 +186,11 @@
         show: false,
       },
       color: pieColor,
-      legend: {
+      grid: {
-        show: false,
+        top: "top",
+        left: "left"
       },
-      grid: {},
+      legend: {},
       series: [],
       tooltip : {}
     };

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

@@ -3,7 +3,7 @@
 }
 .overview-content-header{
   display: flex;
-  padding-top: 6px;
+  padding: 8px 0 2px 0;
 }
 .overview-content-header .header-title{
   flex:13;
@@ -23,10 +23,11 @@
 }
 .tool-container .time{
   flex: 4;
-  font-size: 1.2rem !important;
+  font-size: 1rem !important;
   display: inline-block;
   height: 35px;
   line-height: 35px;
+  color: #333333;
   vertical-align: middle;
 }
 .tool-container .date{
@@ -35,9 +36,10 @@
 }
 .date .week{
   font-size: 0.7rem;
-  line-height: 1.1rem;
+  line-height: 1.3rem;
 }
 .date .sys-date{
+  color: #333333;
   font-size: 0.75rem;
   line-height: 0.75rem;
 }
@@ -47,8 +49,9 @@
   line-height: 35px;
 }
 .operation .screen-icon{
-  font-size: 1.875rem !important;
+  font-size: 1.35rem !important;
   cursor: pointer;
+  color: #666666;
 }
 .overview-content{
   height: calc(100% - 42px);
@@ -60,10 +63,10 @@
   align-content: flex-start;
 }
 .overview-content .content-row-box:first-of-type {
-  height: 16%;
+  height: 14%;
 }
 .overview-content .content-row-box:nth-of-type(2) {
-  height: 45%;
+  height: 46%;
 }
 .overview-content .content-row-box:nth-of-type(3) {
   height: 39%;
@@ -83,18 +86,23 @@
   border: 1px solid #edecec;
 }
 .content-col-title {
-  height: 1.6rem;
+  height: 2rem;
-  line-height: 1.6rem;
+  line-height: 2rem;
-  color: #777;
+  color: #333;
-  font-size: 1rem;
+  font-size: 0.875rem;
-  padding: 0 8px;
+  padding: 0 0.625rem;
   background-color: #efefef;
   border-radius: 5px 5px 0 0;
   display: flex;
   justify-content: space-between;
 }
 .content-col-title .el-dropdown {
-  font-size: 0.85rem;
+  font-size: 0.875rem;
+  color: #333;
+  .el-icon-arrow-down {
+    font-size: 0.75rem;
+    margin: 0 1.2rem 0 0.8rem;
+  }
 }
 
 .content-col-title-tools {
@@ -103,12 +111,17 @@
 }
 .content-col-title-tool {
   cursor: pointer;
-  padding-left: 7px;
+  padding-left: 1rem;
-  border-left: 1px solid #dadada;
+  padding-right: 0.8rem;
-  margin-left: 7px;
+  border-left: 1px solid #e7eaed;
+  position: relative;
   .el-cascader {
     height: 100%;
     line-height: 1.6rem;
+    position: absolute;
+    top: 0;
+    opacity: 0;
+    width: 0.8rem;
     .el-input__suffix i {
       color: #606266;
     }
@@ -118,27 +131,36 @@
     .el-input {
       height: 100%;
       line-height: 1.6rem;
+      padding-right: 0.2rem;
       i {
-        line-height: 1.6rem;
+        line-height: 2rem;
+        font-size: 0.75rem;
       }
       .el-input__inner {
         height: 100% !important;
         line-height: 1.6rem;
         background-color: #efefef;
-        width: 107px;
+        width: 6.688rem;
-        padding-left: 10px;
+        padding-left: 0.625rem;
+        padding-right: 0.8rem;
         border: none;
       }
     }
-    .el-input::after {
-      content: "Datacenter";
-      position: absolute;
-      left: 0;
-      top: 0;
-      color: #606266;
-      font-size: 0.88rem;
   }
 }
+.diy-content {
+  height: 2rem;
+  pointer-event: none;
+  color: #333;
+  span, i {
+    line-height: 2rem;
+  }
+  span {
+    margin-right: 0.3rem;
+  }
+  i {
+    font-size: 0.75rem;
+  }
 }
 .trend-cascader {
   .el-cascader-panel {
@@ -191,7 +213,7 @@
 .content-col-content {
   display: flex;
   align-items: center;
-  height: calc(100% - 1.6rem);
+  height: 100%;
   justify-content: center;
   padding: 0 0.5rem;
   border-radius: 0 0 6px 6px;
@@ -201,6 +223,9 @@
   padding: 0.7rem;
   height: calc(100% - 3rem);
 }
+.content-row-box:nth-of-type(3) .content-col-box .content-col-content {
+  height: calc(100% - 2rem);
+}
 .content-row-box:nth-of-type(2) .content-col-box:first-of-type .content-col-title {
   padding-right: 0;
 }
@@ -214,28 +239,95 @@
   font-size: 0.7rem;
   font-style: italic;
 }
+.content-col-content-icon {
+  height: 3.75rem;
+  width: 3.75rem;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 1px solid #e5eaef;
+  position: relative;
+  .nz-icon {
+    font-size: 1.75rem !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .nz-icon-overview-asset {
+    color: #F6B275;
+  }
+  .nz-icon-overview-project {
+    font-size: 1.5rem !important;
+    color: #80A7F4;
+  }
+  .nz-icon-overview-module {
+    color: #7AD0BC;
+  }
+  .nz-icon-overview-endpoint {
+    color: #969DEA;
+  }
+  .nz-icon-overview-alert {
+    font-size: 1.25rem !important;
+    color: #EE9A87;
+  }
+}
+.content-num-box {
+  padding-left: 1.25rem;
+}
+.content-alert-num {
+  position: absolute;
+  color: #666;
+  font-size: 0.7rem;
+  font-style: italic;
+  right: 0;
+  bottom: 0;
+  padding: 0 0.68rem 0.5rem 0;
+}
+.content-num-box .content-col-content-title {
+  font-size: 0.875rem;
+  color: #666;
+}
 .content-col-content-num {
   font-weight: bold;
   color: #333;
 }
+
+.overview-tooltip-box {
+  display: flex;
+  height: 1.8rem;
+}
+.tooltip-item {
+  min-width: 2.8rem;
+  padding: 0 0.2rem;
+  line-height: 1.8rem;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+}
+.item-status {
+  width: 0.625rem;
+  height: 0.19rem;
+  border-radius: 2px;
+  margin-right: 5px;
+}
 @media only screen and (min-width: 10px) and (min-height: 10px){
   .content-col-content-num {
-    font-size: 1.6rem;
+    font-size: 1.44rem;
   }
 }
 @media only screen and (min-width: 1020px) and (min-height: 560px){
   .content-col-content-num {
-    font-size: 1.6rem;
+    font-size: 1.44rem;
   }
 }
 @media only screen and (min-width: 1360px) and (min-height: 650px){
   .content-col-content-num {
-    font-size: 2.1rem;
+    font-size: 1.6rem;
   }
 }
 @media only screen and (min-width: 1700px) and (min-height: 800px){
   .content-col-content-num {
-    font-size: 2.8rem;
+    font-size: 1.8rem;
   }
 }
 .hide-div {

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

@@ -19,47 +19,64 @@
       <!--第一行-->
       <div class="content-row-box">
         <div class="content-col-box">
-          <div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
           <div class="content-col-content" v-loading="assetLoading">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-asset"></i></div>
+            <div class="content-num-box">
               <div class="content-col-content-num">
                 <vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(assetData ? assetData.totalStat.total  : '') | unitFormat}}</span>
               </div>
+              <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
+            </div>
           </div>
         </div>
         <div class="content-col-box">
-          <div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
           <div class="content-col-content" v-loading="projectLoading">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
+            <div class="content-num-box">
               <div class="content-col-content-num">
                 <vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(projectData ? projectData.projectStat.length  : '') | unitFormat}}</span>
               </div>
+              <div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
+            </div>
           </div>
         </div>
         <div class="content-col-box">
-          <div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
           <div class="content-col-content" v-loading="moduleLoading">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
+            <div class="content-num-box">
               <div class="content-col-content-num">
                 <vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length  : '') | unitFormat}}</span>
               </div>
+              <div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
+            </div>
           </div>
         </div>
         <div class="content-col-box">
-          <div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
           <div class="content-col-content" v-loading="endpointLoading">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
+            <div class="content-num-box">
               <div class="content-col-content-num">
                 <vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
               </div>
+              <div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
+            </div>
           </div>
         </div>
         <div class="content-col-box">
-          <div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
           <div class="content-col-content" v-loading="alertMessageLoading">
-            <div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
+            <div class="content-num-box">
+              <div class="content-col-content-num">
+                <vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
-            <span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
+              </div>
+              <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
+            </div>
+            <div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
           </div>
         </div>
       </div>
@@ -71,6 +88,10 @@
             <span class="content-col-title-tools">
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
               <span class="content-col-title-tool">
+                <div class="diy-content">
+                  <span>Data center</span>
+                  <i class="el-input__icon el-icon-arrow-down"></i>
+                </div>
                 <el-cascader
                   :options="trafficData"
                   :props="{multiple: true}"
@@ -303,133 +324,82 @@
             /*饼图*/
             let legendData = [];
             let typeSeriesData = [];
-            //let modelSeriesData = [];
+
+            let vm = this;
+            let assetTotalCount = function() {
+              let count = 0;
+              vm.assetData.typeStat.forEach(item => {
+                count += item.total;
+              });
+              return count;
+            }();
+
             this.assetData.typeStat.forEach(item => {
-              legendData.push(item.name);
+              legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]);
               typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
             });
-            /*for (let i = 0; i < 4; i++) {
-              legendData.push("type" + i);
-              typeSeriesData.push({name: "type" + i, value: (i+1)*10, up: (i+1)*5, down: (i+1)*5});
-            }*/
-            /*this.assetData.modelStat.forEach(item => {
-              legendData.push(item.name);
-              modelSeriesData.push({name: item.name, value: item.total});
-            });*/
             let series = [{
               name: 'Type',
               data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
               type: 'pie',
+              radius: ["58%", "75%"],
+              center: ["40%", "50%"],
               minAngle: 15,
               itemStyle: {
                 borderColor: "#fff",
                 borderWidth: 1,
               },
+              label: {show: false},
+              tooltip: {
+                backgroundColor: "rgba(255, 255, 255, 0.66)",
+                extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
+                textStyle: {color: "#333333"},
+                renderMode: 'html',
+                formatter: function(params) {
+                  return `
+                  <div class="overview-tooltip-box">
+                    <div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
+                    <div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
+                  </div>`;
+                }
+              },
               label: {
-                borderWidth: 1,
+                normal: {
-                borderColor: "#cfcfcf",
+                  show: false,
-                borderRadius: 4,
+                  position: 'center',
-                formatter: function(param) {
+                  formatter: function(param){ // 设置圆饼图中间文字排版
-                  return ['{title|' + param.name + ' (' + param.percent + '%)}',
+                    return ['{name|' + param.name + '}',
-                          '{hr|}',
+                      '{percent|(' + param.percent + '%)}']
-                          '{block5|}{upPic|}{block3|}{upNum|' + param.data.up + '}{block15|}{downPic|}{block3|}{downNum|' + param.data.down + '}{block15|}']
                       .join("\n");
                   },
                   rich: {
-                  title: {
+                    name: {
-                    align: 'center',
+                      textAlign: 'center',
                       color: "#333",
-                    height: 20*window.devicePixelRatio,
+                      fontSize: 19,
-                    padding: [0, 8, 0, 8]
+                      padding: 10
                     },
-                  hr: {
+                    percent: {
-                    width: '100%',
+                      textAlign: 'center',
-                    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,
+                      fontSize: 12,
-                    align: 'left',
+                      padding: 10
-                    //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,
                     }
                   }
                 },
-              labelLine: {
+                emphasis: {
-                show: true
+                  show: true, //文字至于中间时，这里需为true
                 },
-              //left: '25%'
+              },
-            }, /*{
+            }];
-              name: 'Model',
+            let legend = {
-              radius: ['65%', '80%'],
+              show: true,
-              data: modelSeriesData,
+              orient: "vertical",
-              type: 'pie',
+              top: "30%",
-              left: '25%',
+              right: 25,
-              label: {
+              icon: "circle",
-                formatter: function(params) {
+            };
-                  if (params.name.length > 12) {
+            this.$refs.assetTypePie.setSeries(series, legend, legendData);
-                    return params.name.substring(0, 9) + "...";
-                  }
-                  return params.name;
-                }
-              }
-            }*/];
-            /*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', 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.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-            this.$refs.assetTypePie.modifyOption("tooltip", "textStyle", {color: "#000"});
-            this.$refs.assetTypePie.modifyOption("grid", "top", 30);
-            this.$refs.assetTypePie.modifyOption("grid", "left", 0);
-            this.$refs.assetTypePie.modifyOption("grid", "right", 30);
-            this.$refs.assetTypePie.modifyOption("grid", "bottom", 8);
-            this.$refs.assetTypePie.modifyOption("grid", "containLabel", true);
-            this.$refs.assetTypePie.setSeries(series);
             this.$refs.assetTypePie.endLoading();
           }
         })
@@ -502,12 +472,13 @@
                 }
                 this.chartSeries.push(series);
                 if (this.chartSeries.length == 2) {
-                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
+                  this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
                   this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                  this.$refs.chartbox.modifyOption("grid", "top", 30);
+                  this.$refs.chartbox.modifyOption("grid", "top", 40);
-                  this.$refs.chartbox.modifyOption("grid", "left", 0);
+                  this.$refs.chartbox.modifyOption("grid", "left", 10);
-                  this.$refs.chartbox.modifyOption("grid", "right", 30);
+                  this.$refs.chartbox.modifyOption("grid", "right", 40);
-                  this.$refs.chartbox.modifyOption("grid", "bottom", 8);
+                  this.$refs.chartbox.modifyOption("grid", "bottom", 18);
                   this.$refs.chartbox.modifyOption("grid", "containLabel", true);
                   this.$refs.chartbox.setSeries(this.chartSeries);
                 }
@@ -541,14 +512,14 @@
                 }
                 this.chartSeries.push(series);
                 if (this.chartSeries.length == 2) {
-                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
+                  this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
                   this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                  this.$refs.chartbox.modifyOption("grid", "top", 30);
+                  this.$refs.chartbox.modifyOption("grid", "top", 40);
-                  this.$refs.chartbox.modifyOption("grid", "left", 0);
+                  this.$refs.chartbox.modifyOption("grid", "left", 10);
-                  this.$refs.chartbox.modifyOption("grid", "right", 30);
+                  this.$refs.chartbox.modifyOption("grid", "right", 40);
-                  this.$refs.chartbox.modifyOption("grid", "bottom", 8);
+                  this.$refs.chartbox.modifyOption("grid", "bottom", 18);
                   this.$refs.chartbox.setSeries(this.chartSeries);
-                  //this.$refs.chartbox.endLoading();
                 }
               }
               resolve(true);
@@ -1362,7 +1333,7 @@
 
 <style lang="scss">
   @import "./overview2.scss";
-  .tooltip{
+  /*.tooltip{
     padding:5px;
     min-width: 500px;
     background-color: rgba(221,228,237,1);
@@ -1384,7 +1355,7 @@
     text-align: left;
     border: 1px solid #b9b9bf;
     display: table-cell;
-    padding:0px 5px ;
+    padding:0 5px ;
     color: black;
   }
   .flex-box{
@@ -1394,5 +1365,5 @@
   .column-box{
     flex-direction: column;
     justify-content: space-between !important;
-  }
+  }*/
 </style>