sea-chart 0.0.36 → 0.0.38

package/dist/constants/index.js

@@ -173,6 +173,10 @@ export const CHART_THEME_COLOR = {
     gridColor: '#F3F3F3',
     XAxisColor: '#CCCCCC',
     labelColor: '#999999',
+    ringLabelColor: '#212529',
+    annotationTitleFontColor: '#666666',
+    annotationValueFontColor: '#212529',
+    annotationFontSize: 18,
     cardColor: '#545454',
     legendTextColor: '#333333',
     legendFontSize: 14,

package/dist/model/combination.js

@@ -1,5 +1,5 @@
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
 import BaseModel from './base-model';
 class Combination extends BaseModel {
   constructor(options) {
@@ -33,6 +33,7 @@ class Combination extends BaseModel {
     this.y_axis_max_right = options.y_axis_max_right;
     this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
     this.label_font_size = options.label_font_size;
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default Combination;

package/dist/model/ring.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Ring extends BaseModel {
   constructor(options) {
     super({
@@ -21,6 +21,7 @@ class Ring extends BaseModel {
     this.minimum_slice_percent = options.minimum_slice_percent;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
+    this.show_annotation = options.show_annotation || true;
   }
 }
 export default Ring;

package/dist/settings/combination-settings/style-settings.js

@@ -8,6 +8,7 @@ import DisplayValuesSettings from '../widgets/display-values-settings';
 import { eventStopPropagation } from '../../utils';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
 import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -96,12 +97,16 @@ const StyleSettings = _ref => {
     y_axis_min_right,
     y_axis_max_right,
     display_data,
-    label_font_size
+    label_font_size,
+    line_type
   } = config;
   const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
   const yLeftAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_left_label_position) || yAxisLabelOptions[0];
   const yRightAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_right_label_position) || yAxisLabelOptions[0];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectLineType, {
+    selectedLineType: line_type,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
     key: "x_axis_show_label",

package/dist/settings/widgets/select-line-type/index.js

@@ -5,7 +5,7 @@ import { CHART_LINE_TYPES } from '../../../constants';
 import intl from '../../../intl';
 function SelectLineType(_ref) {
   let {
-    selectedLineType,
+    selectedLineType = CHART_LINE_TYPES[1],
     onChange
   } = _ref;
   const onChangeLineType = lineType => {

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -2,7 +2,7 @@ var _SQLStatisticsUtils;
 import dayjs from 'dayjs';
 import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber } from 'dtable-utils';
 import { isObject } from 'lodash';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
 import context from '../../context';
@@ -1025,17 +1025,33 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     let leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column);
     const summaryMethod = y_axis_left_summary_method.toUpperCase();
     const {
-      key: groupItem
+      key
     } = summaryMethodColumn2SqlColumn(summaryMethod, leftSummaryColumn || {});
-    leftSummaryColumn && !groupItems.includes(groupItem) && groupItems.push(groupItem);
+    const groupItem = {
+      sqlName: key,
+      column: leftSummaryColumn
+    };
+    const exists = groupItems.find(v => v.sqlName === key);
+    if (!exists && leftSummaryColumn) {
+      groupItems.push(groupItem);
+    }
+    // leftSummaryColumn && !groupItems.includes(groupItem) && groupItems.push(groupItem);
     y_axis_left_group_by_numeric_columns.forEach((item, index) => {
       const column = getTableColumnByKey(table, item.column_key);
       if (column) {
         const itemSummaryMethod = item.summary_method.toUpperCase();
         const {
-          key: groupItem
+          key
         } = summaryMethodColumn2SqlColumn(itemSummaryMethod, column || {});
-        !groupItems.includes(groupItem) && groupItems.push(groupItem);
+        const groupItem = {
+          sqlName: key,
+          column
+        };
+        const exists = groupItems.find(v => v.sqlName === key);
+        if (!exists) {
+          groupItems.push(groupItem);
+        }
+        // !groupItems.includes(groupItem) && groupItems.push(groupItem);
       }
     });
     sqlRows.forEach((item, index) => {
@@ -1046,7 +1062,10 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
         valueRight = BaseUtils.getPrecisionNumber(valueRight, rightSummaryColumn.data);
       }
       groupItems.forEach((groupItem, index) => {
-        let value = item[groupItem] || 0;
+        var _groupItem$column;
+        const sqlName = groupItem.sqlName;
+        const groupName = (_groupItem$column = groupItem.column) === null || _groupItem$column === void 0 ? void 0 : _groupItem$column.name;
+        let value = item[sqlName] || 0;
         if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
           value = BaseUtils.getPrecisionNumber(value, leftSummaryColumn.data);
         }
@@ -1054,7 +1073,8 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
           name: key,
           value_left: value,
           value_right: valueRight,
-          color: LABEL_COLORS[index % 12]
+          group_name: groupName,
+          color: STYLE_COLORS[0].colors[index % 12]
         });
       });
     });

package/dist/utils/custom-g2.js

@@ -91,6 +91,7 @@ import ScaleTranslate from '@antv/g2/esm/interaction/action/view/scale-translate
 import ScaleZoom from '@antv/g2/esm/interaction/action/view/scale-zoom';
 import { getAngle, polarToCartesian } from '@antv/g2/esm/util/graphics';
 import { rotate, transform, translate, zoom } from '@antv/g2/esm/util/transform';
+import { Action, registerShape } from '@antv/g2';
 export { getRectWithCornerRadius } from '@antv/g2/esm/geometry/shape/interval/util';
 // 注册 G 渲染引擎
 registerEngine('canvas', CanvasEngine);
@@ -208,6 +209,47 @@ registerAction('reset-button', ButtonAction, {
   name: 'reset-button',
   text: 'reset'
 });
+registerShape('interval', 'withGap', {
+  draw(cfg, container) {
+    const points = cfg.points;
+    let path = [];
+    path.push(['M', points[0].x, points[0].y]);
+    path.push(['L', points[1].x, points[1].y - 0.0015]);
+    path.push(['L', points[2].x, points[2].y - 0.0015]);
+    path.push(['L', points[3].x, points[3].y]);
+    path.push('Z');
+    path = this.parsePath(path);
+    return container.addShape('path', {
+      attrs: {
+        fill: cfg.color,
+        path
+      }
+    });
+  }
+});
+class HighlightXOnlyBar extends Action {
+  highlight() {
+    const elements = this.context.view.geometries[0].elements;
+    elements.forEach(element => {
+      const {
+        data
+      } = element.getModel();
+      if (data.type === 'bar') {
+        element.setState('active', true);
+      } else {
+        element.hide();
+      }
+    });
+  }
+  reset() {
+    const elements = this.context.view.geometries[0].elements;
+    elements.forEach(element => {
+      element.setState('active', false);
+      element.show();
+    });
+  }
+}
+registerAction('highlight-x-only-bar', HighlightXOnlyBar);
 
 // 注册默认的 Interaction 交互行为
 function isPointInView(context) {

package/dist/utils/sql/chart-data-sql.js

@@ -367,17 +367,15 @@ class ChartDataSQL {
         let summary_column_name = '';
         if (right_summary_type === 'COUNT') {
           summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
+          return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
         } else {
           const right_summary_column = this._get_column_by_key(y_axis_right_summary_column);
           if (right_summary_column) {
             const right_summary_method = y_axis_right_summary_method.toUpperCase();
             summary_column_name = this._summary_column_2_sql(right_summary_method, right_summary_column);
+            return "SELECT ".concat(groupby_column_name, ", COUNT(").concat(groupby_column_name, "), ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
           }
         }
-        if (summary_column_name) {
-          return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
-        }
-        return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
       }
       if (y_axis_left_group_by_multiple_numeric_column) {
         let column_groupby_numeric_columns = y_axis_left_group_by_numeric_columns.slice(0);

package/dist/view/wrapper/bar.js

@@ -78,7 +78,7 @@ class Bar extends ChartComponent {
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
+          fill: theme.ringLabelColor,
           stroke: '#fff',
           lineWidth: 1
         }

package/dist/view/wrapper/chart-component.js

@@ -347,12 +347,10 @@ export default class ChartComponent extends Component {
       }
       return label;
     };
-    // set legend
-    this.setLegend = function (legendName) {
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
-      if (!_this.chart) return;
-      _this.chart.legend(legendName, {
+    this.getLegendConfig = function () {
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top-right';
+      return {
         // custom: true,
         position: legendPosition,
         itemName: {
@@ -364,6 +362,8 @@ export default class ChartComponent extends Component {
           formatter: name => {
             if (!name && typeof name !== 'number') {
               return intl.get(EMPTY_NAME);
+            } else if (name === '_Others') {
+              return intl.get('Others');
             } else {
               return intl.get(name) || name;
             }
@@ -411,7 +411,26 @@ export default class ChartComponent extends Component {
             return style;
           }
         }
-      });
+      };
+    };
+    // set legend
+    this.setLegend = function (legendName) {
+      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      if (!_this.chart) return;
+      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
+      _this.chart.legend(legendName, basicLegendConfig);
+    };
+    // theta is pie or ring chart
+    this.setLegendForTheta = function (legendName) {
+      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!_this.chart) return;
+      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
+      basicLegendConfig.offsetX = offsetX;
+      basicLegendConfig.itemName.style.fontSize = theme.fontSize;
+      _this.chart.legend(legendName, basicLegendConfig);
     };
     this.setColorMap = data => {
       let currentIdx = 0;
@@ -465,6 +484,7 @@ export default class ChartComponent extends Component {
             textOverflow: 'ellipsis'
           },
           'g2-tooltip-list-item': {
+            marginTop: '8px',
             marginBottom: '8px',
             display: 'flex'
           },
@@ -553,6 +573,13 @@ export default class ChartComponent extends Component {
         ...lineToolTipSettings
       });
     };
+    // theta is pie or ring chart
+    this.setToolTipForTheta = () => {
+      const settings = this.getToolTipSettings();
+      settings.showTitle = false;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
+      this.chart.tooltip(settings);
+    };
     this.isShowXAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.x_axis_show_label);
     };

package/dist/view/wrapper/combination.js

@@ -1,11 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import { throttle } from 'lodash-es';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils, isFunction } from '../../utils';
-import { CHART_SUMMARY_TYPE, LABEL_COLORS, CHART_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME } from '../../constants';
+import { CHART_SUMMARY_TYPE, LABEL_COLORS, CHART_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME, CHART_LINE_TYPES, CHART_STYLE_COLORS } from '../../constants';
 import intl from '../../intl';
-class Combination extends React.Component {
+import ChartComponent from './chart-component';
+class Combination extends ChartComponent {
   constructor(props) {
     super(props);
     this.clearChart = () => {
@@ -42,8 +45,10 @@ class Combination extends React.Component {
         y_axis_auto_range_right,
         y_axis_min_right,
         y_axis_max_right,
+        x_axis_column_key,
         display_data,
-        label_font_size
+        label_font_size,
+        line_type
       } = chart.config;
       this.chart = new Chart({
         container: this.container,
@@ -52,12 +57,42 @@ class Combination extends React.Component {
         height: '100%',
         appendPadding: [display_data ? 17 : 0, 0, 0, 0]
       });
+      const isSmooth = line_type === CHART_LINE_TYPES[1] || !line_type;
+
+      // y-axis label width：6 + 10
+      const chartWidth = this.chart.width - 6 - 10;
+      const nameCountMap = data.reduce((acc, cur) => {
+        if (!acc[cur.name]) {
+          acc[cur.name] = 1;
+        } else {
+          acc[cur.name] += 1;
+        }
+        return acc;
+      }, {});
+      const nameNums = Object.keys(nameCountMap).length;
+      const countValues = Object.values(nameCountMap).reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+      const mostCommonCount = Object.entries(countValues).reduce((max, entry) => {
+        return entry[1] > max[1] ? entry : max;
+      }, ['', -Infinity])[0];
+      const singleBarWidth = Math.round(chartWidth / (2 * nameNums * mostCommonCount));
+      const singleBarRadius = Math.min(singleBarWidth / 5, 10);
       const currentTheme = BaseUtils.getCurrentTheme(themeName);
+      this.colorMap = data.reduce((acc, cur, index) => {
+        if (!acc[cur.group_name]) {
+          acc[cur.group_name] = cur.color;
+        }
+        return acc;
+      }, {});
       this.chart.data(data);
       this.chart.coordinate('rect');
       const table = getTableById(tables, table_id);
       const leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column) || {};
       const rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      // const xAxisColumn = getTableColumnByKey(table, x_axis_column_key);
+
       let leftValueScaleOptions = {
         formatter: value => {
           return BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
@@ -89,12 +124,25 @@ class Combination extends React.Component {
         value_right: rightValueScaleOptions
       });
       this.chart.axis('name', {
+        line: {
+          style: {
+            stroke: theme.XAxisColor,
+            lineWidth: 1
+          }
+        },
+        tickLine: {
+          length: 5,
+          // color of the tick line
+          stroke: theme.XAxisColor
+        },
         label: {
           style: {
             fill: theme.textColor,
-            stroke: '#fff',
-            lineWidth: 1
+            fontSize: theme.fontSize
           },
+          offset: 10,
+          autoRotate: true,
+          // rotate: data.length > 11 ? 0.3 : 0,
           formatter: name => {
             const isString = typeof name === 'string';
             if (!isString) name = String(name);
@@ -106,70 +154,142 @@ class Combination extends React.Component {
             }
             return name;
           }
-        },
-        line: {
-          style: theme.gridColor
         }
       });
       this.chart.axis('value_left', {
+        label: {
+          offset: 6,
+          style: {
+            fontSize: theme.fontSize,
+            // fontSize: 66,
+            fill: theme.textColor
+          }
+        },
         grid: {
           line: {
             style: {
-              stroke: theme.gridColor
+              stroke: theme.gridColor,
+              lineDash: [8, 3]
             }
           }
-        },
-        label: {
-          style: {
-            fill: theme.textColor
-          }
         }
       });
       this.chart.axis('value_right', {
         grid: null,
         label: {
+          offset: 6,
           style: {
+            fontSize: theme.fontSize,
             fill: theme.textColor
           }
         }
       });
-      let legendPosition = 'bottom';
+      let legendPosition = 'top-right';
+      // const leftLegendConfig = this.getLegendConfig(undefined, legendPosition);
+      // this.chart.legend(leftLegendConfig);
       this.chart.legend({
-        custom: true,
+        // custom: true,
         position: legendPosition,
         itemName: {
           style: {
-            fill: theme.textColor
+            fill: theme.legendTextColor,
+            fontSize: theme.legendFontSize
+          },
+          formatter: name => {
+            if (!name && typeof name !== 'number') {
+              return intl.get(EMPTY_NAME);
+            } else if (name === '_Others') {
+              return intl.get('Others');
+            } else {
+              return intl.get(name) || name;
+            }
           }
         },
+        itemSpacing: 28,
         items: this.getLegend(leftSummaryColumn, rightSummaryColumn, table, currentTheme)
       });
-      this.chart.interval().position('name*value_left').color('color', color => {
+      const adjust = y_axis_left_group_by_multiple_numeric_column ? {
+        type: 'dodge',
+        dodgeBy: 'group_name',
+        dodgePadding: singleBarWidth / 3
+      } : {
+        type: 'dodge'
+      };
+      const interval = this.chart.interval().label(display_data ? 'value_left' : false, {
+        content: data => {
+          if (this.currentName) {
+            return data.name === this.currentName ? data.value_left : '';
+          }
+          return data.value_left;
+        },
+        style: {
+          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      }).position('name*value_left').color('color', color => {
         if (!y_axis_left_group_by_multiple_numeric_column) {
           return currentTheme.colors[0];
         }
         return color;
-      }).adjust('dodge').tooltip('name*value_left', (name, value) => {
+      }).adjust(adjust).size(singleBarWidth).tooltip('name*value_left', (name, value) => {
+        const {
+          y_axis_left_group_by_multiple_numeric_column
+        } = this.props.chart.config;
+        const isMultiple = y_axis_left_group_by_multiple_numeric_column;
+        let title = '';
+        if (isMultiple) {
+          title = name;
+        } else {
+          title = y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_left_summary_method]);
+        }
         return {
-          title: y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_left_summary_method]),
+          title,
           value: BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      }).style({
+        fillOpacity: 1,
+        radius: [singleBarRadius, singleBarRadius, 0, 0]
       });
-      this.chart.tooltip({
-        showMarkers: false
-      });
-      this.chart.line().position('name*value_right').color(currentTheme.colors[1]).size(3).tooltip('name*value_right', (name, value) => {
-        return {
-          title: y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
-          value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
-          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
-        };
-      });
-      this.chart.point().position('name*value_right').color(currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'value_right' : false, {
+      this.formatDataByName(data);
+      if (!y_axis_left_group_by_multiple_numeric_column) {
+        this.setToolTipForInterval();
+      } else {
+        this.setToolTipForInterval(true, leftSummaryColumn, y_axis_left_summary_method);
+      }
+      this.chart.line().position('name*value_right').color(currentTheme.colors[1]).shape(isSmooth ? 'smooth' : 'line').style({
+        lineWidth: 3,
+        opacity: 1
+      }).tooltip(false);
+      const point = this.chart.point().position('name*value_right').color(currentTheme.colors[1]).animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).shape('circle').size(4).style({
+        stroke: 0,
+        fillOpacity: 1
+      }).label(display_data ? 'value_right' : false, {
+        content: data => {
+          if (this.currentName) {
+            return data.name === this.currentName ? data.value_right : '';
+          }
+          return data.value_right;
+        },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).tooltip('name*value_right', (name, value) => {
         return {
@@ -177,7 +297,121 @@ class Combination extends React.Component {
           value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
       });
+      if (display_data) {
+        this.chart.on('element:mouseenter', throttle(e => {
+          const currentName = e.data.data.name;
+          if (this.currentName && this.currentName === currentName) return;
+          this.currentName = currentName;
+          this.chart.render(true);
+        }, 100));
+        this.chart.on('element:mouseleave', throttle(e => {
+          if (!this.currentName) return;
+          this.currentName = null;
+          this.chart.render(true);
+        }, 100));
+      }
+      this.chart.on('interval:mouseenter', e => {
+        if (this.isInsideInterval) return;
+        this.isInsideInterval = true;
+        point.style({
+          stroke: 0,
+          fillOpacity: 0.3
+        });
+        interval.tooltip('name*value_left', (name, value) => {
+          const {
+            y_axis_left_group_by_multiple_numeric_column
+          } = this.props.chart.config;
+          const isMultiple = y_axis_left_group_by_multiple_numeric_column;
+          let title = '';
+          if (isMultiple) {
+            title = name;
+          } else {
+            title = y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_left_summary_method]);
+          }
+          return {
+            title,
+            value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+          };
+        });
+        point.tooltip(false);
+        this.setToolTipForInterval(true, leftSummaryColumn, y_axis_left_summary_method);
+        this.chart.render(true);
+      });
+      this.chart.on('interval:mouseleave', e => {
+        if (!this.isInsideInterval) return;
+        this.isInsideInterval = false;
+        point.style({
+          stroke: 0,
+          fillOpacity: 1
+        });
+        interval.tooltip(false);
+        point.tooltip('name*value_right', (name, value) => {
+          return {
+            title: y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
+            value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+          };
+        });
+        this.setToolTipForPointView();
+        this.chart.render(true);
+      });
+      this.chart.on('point:mouseenter', throttle(e => {
+        if (this.isInsidePoint) return;
+        this.isInsidePoint = true;
+        interval.style({
+          radius: [singleBarRadius, singleBarRadius, 0, 0],
+          fillOpacity: 0.3
+        });
+        console.log(e);
+        point.style('name', name => {
+          let r = 4;
+          if (name === e.data.data.name) {
+            r = 8;
+          }
+          return {
+            r,
+            stroke: 0,
+            fillOpacity: 1
+          };
+        });
+        this.chart.render(true);
+      }, 10));
+      this.chart.on('point:mouseleave', throttle(e => {
+        if (!this.isInsidePoint) return;
+        this.isInsidePoint = false;
+        interval.style({
+          radius: [singleBarRadius, singleBarRadius, 0, 0],
+          fillOpacity: 1
+        });
+        point.style('name', name => {
+          let r = 4;
+          return {
+            r,
+            stroke: 0,
+            fillOpacity: 1
+          };
+        });
+        this.chart.render(true);
+      }, 100));
+      this.chart.interaction('element-highlight-by-x', {
+        start: [{
+          trigger: 'element:mouseenter',
+          action: 'element-highlight-by-x:highlight'
+        }],
+        end: [{
+          trigger: 'element:mouseleave',
+          action: 'element-highlight-by-x:reset'
+        }]
+      });
+      // this.chart.interaction('custom-highlight-by-x');
       isFunction(customRender) && customRender(this.chart);
       this.chart.removeInteraction('legend-filter');
       this.chart.render();
@@ -286,6 +520,31 @@ class Combination extends React.Component {
         yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
       }
     };
+    this.drawLeftLegendSymbol = (x, y) => {
+      // The total width of the capsule is 20px, and its height is 6px. Thus, the radius of the semi-circle is half the height, which is 3px.
+      const r = 3;
+      // The width of the rectangular part in the middle of the capsule is the total width minus the diameters of the two semi-circles, which is 14px.
+      const rectWidth = 14;
+      y -= 1;
+      x -= 5;
+      return [['M', x - rectWidth / 2, y - r],
+      // Start from the left edge of the left semi-circle
+      ['L', x + rectWidth / 2, y - r],
+      // Draw the top line to the left edge of the right semi-circle
+      ['A', r, r, 0, 0, 1, x + rectWidth / 2, y + r],
+      // Draw the right semi-circle
+      ['L', x - rectWidth / 2, y + r],
+      // Draw the bottom line back to the right edge of the left semi-circle
+      ['A', r, r, 0, 0, 1, x - rectWidth / 2, y - r] // Draw the left semi-circle
+      ];
+    };
+    this.drawRightLegendSymbol = (x, y) => {
+      const r = 2;
+      const size = 12;
+      y -= 7;
+      x -= 8;
+      return [['M', x + r, y], ['L', x + size - r, y], ['A', r, r, 0, 0, 1, x + size, y + r], ['L', x + size, y + size - r], ['A', r, r, 0, 0, 1, x + size - r, y + size], ['L', x + r, y + size], ['A', r, r, 0, 0, 1, x, y + size - r], ['L', x, y + r], ['A', r, r, 0, 0, 1, x + r, y], ['Z']];
+    };
     this.getLegend = (leftSummaryColumn, rightSummaryColumn, table, currentTheme) => {
       const {
         chart
@@ -300,21 +559,18 @@ class Combination extends React.Component {
           value: 'value_left',
           name: leftSummaryColumn.name || intl.get('Left'),
           marker: {
-            symbol: 'square',
+            symbol: this.drawLeftLegendSymbol,
             style: {
-              fill: currentTheme.colors[0],
-              r: 5
+              fill: this.colorMap[leftSummaryColumn.name] || currentTheme.colors[0]
             }
           }
         }, {
           value: 'value_right',
           name: rightSummaryColumn.name || intl.get('Right'),
           marker: {
-            symbol: 'hyphen',
+            symbol: this.drawRightLegendSymbol,
             style: {
-              stroke: currentTheme.colors[1],
-              r: 5,
-              lineWidth: 3
+              fill: currentTheme.colors[1]
             }
           }
         });
@@ -323,11 +579,10 @@ class Combination extends React.Component {
           value: 'value_left',
           name: leftSummaryColumn.name || intl.get('Left'),
           marker: {
-            fill: LABEL_COLORS[0],
-            symbol: 'square',
             style: {
-              r: 5
-            }
+              fill: this.colorMap[leftSummaryColumn.name] || currentTheme.colors[0]
+            },
+            symbol: this.drawLeftLegendSymbol
           }
         });
         y_axis_left_group_by_numeric_columns.forEach((item, index) => {
@@ -337,10 +592,9 @@ class Combination extends React.Component {
               value: 'group_name',
               name: column.name || intl.get('Left'),
               marker: {
-                symbol: 'square',
+                symbol: this.drawLeftLegendSymbol,
                 style: {
-                  fill: LABEL_COLORS[(index + 1) % 12],
-                  r: 5
+                  fill: this.colorMap[column.name]
                 }
               }
             });
@@ -350,17 +604,49 @@ class Combination extends React.Component {
           value: 'value_right',
           name: rightSummaryColumn.name || intl.get('Right'),
           marker: {
-            symbol: 'hyphen',
+            symbol: this.drawRightLegendSymbol,
             style: {
-              stroke: currentTheme.colors[1],
-              r: 5,
-              lineWidth: 3
+              fill: currentTheme.colors[1]
             }
           }
         });
       }
       return legendItems;
     };
+    this.setToolTipForInterval = (isGroup, summaryColumn, y_axis_summary_method) => {
+      const {
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_right_summary_method
+      } = this.props.chart.config;
+      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method);
+      settings.showMarkers = false;
+      settings.showTitle = true;
+      if (isGroup) {
+        settings.customItems = items => {
+          const activeItem = items[0];
+          const name = activeItem.data.name;
+          const isMultiple = y_axis_left_group_by_multiple_numeric_column;
+          return this.formatedDataByName[name].map(item => {
+            const res = {
+              color: item.color || CHART_STYLE_COLORS[0],
+              data: item,
+              name: !item.group_name && typeof item.group_name !== 'number' && isMultiple ? intl.get(EMPTY_NAME) : item.group_name || item.name,
+              title: isMultiple ? item.name : intl.get(CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
+              value: BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value_left, y_axis_summary_method)
+            };
+            return res;
+          });
+        };
+      }
+      this.chart.tooltip(settings);
+    };
+    this.setToolTipForPointView = () => {
+      const settings = this.getToolTipSettings();
+      settings.showTitle = true;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>";
+      settings.itemTpl = "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>";
+      this.chart.tooltip(settings);
+    };
     this.isShowXAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.x_axis_show_label);
     };
@@ -400,4 +686,15 @@ class Combination extends React.Component {
     });
   }
 }
