diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 0ee32feddcad49996014037fc55748c70ea46991..36243fdc03dc7adf23dd781c69db50c856908b52 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import G2 from 'g2';
+import { Divider } from 'antd';
 import equal from '../equal';
 import styles from './index.less';
 
@@ -223,7 +224,7 @@ class Pie extends Component {
                       <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
                         <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
                         <span className={styles.legendTitle}>{item.x}</span>
-                        <span className={styles.line} />
+                        <Divider type="vertical" />
                         <span className={styles.percent}>{`${(item['..percent'] * 100).toFixed(2)}%`}</span>
                         <span
                           className={styles.value}
diff --git a/src/components/Charts/Pie/index.less b/src/components/Charts/Pie/index.less
index f0051a9758be6cae5dbd053ecb832c9ed284daa7..693a7134058cb522eee8535bf10bff26c5d6c26d 100644
--- a/src/components/Charts/Pie/index.less
+++ b/src/components/Charts/Pie/index.less
@@ -35,7 +35,6 @@
   }
   .legendTitle {
     color: @text-color;
-    margin-right: 8px;
   }
   .percent {
     color: @text-color-secondary;