修改数据首页饼图样式

src/containers/Dashboard/CampusRank/CampusRankChart.vue

@@ -38,7 +38,7 @@ export default {
         container: 'CampusRank',
         forceFit: true,
         height: this.height - 30,
-        padding: [20, 249, 20, 0],
+        padding: [0, 249, 0, 0],
       });
       this.chart.source(this.data);
       this.chart.coord('theta', {
@@ -81,18 +81,10 @@ export default {
           width: '244px',
           'max-width': '244px',
           'max-height': this.height - 30 + 'px',
-          right: 0,
         },
         'g2-legend-list-item': {
           color: '#333',
         },
-        'g2-legend-text': {
-          display: 'inline-block',
-          width: '100px',
-          overflow: 'hidden',
-          'text-overflow': 'ellipsis',
-          'white-space': 'nowrap',
-        },
         'g2-legend-marker': {
           width: '10px',
           height: '5px',
@@ -198,10 +190,6 @@ export default {
     top: 50%;
     right: 0;
   }
-  .g2-legend {
-    max-height: 270px;
-    overflow-y: auto;
-  }
   .g2-legend-text {
     display: inline-block;
     width: 100px;

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -33,7 +33,7 @@ export default {
         container: 'SeviceRatio',
         forceFit: true,
         height: this.height - 30,
-        padding: [0, 205, 0, 0],
+        padding: [0, 220, 0, 0],
       });
       this.chart.source(this.data);
       this.chart.coord('theta', {
@@ -73,7 +73,8 @@ export default {
             `;
         },
         'g2-legend': {
-          width: '200px',
+          width: '215px',
+          'max-width': '215px',
           // left: '-20px',
         },
         'g2-legend-list-item': {
@@ -89,7 +90,18 @@ export default {
       this.chartGeom = this.chart
         .intervalStack()
         .position('count')
-        .color('serviceName', ['#4e82fb', '#fb774e', '#ffc934', '#41bf52']);
+        .color('serviceName', [
+          '#4e82fb',
+          '#fb774e',
+          '#ffc934',
+          '#41bf52',
+          '#9b50ff',
+          '#94de70',
+          '#b5593d',
+          '#fe8787',
+          '#254eae',
+          '#2f4554',
+        ]);
 
       // 辅助元素
       this.chart.guide().html({
@@ -162,7 +174,7 @@ export default {
   }
   .g2-legend-price {
     display: inline-block;
-    width: 72px;
+    width: 86px;
     text-align: right;
   }
 }