+Combination.propTypes = {
+  themeName: PropTypes.string,
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object,
+  toggleRecords: PropTypes.func,
+  customRender: PropTypes.func
+};
 export default Combination;

package/dist/view/wrapper/pie.js

@@ -37,7 +37,7 @@ class Pie extends ChartComponent {
       } = this.props;
       if (data.length === 0) return;
       this.chart.coordinate('theta', {
-        radius: 0.95
+        radius: 0.7
       });
       const {
         show_legend,
@@ -56,34 +56,8 @@ class Pie extends ChartComponent {
         this.props.toggleRecords(e.data.data);
       });
       if (show_legend) {
-        this.chart.legend('name', {
-          position: 'right',
-          custom: true,
-          itemName: {
-            style: {
-              fill: theme.labelColor
-            }
-          },
-          items: newData.map((obj, index) => {
-            let name = obj.name;
-            if (!obj.name && typeof obj.name !== 'number') {
-              name = intl.get('Empty');
-            } else if (obj.name === '_Others') {
-              name = intl.get('Others');
-            }
-            return {
-              name,
-              value: obj.value,
-              marker: {
-                symbol: 'circle',
-                style: {
-                  r: 5,
-                  fill: colorSet[index]
-                }
-              }
-            };
-          })
-        });
+        // lengend itself has a width of nearly 30px, 90 + 30 = 120
+        this.setLegendForTheta('name', undefined, 'right', -90);
       } else {
         this.chart.legend(false);
       }
