feat: pie-chart support negative value

src/chart/pie/PieSeries.ts

@@ -20,8 +20,8 @@
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
 import * as modelUtil from '../../util/model';
-import {getPercentWithPrecision} from '../../util/number';
-import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
+import { getPercentWithPrecision } from '../../util/number';
+import { makeSeriesEncodeForNameBased } from '../../data/helper/sourceHelper';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import SeriesModel from '../../model/Series';
 import {
@@ -119,6 +119,9 @@ export interface PieSeriesOption extends
     animationType?: 'expansion' | 'scale'
     animationTypeUpdate?: 'transition' | 'expansion'
 
+    showEmptyCircle?: boolean;
+    emptyCircleStyle?: PieItemStyleOption;
+
     data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]
 }
 
@@ -278,6 +281,12 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
             borderJoin: 'round'
         },
 
+        showEmptyCircle: true,
+        emptyCircleStyle: {
+            color: 'lightgray',
+            opacity: 1
+        },
+
         labelLayout: {
             // Hide the overlapped label.
             hideOverlap: true

src/chart/pie/PieView.ts

@@ -32,6 +32,7 @@ import labelLayout from './labelLayout';
 import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getSectorCornerRadius } from '../helper/pieHelper';
+import { getBasicPieLayout } from './pieLayout';
 
 /**
  * Piece of pie including Sector, Label, LabelLine
@@ -218,6 +219,7 @@ class PieView extends ChartView {
 
     private _sectorGroup: graphic.Group;
     private _data: List;
+    private _emptyCircleSector: graphic.Sector;
 
     init(): void {
         const sectorGroup = new graphic.Group();
@@ -242,6 +244,20 @@ class PieView extends ChartView {
             }
         }
 
+        // remove empty-circle if it exists
+        if (this._emptyCircleSector) {
+            group.remove(this._emptyCircleSector);
+        }
+        // when all data are filtered, show lightgray empty circle
+        if (data.count() === 0 && seriesModel.get('showEmptyCircle')) {
+            const sector = new graphic.Sector({
+                shape: getBasicPieLayout(seriesModel, api)
+            });
+            sector.useStyle(seriesModel.getModel('emptyCircleStyle').getItemStyle());
+            this._emptyCircleSector = sector;
+            group.add(sector);
+        }
+
         data.diff(oldData)
             .add(function (idx) {
                 const piePiece = new PiePiece(data, idx, startAngle);

src/chart/pie/install.ts

@@ -25,6 +25,7 @@ import dataFilter from '../../processor/dataFilter';
 import { curry } from 'zrender/src/core/util';
 import PieView from './PieView';
 import PieSeriesModel from './PieSeries';
+import negativeDataFilter from '../../processor/negativeDataFilter';
 
 export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerChartView(PieView);
@@ -34,4 +35,5 @@ export function install(registers: EChartsExtensionInstallRegisters) {
 
     registers.registerLayout(curry(pieLayout, 'pie'));
     registers.registerProcessor(dataFilter('pie'));
+    registers.registerProcessor(negativeDataFilter('pie'));
 }

src/chart/pie/pieLayout.ts

@@ -17,12 +17,13 @@
 * under the License.
 */
 
-import {parsePercent, linearMap} from '../../util/number';
+import { parsePercent, linearMap } from '../../util/number';
 import * as layout from '../../util/layout';
 import * as zrUtil from 'zrender/src/core/util';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import PieSeriesModel from './PieSeries';
+import { SectorShape } from 'zrender/src/graphic/shape/Sector';
 
 const PI2 = Math.PI * 2;
 const RADIAN = Math.PI / 180;
@@ -36,6 +37,34 @@ function getViewRect(seriesModel: PieSeriesModel, api: ExtensionAPI) {
     );
 }
 
+export function getBasicPieLayout(seriesModel: PieSeriesModel, api: ExtensionAPI):
+    Pick<SectorShape, 'cx' | 'cy' | 'r' | 'r0'> {
+    const viewRect = getViewRect(seriesModel, api);
+
+    let center = seriesModel.get('center');
+    let radius = seriesModel.get('radius');
+
+    if (!zrUtil.isArray(radius)) {
+        radius = [0, radius];
+    }
+    if (!zrUtil.isArray(center)) {
+        center = [center, center];
+    }
+    const width = parsePercent(viewRect.width, api.getWidth());
+    const height = parsePercent(viewRect.height, api.getHeight());
+    const size = Math.min(width, height);
+    const cx = parsePercent(center[0], width) + viewRect.x;
+    const cy = parsePercent(center[1], height) + viewRect.y;
+    const r0 = parsePercent(radius[0], size / 2);
+    const r = parsePercent(radius[1], size / 2);
+    return {
+        cx,
+        cy,
+        r0,
+        r
+    };
+}
+
 export default function pieLayout(
     seriesType: 'pie',
     ecModel: GlobalModel,
@@ -46,23 +75,7 @@ export default function pieLayout(
         const valueDim = data.mapDimension('value');
         const viewRect = getViewRect(seriesModel, api);
 
-        let center = seriesModel.get('center');
-        let radius = seriesModel.get('radius');
-
-        if (!zrUtil.isArray(radius)) {
-            radius = [0, radius];
-        }
-        if (!zrUtil.isArray(center)) {
-            center = [center, center];
-        }
-
-        const width = parsePercent(viewRect.width, api.getWidth());
-        const height = parsePercent(viewRect.height, api.getHeight());
-        const size = Math.min(width, height);
-        const cx = parsePercent(center[0], width) + viewRect.x;
-        const cy = parsePercent(center[1], height) + viewRect.y;
-        const r0 = parsePercent(radius[0], size / 2);
-        const r = parsePercent(radius[1], size / 2);
+        const { cx, cy, r, r0 } = getBasicPieLayout(seriesModel, api);
 
         const startAngle = -seriesModel.get('startAngle') * RADIAN;
 

src/processor/dataFilter.ts

@@ -1,5 +1,3 @@
-import { StageHandler } from '../util/types';
-
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -19,6 +17,8 @@ import { StageHandler } from '../util/types';
 * under the License.
 */
 
+import { StageHandler } from '../util/types';
+
 export default function dataFilter(seriesType: string): StageHandler {
     return {
         seriesType: seriesType,

src/processor/negativeDataFilter.ts

@@ -0,0 +1,38 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { StageHandler } from '../util/types';
+
+export default function negativeDataFilter(seriesType: string): StageHandler {
+    return {
+        seriesType: seriesType,
+        reset: function (seriesModel, ecModel) {
+            const data = seriesModel.getData();
+            data.filterSelf(function (idx) {
+                // handle negative value condition
+                const valueDim = data.mapDimension('value');
+                const curValue = data.get(valueDim, idx);
+                if (typeof curValue === 'number' && !isNaN(curValue) && curValue < 0) {
+                    return false;
+                }
+                return true;
+            });
+        }
+    };
+}