feat(funnel): add funnel new styles #14863

src/chart/funnel/FunnelSeries.ts

@@ -48,6 +48,10 @@ type FunnelLabelOption = Omit<SeriesLabelOption, 'position'> & {
         | 'outer' | 'inner' | 'center' | 'rightTop' | 'rightBottom' | 'leftTop' | 'leftBottom'
 };
 
+type FunnelRateLabelOption = Omit<SeriesLabelOption, 'position'> & {
+    precision: number
+};
+
 interface FunnelStatesMixin {
     emphasis?: DefaultStatesMixinEmphasis
 }
@@ -59,6 +63,8 @@ export interface FunnelStateOption<TCbParams = never> {
     itemStyle?: ItemStyleOption<TCbParams>
     label?: FunnelLabelOption
     labelLine?: LabelLineOption
+    rateLabel?: FunnelRateLabelOption
+    overallRateLabel?: FunnelRateLabelOption
 }
 
 export interface FunnelDataItemOption
@@ -95,6 +101,12 @@ export interface FunnelSeriesOption
     funnelAlign?: HorizontalAlign | VerticalAlign
 
     data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | FunnelDataItemOption)[]
+
+    exitWidth?: string
+
+    showRate?: boolean
+
+    dynamicHeight?: boolean
 }
 
 class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
@@ -172,6 +184,14 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
             position: 'outer'
             // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
         },