@@ -94,18 +68,21 @@ class Pie extends ChartComponent {
           nice: false
         }
       });
-      this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
+      this.isInnerLabel = !label_position || label_position === CHART_LABEL_POSITIONS[0];
+      this.innerLabelOffset = '-25%';
+      this.outerLabelOffset = 20;
+      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
         const displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
           content: this.getLabel(displayValue, percent)
         };
       }, {
-        offset: !label_position || label_position === CHART_LABEL_POSITIONS[0] ? -2 : undefined,
+        offset: this.isInnerLabel ? this.innerLabelOffset : this.outerLabelOffset,
         style: {
-          fill: '#000000',
+          fill: theme.ringLabelColor,
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0, .45)'
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).tooltip('name*value*percent', (name, value, percent) => {
         let title = name;
@@ -127,22 +104,92 @@ class Pie extends ChartComponent {
             stroke: 0
           }
         }
+      }).shape('withClip2').style('value', value => {
+        return {
+          lineWidth: 2,
+          stroke: '#fff'
+        };
       });
-      this.chart.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
-      });
-      this.chart.interaction('chart-active');
+      this.setToolTipForTheta();
+      this.chart.interaction('element-highlight');
+      this.chart.on('interval:mouseenter', evt => this.onEnterElement(evt, {
+        summaryColumn,
+        summaryMethod: summary_method
+      }));
+      this.chart.on('interval:mouseleave', evt => this.onLeaveElement(evt, {
+        summaryColumn,
+        summaryMethod: summary_method
+      }));
       isFunction(customRender) && customRender(this.chart);
       this.chart.render();
     };
