Fix pie

src/components/Charts/Pie/index.js

@@ -60,6 +60,7 @@ class Pie extends Component {
       inner = 0.75,
       animate = true,
       colors,
+      lineWidth = 0,
     } = this.props;
 
     const defaultColors = colors || ['#8543E0', '#F04864', '#FACC14', '#1890FF', '#13C2C2', '#2FC25B'];
@@ -73,9 +74,9 @@ class Pie extends Component {
       tooltip = false;
       formatColor = (value) => {
         if (value === '占比') {
-          return color || '#0096fa';
+          return color || 'rgba(24, 144, 255, 0.85)';
         } else {
-          return '#e9e9e9';
+          return '#F0F2F5';
         }
       };
 
@@ -149,11 +150,13 @@ class Pie extends Component {
       inner,
     });
 
-    if (percent) {
-      chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected);
-    } else {
-      chart.intervalStack().position(Stat.summary.percent('y')).color('x', defaultColors).selected(selected);
-    }
+    chart
+      .intervalStack()
+      .position(Stat.summary.percent('y'))
+      .style({ lineWidth, stroke: '#fff' })
+      .color('x', percent ? formatColor : defaultColors)
+      .selected(selected);
+
     chart.render();
 
     this.chart = chart;

src/components/Charts/index.md

@@ -56,7 +56,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
 | title | 图表标题 | ReactNode\|string | - |
-| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.85)` |
+| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
 | margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
 | height | 图表高度 | number | - |
 | data | 数据 | array<{x, y}> | - |
@@ -66,7 +66,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
 | animate | 是否显示动画 | boolean | true |
-| color | 图表颜色 | string | `#0096fa` |
+| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
 | height | 图表高度 | number | - |
 | hasLegend | 是否显示 legend | boolean | `false` |
 | margin | 图表内部间距 | array | \[32, 0, 32, 40\] |

src/routes/Dashboard/Analysis.js

@@ -161,7 +161,7 @@ export default class Analysis extends Component {
         <Col span={12} style={{ paddingTop: 36 }}>
           <Pie
             animate={false}
-            color={(currentKey !== data.name) && '#99d5fd'}
+            color={(currentKey !== data.name) && '#BDE4FF'}
             inner={0.55}
             tooltip={false}
             margin={[0, 0, 0, 0]}
@@ -386,7 +386,7 @@ export default class Analysis extends Component {
               )}
               style={{ marginTop: 24 }}
             >
-              <div style={{ marginTop: 32, marginBottom: 108 }}>
+              <div style={{ marginTop: 32, marginBottom: 100 }}>
                 <Pie
                   hasLegend
                   title="销售额"
@@ -394,7 +394,8 @@ export default class Analysis extends Component {
                   total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
                   data={salesPieData}
                   valueFormat={val => yuan(val)}
-                  height={260}
+                  height={268}
+                  lineWidth={4}
                 />
               </div>
             </Card>

src/routes/Dashboard/Analysis.less

@@ -150,6 +150,9 @@
 
   .salesCard {
     :global {
+      .abt-tabs-ink-bar {
+        bottom: auto;
+      }
       .ant-tabs-content {
         padding-top: 30px;
       }