+        rateLabel: {
+            show: true,
+            precision: 2
+        },
+        overallRateLabel: {
+            show: true,
+            precision: 2
+        },
         labelLine: {
             show: true,
             length: 20,

src/chart/funnel/FunnelView.ts

@@ -16,27 +16,100 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-
+import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import ChartView from '../../view/Chart';
-import FunnelSeriesModel, {FunnelDataItemOption} from './FunnelSeries';
+import FunnelSeriesModel, { FunnelDataItemOption } from './FunnelSeries';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import SeriesData from '../../data/SeriesData';
-import { ColorString } from '../../util/types';
+import {
+    ColorString,
+    DisplayState,
+    InterpolatableValue,
+    SeriesDataType
+} from '../../util/types';
 import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { saveOldStyle } from '../../animation/basicTransition';
 
 const opacityAccessPath = ['itemStyle', 'opacity'] as const;
 
+const rateLabelFetcher = {
+    getFormattedLabel(
+        // In MapDraw case it can be string (region name)
+        labelDataIndex: number,
+        status: DisplayState,
+        dataType?: SeriesDataType,
+        labelDimIndex?: number,
+        formatter?: string | ((params: object) => string),
+        // If provided, the implementation of `getFormattedLabel` can use it
+        // to generate the final label text.
+        extendParams?: {
+            interpolatedValue: InterpolatableValue
+        }
+    ): string {
+        status = status || 'normal';
+        const { hostModel, layout } = this as unknown as { hostModel: FunnelSeriesModel, layout: any };
+        const data = hostModel.getData(dataType);
+
+        if (!formatter) {
+            const itemModel = data.getItemModel(labelDataIndex);
+            // @ts-ignore
+            formatter = itemModel.get(status === 'normal'
+                ? ['rateLabel', 'formatter']
+                : [status, 'rateLabel', 'formatter']
+            );
+        }
+
+        const { rate, isLastPiece, nextName, preName, preDataIndex, nextDataIndex } = layout;
+
+        if (isLastPiece) {
+            const itemModel = data.getItemModel(labelDataIndex);
+            // @ts-ignore
+            formatter = itemModel.get(status === 'normal'
+                ? ['overallRateLabel', 'formatter']
+                : [status, 'overallRateLabel', 'formatter']
+            );
+        }
+
+        type RateParams = {
+            rate: string,
+            preName: string,
+            nextName: string,
+            preDataIndex: string,
+            nextDataIndex: string,
+            formatter: string | ((params: object) => string)
+        };
+
+        const params: RateParams = {
+            rate, // a
+            preName, // b
+            nextName, // c
+            preDataIndex, // d
+            nextDataIndex, // e
+            formatter
+        };
+
+        if (zrUtil.isFunction(formatter)) {
+            return formatter(params);
+        }
+
+        return '';
+    }
+};
+
 /**
  * Piece of pie including Sector, Label, LabelLine
  */
 class FunnelPiece extends graphic.Polygon {
 
-    constructor(data: SeriesData, idx: number) {
+    /**
+     * @param type judge is data blocks or conversion blocks
+     */
+
+    constructor(data: SeriesData, idx: number, type: 'data' | 'rate') {
         super();
 
         const polygon = this;
@@ -45,10 +118,10 @@ class FunnelPiece extends graphic.Polygon {
         polygon.setTextContent(text);
         this.setTextGuideLine(labelLine);
 
-        this.updateData(data, idx, true);
+        this.updateData(data, idx, type, true);
     }
 
-    updateData(data: SeriesData, idx: number, firstCreate?: boolean) {
+    updateData(data: SeriesData, idx: number, type: 'data' | 'rate', firstCreate?: boolean) {
 
         const polygon = this;
 
@@ -58,17 +131,29 @@ class FunnelPiece extends graphic.Polygon {
         const emphasisModel = itemModel.getModel('emphasis');
         let opacity = itemModel.get(opacityAccessPath);
         opacity = opacity == null ? 1 : opacity;
+        if (type === 'rate') {
+            // the opacity of rate piece is half of data
+            opacity /= 2;
+        }
 
         if (!firstCreate) {
             saveOldStyle(polygon);
         }
+        // hide the last rate piece and when it not the last one show it again
+        polygon.invisible = false;
+        if (layout.isLastPiece && type === 'rate') {
+            // hide last rate piece
+            polygon.invisible = true;
+        }
         // Update common style
         polygon.useStyle(data.getItemVisual(idx, 'style'));
         polygon.style.lineJoin = 'round';
 
+        const points = type === 'data' ? layout.points : layout.ratePoints;
+
         if (firstCreate) {
             polygon.setShape({
-                points: layout.points
+                points
             });
             polygon.style.opacity = 0;
             graphic.initProps(polygon, {
@@ -83,49 +168,62 @@ class FunnelPiece extends graphic.Polygon {
                     opacity: opacity
                 },
                 shape: {
-                    points: layout.points
+                    points
                 }
             }, seriesModel, idx);
         }
 
-        setStatesStylesFromModel(polygon, itemModel);
-
-        this._updateLabel(data, idx);
+        this._updateLabel(data, idx, type);
 
-        toggleHoverEmphasis(
-            this,
-            emphasisModel.get('focus'),
-            emphasisModel.get('blurScope'),
-            emphasisModel.get('disabled')
-        );
+        setStatesStylesFromModel(polygon, itemModel);
+        if (type === 'data') {
+            toggleHoverEmphasis(
+                this,
+                emphasisModel.get('focus'),
+                emphasisModel.get('blurScope'),
+                emphasisModel.get('disabled')
+            );
+        }
     }
 
-    _updateLabel(data: SeriesData, idx: number) {
+    _updateLabel(data: SeriesData, idx: number, type: 'data' | 'rate') {
         const polygon = this;
         const labelLine = this.getTextGuideLine();
         const labelText = polygon.getTextContent();
 
-        const seriesModel = data.hostModel;
+        const seriesModel = data.hostModel as FunnelSeriesModel;
         const itemModel = data.getItemModel<FunnelDataItemOption>(idx);
         const layout = data.getItemLayout(idx);
-        const labelLayout = layout.label;
+        const labelLayout = layout[type === 'data' ? 'label' : 'rateLabel'];
         const style = data.getItemVisual(idx, 'style');
         const visualColor = style.fill as ColorString;
+        // bind this to data of rateLabelFetherFunc
+        let rateFetcher: any; // clone default fechter
+        if (type === 'rate') {
+            rateFetcher = {
+                getFormattedLabel: rateLabelFetcher.getFormattedLabel.bind(
+                    { hostModel: data.hostModel, layout }
+                )
+            };
+        }
+        const rateLabel = layout.isLastPiece ? 'overallRateLabel' : 'rateLabel';
 
         setLabelStyle(
             // position will not be used in setLabelStyle
             labelText,
-            getLabelStatesModels(itemModel),
+            getLabelStatesModels(itemModel, type === 'data' ? undefined : rateLabel),
             {
-                labelFetcher: data.hostModel as FunnelSeriesModel,
+                labelFetcher: type === 'data' ? data.hostModel as FunnelSeriesModel : rateFetcher,
                 labelDataIndex: idx,
                 defaultOpacity: style.opacity,
-                defaultText: data.getName(idx)
+                defaultText: type === 'data' ? data.getName(idx) : layout.rate
             },
-            { normal: {
-                align: labelLayout.textAlign,
-                verticalAlign: labelLayout.verticalAlign
-            } }
+            {
+                normal: {
+                    align: labelLayout.textAlign,
+                    verticalAlign: labelLayout.verticalAlign
+                }
+            }
         );
 
         polygon.setTextConfig({
@@ -167,6 +265,9 @@ class FunnelPiece extends graphic.Polygon {
             stroke: visualColor
         });
     }
+
+    // relate ratePiece with dataPiece
+    ratePiece: FunnelPiece;
 }
 
 class FunnelView extends ChartView {
@@ -182,26 +283,64 @@ class FunnelView extends ChartView {
         const oldData = this._data;
 
         const group = this.group;
+        // rate in other two mode did not support yet
+        const showRate =
+            seriesModel.get('showRate')
+            && !(
+                seriesModel.get('dynamicHeight')
+                || seriesModel.get('sort') === 'none'
+            );
 
         data.diff(oldData)
             .add(function (idx) {
-                const funnelPiece = new FunnelPiece(data, idx);
+                const funnelPiece = new FunnelPiece(data, idx, 'data');
 
                 data.setItemGraphicEl(idx, funnelPiece);
 
                 group.add(funnelPiece);
+
+                if (showRate) {
+                    const ratePiece = new FunnelPiece(data, idx, 'rate');
+                    group.add(ratePiece);
+                    funnelPiece.ratePiece = ratePiece;
+                }
             })
             .update(function (newIdx, oldIdx) {
                 const piece = oldData.getItemGraphicEl(oldIdx) as FunnelPiece;
 
-                piece.updateData(data, newIdx);
+                piece.updateData(data, newIdx, 'data');
 
                 group.add(piece);
                 data.setItemGraphicEl(newIdx, piece);
+
+                // rate funnel piece may remove in this mount func
+                const ratePiece = piece.ratePiece;
+                if (showRate) {
+                    if (ratePiece) {
+                        ratePiece.updateData(data, newIdx, 'rate');
+                        group.add(ratePiece);
+                    }
+                    else {
+                        const ratePiece = new FunnelPiece(data, newIdx, 'rate');
+                        group.add(ratePiece);
+                        piece.ratePiece = ratePiece;
+                    }
+                }
+                else {
+                    if (ratePiece) {
+                        graphic.removeElementWithFadeOut(ratePiece, seriesModel, oldIdx);
+                        piece.ratePiece = null;
+                    }
+                }
             })
             .remove(function (idx) {
-                const piece = oldData.getItemGraphicEl(idx);
+                const piece = oldData.getItemGraphicEl(idx) as FunnelPiece;
                 graphic.removeElementWithFadeOut(piece, seriesModel, idx);
+
+                if (showRate) {
+                    const ratePiece = piece.ratePiece;
+                    graphic.removeElementWithFadeOut(ratePiece, seriesModel, idx);
+                }
             })
             .execute();
 
@@ -213,7 +352,7 @@ class FunnelView extends ChartView {
         this._data = null;
     }
 
-    dispose() {}
+    dispose() { }
 }