+    this.onEnterElement = (evt, _ref) => {
+      let {
+        summaryColumn,
+        summaryMethod
+      } = _ref;
+      const {
+        label_font_size
+      } = this.props.chart.config;
+      const {
+        theme
+      } = this.props;
+      const item = evt.data.data;
+      this.currentChart.label('name*value*percent', (name, value, percent) => {
+        let displayValue;
+        if (item.name === name) {
+          displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summaryMethod);
+        } else {
+          displayValue = '';
+        }
+        return {
+          content: this.getLabel(displayValue, percent)
+        };
+      }, {
+        offset: this.isInnerLabel ? this.innerLabelOffset : this.outerLabelOffset,
+        style: {
+          fill: theme.ringLabelColor,
+          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      });
+      this.chart.render(true);
+    };
+    this.onLeaveElement = (evt, _ref2) => {
+      let {
+        summaryColumn,
+        summaryMethod
+      } = _ref2;
+      const {
+        summary_method,
+        label_font_size
+      } = this.props.chart.config;
+      const {
+        theme
+      } = this.props;
+      this.currentChart.label('value*percent', (value, percent) => {
+        let displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          content: this.getLabel(displayValue, percent)
+        };
+      }, {
+        offset: this.isInnerLabel ? this.innerLabelOffset : this.outerLabelOffset,
+        style: {
+          fill: theme.ringLabelColor,
+          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      });
+      this.chart.render(true);
+    };
     this.getLabel = (value, percent) => {
       const {
         display_label,
         label_format
       } = this.props.chart.config;
-      if (!display_label) {
+      if (!display_label || !value || !percent) {
         return '';
       }
       switch (label_format) {

package/dist/view/wrapper/ring.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
+import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
 import ChartComponent from './chart-component';
@@ -28,21 +28,25 @@ class Ring extends ChartComponent {
         result: data,
         chart,
         tables,
+        theme,
         summaryColumn,
         customRender
       } = this.props;
+      const radius = 0.7;
+      const innerRadius = 0.8;
       if (data.length === 0) return;
       this.sum = data.total;
       this.chart.coordinate('theta', {
-        radius: 0.95,
-        innerRadius: 0.7
+        radius,
+        innerRadius
       });
       const {
         show_legend,
         display_label,
         label_position,
         label_font_size,
-        summary_method
+        summary_method,
+        label_format
       } = chart.config;
       const {
         data: newData,
@@ -56,34 +60,8 @@ class Ring extends ChartComponent {
         this.props.toggleRecords(e.data.data);
       });
       if (show_legend) {
-        this.chart.legend('name', {
-          position: 'right',
-          custom: true,
-          itemName: {
-            style: {
-              fill: '#6e6e6e'
-            }
-          },
-          items: newData.map((obj, index) => {
-            let name = obj.name;
-            if (!obj.name && typeof obj.name !== 'number') {
-              name = intl.get('Empty');
-            } else if (obj.name === '_Others') {
-              name = intl.get('Others');
-            }
-            return {
-              name,
-              value: obj.value,
-              marker: {
-                symbol: 'circle',
-                style: {
-                  r: 5,
-                  fill: colorSet[index]
-                }
-              }
-            };
-          })
-        });
+        // lengend itself has a width of nearly 30px, 90 + 30 = 120
+        this.setLegendForTheta('name', undefined, 'right', -90);
       } else {
         this.chart.legend(false);
       }
@@ -94,18 +72,37 @@ class Ring extends ChartComponent {
           nice: false
         }
       });
-      this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
+      const labelWidthMap = {
+        [CHART_LABEL_FORMATS[0]]: 30,
+        [CHART_LABEL_FORMATS[1]]: 20,
+        [CHART_LABEL_FORMATS[2]]: 40
+      };
+      const currntLabelWidth = labelWidthMap[label_format];
+      let elementWidth = this.chart.height * radius * (1 - innerRadius) / 2;
+      const isInnerLabel = !label_position || label_position === CHART_LABEL_POSITIONS[0];
+      this.isInnerLabel = isInnerLabel;
+      let innerLabelOffset;
+      let outerLabelOffset = 20;
+      if (elementWidth < currntLabelWidth) {
+        innerLabelOffset = '0%';
+      } else {
+        // label position: elementWidth - labelWith / 2
+        innerLabelOffset = -(elementWidth - currntLabelWidth) / 2;
+      }
+      this.innerLabelOffset = innerLabelOffset;
+      this.outerLabelOffset = outerLabelOffset;
+      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
         const displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
           content: this.getLabel(displayValue, percent)
         };
       }, {
-        offset: !label_position || label_position === CHART_LABEL_POSITIONS[0] ? -2 : undefined,
+        offset: isInnerLabel ? innerLabelOffset : 20,
         style: {
-          fill: '#000000',
+          fill: theme.ringLabelColor,
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0, .45)'
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).tooltip('name*value*percent', (name, value, percent) => {
         let title = name;
@@ -127,25 +124,26 @@ class Ring extends ChartComponent {
             stroke: 0
           }
         }
+      }).shape('withGap').style('value', value => {
+        return {
+          lineWidth: 3,
+          stroke: '#fff'
+        };
       });
-      this.chart.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
-      });
-      this.chart.interaction('chart-active');
+      this.setToolTipForTheta();
       this.setAnnotation({
         name: intl.get('Total'),
         value: BaseUtils.getSummaryValueDisplayString(summaryColumn, this.sum, summary_method)
-      }, '#000000');
-      this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, '#000000', {
+      });
+      this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, {
         summaryColumn,
         summaryMethod: summary_method
       }));
-      this.chart.on('interval:mouseleave', evt => this.onLeaveRingChart(evt, '#000000', {
+      this.chart.on('interval:mouseleave', evt => this.onLeaveRingChart(evt, {
         summaryColumn,
         summaryMethod: summary_method
       }));
+      this.chart.interaction('element-highlight');
       isFunction(customRender) && customRender(this.chart);
       this.chart.render();
     };
@@ -154,7 +152,7 @@ class Ring extends ChartComponent {
         display_label,
         label_format
       } = this.props.chart.config;
-      if (!display_label) {
+      if (!display_label || !value) {
         return '';
       }
       switch (label_format) {
@@ -168,11 +166,12 @@ class Ring extends ChartComponent {
           return percent;
       }
     };
-    this.setAnnotation = function (content, fontColor) {
+    this.setAnnotation = function (content) {
       let {
         summaryColumn,
         summaryMethod
-      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      let theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : CHART_THEME_COLOR['light'];
       let name = content.name;
       if (!name || name === 'undefined') {
         name = intl.get('Empty');
@@ -183,46 +182,92 @@ class Ring extends ChartComponent {
         content: name,
         position: ['50%', '50%'],
         style: {
-          fontSize: 12,
-          fill: fontColor,
+          fontSize: theme.annotationFontSize,
+          fill: theme.annotationTitleFontColor,
           fontWeight: '300',
           textAlign: 'center'
         },
-        offsetY: -20
+        offsetY: -10
       }).text({
         position: ['50%', '50%'],
         content: summaryColumn ? BaseUtils.getSummaryValueDisplayString(summaryColumn, content.value, summaryMethod) : content.value,
         style: {
-          fontSize: 20,
-          fill: fontColor,
+          fontSize: theme.annotationFontSize,
+          fill: theme.annotationValueFontColor,
           textAlign: 'center'
         },
         offsetY: 20
       });
     };
-    this.onEnterRingChart = (ev, color, _ref) => {
+    this.onEnterRingChart = (evt, _ref) => {
       let {
         summaryColumn,
         summaryMethod
       } = _ref;
-      const item = ev.data.data;
+      const {
+        label_font_size
+      } = this.props.chart.config;
+      const {
+        theme
+      } = this.props;
+      const item = evt.data.data;
       this.chart.annotation().clear(true);
-      this.setAnnotation(item, color, {
+      this.currentChart.label('name*value*percent', (name, value, percent) => {
+        let displayValue;
+        if (item.name === name) {
+          displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summaryMethod);
+        } else {
+          displayValue = '';
+        }
+        return {
+          content: this.getLabel(displayValue, percent)
+        };
+      }, {
+        offset: this.isInnerLabel ? this.innerLabelOffset : this.outerLabelOffset,
+        style: {
+          fill: theme.ringLabelColor,
+          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      });
+      this.setAnnotation(item, {
         summaryColumn,
         summaryMethod
       });
       this.chart.render(true);
     };
-    this.onLeaveRingChart = (ev, color, _ref2) => {
+    this.onLeaveRingChart = (evt, _ref2) => {
       let {
         summaryColumn,
         summaryMethod
       } = _ref2;
+      const {
+        summary_method,
+        label_font_size
+      } = this.props.chart.config;
+      const {
+        theme
+      } = this.props;
       this.chart.annotation().clear(true);
+      this.currentChart.label('value*percent', (value, percent) => {
+        let displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          content: this.getLabel(displayValue, percent)
+        };
+      }, {
+        offset: this.isInnerLabel ? this.innerLabelOffset : this.outerLabelOffset,
+        style: {
+          fill: theme.ringLabelColor,
+          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      });
       this.setAnnotation({
         name: intl.get('Total'),
         value: this.sum
-      }, color, {
+      }, {
         summaryColumn,
         summaryMethod
       });
@@ -248,7 +293,7 @@ class Ring extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container ",
+      className: "sea-chart-container",
       ref: ref => this.container = ref
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",