@visactor/vchart-theme-demo-component 1.11.6-alpha.2 → 1.12.0

package/cjs/spec/businessFunnel.d.ts

@@ -0,0 +1,223 @@
+export declare const businessFunnelSpec: {
+    id: string;
+    type: string;
+    seriesField: string;
+    height: number;
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    data: ({
+        id: string;
+        values: {
+            x: string;
+            y: number;
+            percent: number;
+            average: number;
+        }[];
+    } | {
+        id: string;
+        values: {
+            x: string;
+            y0: number;
+            y1: number;
+            y: number;
+            percent: number;
+        }[];
+    })[];
+    series: ({
+        type: string;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        barWidth: string;
+        extensionMark: {
+            type: string;
+            dataId: string;
+            style: {
+                x: (datum: any, ctx: any) => any;
+                y: number;
+                textAlign: string;
+                fontSize: number;
+                stroke: boolean;
+                text: (datum: any) => {
+                    type: string;
+                    text: ({
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        fontWeight: string;
+                        lineHeight: number;
+                    } | {
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        lineHeight: number;
+                        fontWeight?: undefined;
+                    })[];
+                };
+            };
+        }[];
+        bar?: undefined;
+        stack?: undefined;
+        tooltip?: undefined;
+    } | {
+        type: string;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        bar: {
+            visible: boolean;
+            style?: undefined;
+        };
+        extensionMark: ({
+            type: string;
+            dataId: string;
+            dataKey: string;
+            style: {
+                points: (datum: any, ctx: any) => {
+                    x: any;
+                    y: any;
+                }[];
+                fill: string;
+                fillOpacity: number;
+                x?: undefined;
+                y?: undefined;
+                textAlign?: undefined;
+                fontSize?: undefined;
+                stroke?: undefined;
+                text?: undefined;
+            };
+            customShape?: undefined;
+        } | {
+            type: string;
+            dataId: string;
+            dataKey: string;
+            customShape: (data: any, attrs: any, path: any) => any;
+            style: {
+                points: (datum: any, ctx: any) => {
+                    x: any;
+                    y: any;
+                }[];
+                fill: string;
+                fillOpacity?: undefined;
+                x?: undefined;
+                y?: undefined;
+                textAlign?: undefined;
+                fontSize?: undefined;
+                stroke?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            dataId: string;
+            dataKey: string;
+            style: {
+                x: (datum: any, ctx: any) => any;
+                y: number;
+                textAlign: string;
+                fontSize: number;
+                stroke: boolean;
+                text: (datum: any) => {
+                    type: string;
+                    text: ({
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        fontWeight: string;
+                        lineHeight: number;
+                    } | {
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        lineHeight: number;
+                        fontWeight?: undefined;
+                    })[];
+                };
+                points?: undefined;
+                fill?: undefined;
+                fillOpacity?: undefined;
+            };
+            customShape?: undefined;
+        })[];
+        barWidth?: undefined;
+        stack?: undefined;
+        tooltip?: undefined;
+    } | {
+        type: string;
+        stack: boolean;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        barWidth: string;
+        bar: {
+            visible: boolean;
+            style: {
+                fill: string;
+                height: number;
+            };
+        };
+        tooltip: {
+            visible: boolean;
+        };
+        extensionMark?: undefined;
+    })[];
+    animation: boolean;
+    tooltip: {
+        mark: {
+            visible: boolean;
+        };
+        dimension: {
+            title: (data: any, params: any) => {
+                value: any;
+            };
+            content: (data: any, params: any) => ({
+                hasShape: boolean;
+                key: (datum: any) => any;
+                value: (datum: any) => any;
+            } | {
+                hasShape: boolean;
+                key: string;
+                value: (datum: any) => any;
+            })[];
+        };
+    };
+    axes: ({
+        orient: string;
+        seriesIndex: number[];
+        visible: boolean;
+        paddingInner?: undefined;
+        paddingOuter?: undefined;
+        domain?: undefined;
+        domainLine?: undefined;
+        tick?: undefined;
+        sampling?: undefined;
+        label?: undefined;
+    } | {
+        orient: string;
+        paddingInner: number;
+        paddingOuter: number;
+        domain: string[];
+        domainLine: {
+            visible: boolean;
+        };
+        tick: {
+            visible: boolean;
+        };
+        sampling: boolean;
+        label: {
+            style: {
+                fill: string;
+            };
+            autoLimit: boolean;
+            formatMethod: (label: any) => any;
+        };
+        seriesIndex?: undefined;
+        visible?: undefined;
+    })[];
+};

package/cjs/spec/businessFunnel.js

@@ -0,0 +1,261 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.businessFunnelSpec = void 0, exports.businessFunnelSpec = {
+    id: "businessFunnel",
+    type: "common",
+    seriesField: "color",
+    height: 300,
+    padding: {
+        top: 50,
+        bottom: 50,
+        left: 20,
+        right: 20
+    },
+    data: [ {
+        id: "main",
+        values: [ {
+            x: "大盘商品",
+            y: 11795e3,
+            percent: 100,
+            average: 1e6
+        }, {
+            x: "发生价格变化的商品",
+            y: 53e5,
+            percent: 4.52,
+            average: 1e6
+        }, {
+            x: "符合筛选条件的商品",
+            y: 174e3,
+            percent: .19,
+            average: 1e3
+        } ]
+    }, {
+        id: "transform",
+        values: [ {
+            x: "0-1",
+            y0: 11795e3,
+            y1: 53e5,
+            y: 6495e3,
+            percent: -95.48
+        }, {
+            x: "1-2",
+            y0: 53e5,
+            y1: 174e3,
+            y: 5126e3,
+            percent: -4.33
+        } ]
+    } ],
+    series: [ {
+        type: "bar",
+        id: "bar",
+        dataIndex: 0,
+        xField: "x",
+        yField: "y",
+        barWidth: "100%",
+        extensionMark: [ {
+            type: "text",
+            dataId: "main",
+            style: {
+                x: (datum, ctx) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,
+                y: -40,
+                textAlign: "center",
+                fontSize: 12,
+                stroke: !1,
+                text: datum => ({
+                    type: "rich",
+                    text: [ {
+                        text: `${datum.percent}%\n`,
+                        fill: "black",
+                        textAlign: "center",
+                        fontWeight: "bold",
+                        lineHeight: 20
+                    }, {
+                        text: `${datum.y}`,
+                        fill: "grey",
+                        textAlign: "center",
+                        lineHeight: 20
+                    } ]
+                })
+            }
+        } ]
+    }, {
+        type: "bar",
+        id: "transform",
+        dataIndex: 1,
+        xField: "x",
+        yField: "y",
+        bar: {
+            visible: !1
+        },
+        extensionMark: [ {
+            type: "polygon",
+            dataId: "transform",
+            dataKey: "x",
+            style: {
+                points: (datum, ctx) => {
+                    const {valueToX: valueToX, valueToY: valueToY, xBandwidth: xBandwidth} = ctx;
+                    return [ {
+                        x: valueToX(datum.x),
+                        y: valueToY(0) + 40
+                    }, {
+                        x: valueToX(datum.x) + xBandwidth(),
+                        y: valueToY(0) + 40
+                    }, {
+                        x: valueToX(datum.x) + xBandwidth(),
+                        y: -40
+                    }, {
+                        x: valueToX(datum.x),
+                        y: -40
+                    } ];
+                },
+                fill: "grey",
+                fillOpacity: .05
+            }
+        }, {
+            type: "polygon",
+            dataId: "transform",
+            dataKey: "x",
+            customShape: (data, attrs, path) => {
+                const points = attrs.points;
+                return path.moveTo(points[0].x, points[0].y), path.lineTo(points[1].x, points[1].y), 
+                path.lineTo(points[2].x, points[2].y), path.bezierCurveTo((points[0].x + points[1].x) / 2, points[2].y, (points[0].x + points[1].x) / 2, points[3].y, points[3].x, points[3].y), 
+                path.closePath(), path;
+            },
+            style: {
+                points: (datum, ctx) => {
+                    const {valueToX: valueToX, valueToY: valueToY, xBandwidth: xBandwidth} = ctx;
+                    return [ {
+                        x: valueToX(datum.x),
+                        y: valueToY(0)
+                    }, {
+                        x: valueToX(datum.x) + xBandwidth(),
+                        y: valueToY(0)
+                    }, {
+                        x: valueToX(datum.x) + xBandwidth(),
+                        y: valueToY(datum.y1)
+                    }, {
+                        x: valueToX(datum.x),
+                        y: valueToY(datum.y0)
+                    } ];
+                },
+                fill: "rgb(228, 232, 247)"
+            }
+        }, {
+            type: "text",
+            dataId: "transform",
+            dataKey: "x",
+            style: {
+                x: (datum, ctx) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,
+                y: -40,
+                textAlign: "center",
+                fontSize: 12,
+                stroke: !1,
+                text: datum => ({
+                    type: "rich",
+                    text: [ {
+                        text: `${datum.percent}%\n`,
+                        fill: "green",
+                        textAlign: "center",
+                        fontWeight: "bold",
+                        lineHeight: 20
+                    }, {
+                        text: `${datum.y}`,
+                        fill: "grey",
+                        textAlign: "center",
+                        lineHeight: 20
+                    } ]
+                })
+            }
+        } ]
+    }, {
+        type: "bar",
+        stack: !1,
+        id: "average",
+        dataIndex: 0,
+        xField: "x",
+        yField: "average",
+        barWidth: "100%",
+        bar: {
+            visible: !0,
+            style: {
+                fill: "orange",
+                height: 2
+            }
+        },
+        tooltip: {
+            visible: !1
+        }
+    } ],
+    animation: !1,
+    tooltip: {
+        mark: {
+            visible: !1
+        },
+        dimension: {
+            title: (data, params) => {
+                var _a, _b;
+                return {
+                    value: (null === (_b = null === (_a = data[0]) || void 0 === _a ? void 0 : _a.value) || void 0 === _b ? void 0 : _b.includes("-")) ? "流失情况" : data[0].value
+                };
+            },
+            content: (data, params) => {
+                var _a, _b;
+                return (null === (_b = null === (_a = data[0]) || void 0 === _a ? void 0 : _a.value) || void 0 === _b ? void 0 : _b.includes("-")) ? [ {
+                    hasShape: !1,
+                    key: "流失量",
+                    value: datum => datum.y
+                }, {
+                    hasShape: !1,
+                    key: "流失率",
+                    value: datum => `${datum.percent}%`
+                } ] : [ {
+                    hasShape: !1,
+                    key: datum => datum.x,
+                    value: datum => datum.y
+                }, {
+                    hasShape: !1,
+                    key: datum => `${datum.x}占比`,
+                    value: datum => `${datum.percent}%`
+                }, {
+                    hasShape: !1,
+                    key: "average",
+                    value: datum => datum.average
+                } ];
+            }
+        }
+    },
+    axes: [ {
+        orient: "left",
+        seriesIndex: [ 0, 1, 2 ],
+        visible: !1
+    }, {
+        orient: "bottom",
+        paddingInner: 0,
+        paddingOuter: 0,
+        domain: [ "大盘商品", "0-1", "发生价格变化的商品", "1-2", "符合筛选条件的商品" ],
+        domainLine: {
+            visible: !1
+        },
+        tick: {
+            visible: !1
+        },
+        sampling: !1,
+        label: {
+            style: {
+                fill: "black"
+            },
+            autoLimit: !0,
+            formatMethod: label => label.includes("-") ? {
+                type: "rich",
+                text: [ {
+                    image: '<svg t="1722236631845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9542" width="200" height="200"><path d="M779.8 240.9l225.9 225.9c25 25 25 65.5 0 90.5L779.8 783.1c-1.6 1.6-4.1 1.6-5.7 0l-62.2-62.2c-1.6-1.6-1.6-4.1 0-5.7l148.4-148.4c2.5-2.5 0.7-6.8-2.8-6.8H4c-2.2 0-4-1.8-4-4v-88c0-2.2 1.8-4 4-4h853.5c3.6 0 5.3-4.3 2.8-6.8L711.9 308.8c-1.6-1.6-1.6-4.1 0-5.7l62.2-62.2c1.6-1.6 4.1-1.6 5.7 0z" p-id="9543" fill="#707070"></path></svg>',
+                    height: 14,
+                    width: 10
+                } ]
+            } : label
+        }
+    } ]
+};
+//# sourceMappingURL=businessFunnel.js.map

package/cjs/spec/businessFunnel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spec/businessFunnel.ts"],"names":[],"mappings":";;;AAAa,QAAA,kBAAkB,GAAG;IAChC,EAAE,EAAE,gBAAgB;IACpB,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,OAAO;IACpB,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,MAAM;YACV,MAAM,EAAE;gBACN,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE;gBAC1D,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE;gBAC/D,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE;aAC5D;SACF;QACD;YACE,EAAE,EAAE,WAAW;YACf,MAAM,EAAE;gBACN,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE;gBACpE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE;aAClE;SACF;KACF;IACD,MAAM,EAAE;QACN;YACE,IAAI,EAAE,KAAK;YACX,EAAE,EAAE,KAAK;YACT,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,MAAM;YAChB,aAAa,EAAE;gBACb;oBACE,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE;wBACL,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC;wBACzE,CAAC,EAAE,CAAC,EAAE;wBACN,SAAS,EAAE,QAAQ;wBACnB,QAAQ,EAAE,EAAE;wBACZ,MAAM,EAAE,KAAK;wBACb,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE;4BACnB,OAAO;gCACL,IAAI,EAAE,MAAM;gCACZ,IAAI,EAAE;oCACJ;wCACE,IAAI,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK;wCAC3B,IAAI,EAAE,OAAO;wCACb,SAAS,EAAE,QAAQ;wCACnB,UAAU,EAAE,MAAM;wCAClB,UAAU,EAAE,EAAE;qCACf;oCACD,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;iCAC1E;6BACF,CAAC;wBACJ,CAAC;qBACF;iBACF;aACF;SACF;QACD;YACE,IAAI,EAAE,KAAK;YACX,EAAE,EAAE,WAAW;YACf,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACvB,aAAa,EAAE;gBACb;oBACE,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,WAAW;oBACnB,OAAO,EAAE,GAAG;oBACZ,KAAK,EAAE;wBACL,MAAM,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;4BAC/B,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;4BAC/C,OAAO;gCACL,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE;gCAC7C,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE;gCAC5D,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;gCAC/C,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;6BACjC,CAAC;wBACJ,CAAC;wBACD,IAAI,EAAE,MAAM;wBACZ,WAAW,EAAE,IAAI;qBAClB;iBACF;gBACD;oBACE,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,WAAW;oBACnB,OAAO,EAAE,GAAG;oBACZ,WAAW,EAAE,CAAC,IAAS,EAAE,KAAU,EAAE,IAAS,EAAE,EAAE;wBAChD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;wBAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtC,IAAI,CAAC,aAAa,CAChB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAC/B,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAC/B,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CACZ,CAAC;wBACF,IAAI,CAAC,SAAS,EAAE,CAAC;wBACjB,OAAO,IAAI,CAAC;oBACd,CAAC;oBACD,KAAK,EAAE;wBACL,MAAM,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;4BAC/B,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;4BAC/C,OAAO;gCACL,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE;gCACxC,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE;gCACvD,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;gCAC9D,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;6BAChD,CAAC;wBACJ,CAAC;wBACD,IAAI,EAAE,oBAAoB;qBAC3B;iBACF;gBACD;oBACE,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,WAAW;oBACnB,OAAO,EAAE,GAAG;oBACZ,KAAK,EAAE;wBACL,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC;wBACzE,CAAC,EAAE,CAAC,EAAE;wBACN,SAAS,EAAE,QAAQ;wBACnB,QAAQ,EAAE,EAAE;wBACZ,MAAM,EAAE,KAAK;wBACb,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE;4BACnB,OAAO;gCACL,IAAI,EAAE,MAAM;gCACZ,IAAI,EAAE;oCACJ;wCACE,IAAI,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK;wCAC3B,IAAI,EAAE,OAAO;wCACb,SAAS,EAAE,QAAQ;wCACnB,UAAU,EAAE,MAAM;wCAClB,UAAU,EAAE,EAAE;qCACf;oCACD,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;iCAC1E;6BACF,CAAC;wBACJ,CAAC;qBACF;iBACF;aACF;SACF;QACD;YACE,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,EAAE,EAAE,SAAS;YACb,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,MAAM;YAChB,GAAG,EAAE;gBACH,OAAO,EAAE,IAAI;gBACb,KAAK,EAAE;oBACL,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,CAAC;iBACV;aACF;YACD,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC5B;KACF;IACD,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE;QACP,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;QACxB,SAAS,EAAE;YACT,KAAK,EAAE,CAAC,IAAS,EAAE,MAAW,EAAE,EAAE;;gBAChC,OAAO;oBACL,KAAK,EAAE,CAAA,MAAA,MAAA,IAAI,CAAC,CAAC,CAAC,0CAAE,KAAK,0CAAE,QAAQ,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK;iBAC9D,CAAC;YACJ,CAAC;YACD,OAAO,EAAE,CAAC,IAAS,EAAE,MAAW,EAAE,EAAE;;gBAClC,MAAM,MAAM,GAAG,MAAA,MAAA,IAAI,CAAC,CAAC,CAAC,0CAAE,KAAK,0CAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;gBAC7C,IAAI,MAAM,EAAE;oBACV,OAAO;wBACL,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;wBAC/D,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,EAAE;qBAC5E,CAAC;iBACH;gBACD,OAAO;oBACL,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;oBACjF,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,EAAE;oBACpG,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE;iBAC1E,CAAC;YACJ,CAAC;SACF;KACF;IACD,IAAI,EAAE;QACJ,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE;QAC1D;YACE,MAAM,EAAE,QAAQ;YAChB,YAAY,EAAE,CAAC;YACf,YAAY,EAAE,CAAC;YACf,MAAM,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC;YACxD,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;gBACxB,SAAS,EAAE,IAAI;gBACf,YAAY,EAAE,CAAC,KAAU,EAAE,EAAE;oBAC3B,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;wBACvB,OAAO;4BACL,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE;gCACJ;oCACE,KAAK,EAAE,oeAAoe;oCAC3e,MAAM,EAAE,EAAE;oCACV,KAAK,EAAE,EAAE;iCACV;6BACF;yBACF,CAAC;qBACH;oBACD,OAAO,KAAK,CAAC;gBACf,CAAC;aACF;SACF;KACF;CACF,CAAC","file":"businessFunnel.js","sourcesContent":["export const businessFunnelSpec = {\n  id: 'businessFunnel',\n  type: 'common',\n  seriesField: 'color',\n  height: 300,\n  padding: { top: 50, bottom: 50, left: 20, right: 20 },\n  data: [\n    {\n      id: 'main',\n      values: [\n        { x: '大盘商品', y: 11795000, percent: 100, average: 1000000 },\n        { x: '发生价格变化的商品', y: 5300000, percent: 4.52, average: 1000000 },\n        { x: '符合筛选条件的商品', y: 174000, percent: 0.19, average: 1000 }\n      ]\n    },\n    {\n      id: 'transform',\n      values: [\n        { x: '0-1', y0: 11795000, y1: 5300000, y: 6495000, percent: -95.48 },\n        { x: '1-2', y0: 5300000, y1: 174000, y: 5126000, percent: -4.33 }\n      ]\n    }\n  ],\n  series: [\n    {\n      type: 'bar',\n      id: 'bar',\n      dataIndex: 0,\n      xField: 'x',\n      yField: 'y',\n      barWidth: '100%',\n      extensionMark: [\n        {\n          type: 'text',\n          dataId: 'main',\n          style: {\n            x: (datum: any, ctx: any) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,\n            y: -40,\n            textAlign: 'center',\n            fontSize: 12,\n            stroke: false,\n            text: (datum: any) => {\n              return {\n                type: 'rich',\n                text: [\n                  {\n                    text: `${datum.percent}%\\n`,\n                    fill: 'black',\n                    textAlign: 'center',\n                    fontWeight: 'bold',\n                    lineHeight: 20\n                  },\n                  { text: `${datum.y}`, fill: 'grey', textAlign: 'center', lineHeight: 20 }\n                ]\n              };\n            }\n          }\n        }\n      ]\n    },\n    {\n      type: 'bar',\n      id: 'transform',\n      dataIndex: 1,\n      xField: 'x',\n      yField: 'y',\n      bar: { visible: false },\n      extensionMark: [\n        {\n          type: 'polygon',\n          dataId: 'transform',\n          dataKey: 'x',\n          style: {\n            points: (datum: any, ctx: any) => {\n              const { valueToX, valueToY, xBandwidth } = ctx;\n              return [\n                { x: valueToX(datum.x), y: valueToY(0) + 40 },\n                { x: valueToX(datum.x) + xBandwidth(), y: valueToY(0) + 40 },\n                { x: valueToX(datum.x) + xBandwidth(), y: -40 },\n                { x: valueToX(datum.x), y: -40 }\n              ];\n            },\n            fill: 'grey',\n            fillOpacity: 0.05\n          }\n        },\n        {\n          type: 'polygon',\n          dataId: 'transform',\n          dataKey: 'x',\n          customShape: (data: any, attrs: any, path: any) => {\n            const points = attrs.points;\n            path.moveTo(points[0].x, points[0].y);\n            path.lineTo(points[1].x, points[1].y);\n            path.lineTo(points[2].x, points[2].y);\n            path.bezierCurveTo(\n              (points[0].x + points[1].x) / 2,\n              points[2].y,\n              (points[0].x + points[1].x) / 2,\n              points[3].y,\n              points[3].x,\n              points[3].y\n            );\n            path.closePath();\n            return path;\n          },\n          style: {\n            points: (datum: any, ctx: any) => {\n              const { valueToX, valueToY, xBandwidth } = ctx;\n              return [\n                { x: valueToX(datum.x), y: valueToY(0) },\n                { x: valueToX(datum.x) + xBandwidth(), y: valueToY(0) },\n                { x: valueToX(datum.x) + xBandwidth(), y: valueToY(datum.y1) },\n                { x: valueToX(datum.x), y: valueToY(datum.y0) }\n              ];\n            },\n            fill: 'rgb(228, 232, 247)'\n          }\n        },\n        {\n          type: 'text',\n          dataId: 'transform',\n          dataKey: 'x',\n          style: {\n            x: (datum: any, ctx: any) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,\n            y: -40,\n            textAlign: 'center',\n            fontSize: 12,\n            stroke: false,\n            text: (datum: any) => {\n              return {\n                type: 'rich',\n                text: [\n                  {\n                    text: `${datum.percent}%\\n`,\n                    fill: 'green',\n                    textAlign: 'center',\n                    fontWeight: 'bold',\n                    lineHeight: 20\n                  },\n                  { text: `${datum.y}`, fill: 'grey', textAlign: 'center', lineHeight: 20 }\n                ]\n              };\n            }\n          }\n        }\n      ]\n    },\n    {\n      type: 'bar',\n      stack: false,\n      id: 'average',\n      dataIndex: 0,\n      xField: 'x',\n      yField: 'average',\n      barWidth: '100%',\n      bar: {\n        visible: true,\n        style: {\n          fill: 'orange',\n          height: 2\n        }\n      },\n      tooltip: { visible: false }\n    }\n  ],\n  animation: false,\n  tooltip: {\n    mark: { visible: false },\n    dimension: {\n      title: (data: any, params: any) => {\n        return {\n          value: data[0]?.value?.includes('-') ? '流失情况' : data[0].value\n        };\n      },\n      content: (data: any, params: any) => {\n        const isLose = data[0]?.value?.includes('-');\n        if (isLose) {\n          return [\n            { hasShape: false, key: '流失量', value: (datum: any) => datum.y },\n            { hasShape: false, key: '流失率', value: (datum: any) => `${datum.percent}%` }\n          ];\n        }\n        return [\n          { hasShape: false, key: (datum: any) => datum.x, value: (datum: any) => datum.y },\n          { hasShape: false, key: (datum: any) => `${datum.x}占比`, value: (datum: any) => `${datum.percent}%` },\n          { hasShape: false, key: `average`, value: (datum: any) => datum.average }\n        ];\n      }\n    }\n  },\n  axes: [\n    { orient: 'left', seriesIndex: [0, 1, 2], visible: false },\n    {\n      orient: 'bottom',\n      paddingInner: 0,\n      paddingOuter: 0,\n      domain: ['大盘商品', '0-1', '发生价格变化的商品', '1-2', '符合筛选条件的商品'],\n      domainLine: { visible: false },\n      tick: { visible: false },\n      sampling: false,\n      label: {\n        style: { fill: 'black' },\n        autoLimit: true,\n        formatMethod: (label: any) => {\n          if (label.includes('-')) {\n            return {\n              type: 'rich',\n              text: [\n                {\n                  image: `<svg t=\"1722236631845\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"9542\" width=\"200\" height=\"200\"><path d=\"M779.8 240.9l225.9 225.9c25 25 25 65.5 0 90.5L779.8 783.1c-1.6 1.6-4.1 1.6-5.7 0l-62.2-62.2c-1.6-1.6-1.6-4.1 0-5.7l148.4-148.4c2.5-2.5 0.7-6.8-2.8-6.8H4c-2.2 0-4-1.8-4-4v-88c0-2.2 1.8-4 4-4h853.5c3.6 0 5.3-4.3 2.8-6.8L711.9 308.8c-1.6-1.6-1.6-4.1 0-5.7l62.2-62.2c1.6-1.6 4.1-1.6 5.7 0z\" p-id=\"9543\" fill=\"#707070\"></path></svg>`,\n                  height: 14,\n                  width: 10\n                }\n              ]\n            };\n          }\n          return label;\n        }\n      }\n    }\n  ]\n};\n"]}

package/cjs/spec/combination.d.ts

@@ -0,0 +1,48 @@
+export declare const CombinationSpec: {
+    type: string;
+    seriesField: string;
+    data: {
+        id: string;
+        values: {
+            x: string;
+            type: string;
+            y: number;
+        }[];
+    }[];
+    series: ({
+        type: string;
+        dataIndex: number;
+        label: {
+            visible: boolean;
+        };
+        seriesField: string;
+        xField: string[];
+        yField: string;
+        stack?: undefined;
+    } | {
+        type: string;
+        dataIndex: number;
+        label: {
+            visible: boolean;
+        };
+        seriesField: string;
+        xField: string;
+        yField: string;
+        stack: boolean;
+    })[];
+    axes: ({
+        orient: string;
+        label?: undefined;
+        type?: undefined;
+    } | {
+        orient: string;
+        label: {
+            visible: boolean;
+        };
+        type: string;
+    })[];
+    legends: {
+        visible: boolean;
+        orient: string;
+    };
+};

package/cjs/spec/combination.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.CombinationSpec = void 0, exports.CombinationSpec = {
+    type: "common",
+    seriesField: "color",
+    data: [ {
+        id: "id0",
+        values: [ {
+            x: "周一",
+            type: "早餐",
+            y: 15
+        }, {
+            x: "周一",
+            type: "午餐",
+            y: 25
+        }, {
+            x: "周二",
+            type: "早餐",
+            y: 12
+        }, {
+            x: "周二",
+            type: "午餐",
+            y: 30
+        }, {
+            x: "周三",
+            type: "早餐",
+            y: 15
+        }, {
+            x: "周三",
+            type: "午餐",
+            y: 24
+        }, {
+            x: "周四",
+            type: "早餐",
+            y: 10
+        }, {
+            x: "周四",
+            type: "午餐",
+            y: 25
+        }, {
+            x: "周五",
+            type: "早餐",
+            y: 13
+        }, {
+            x: "周五",
+            type: "午餐",
+            y: 20
+        }, {
+            x: "周六",
+            type: "早餐",
+            y: 10
+        }, {
+            x: "周六",
+            type: "午餐",
+            y: 22
+        }, {
+            x: "周日",
+            type: "早餐",
+            y: 12
+        }, {
+            x: "周日",
+            type: "午餐",
+            y: 19
+        } ]
+    }, {
+        id: "id1",
+        values: [ {
+            x: "周一",
+            type: "饮料",
+            y: 22
+        }, {
+            x: "周二",
+            type: "饮料",
+            y: 43
+        }, {
+            x: "周三",
+            type: "饮料",
+            y: 33
+        }, {
+            x: "周四",
+            type: "饮料",
+            y: 22
+        }, {
+            x: "周五",
+            type: "饮料",
+            y: 10
+        }, {
+            x: "周六",
+            type: "饮料",
+            y: 30
+        }, {
+            x: "周日",
+            type: "饮料",
+            y: 50
+        } ]
+    } ],
+    series: [ {
+        type: "bar",
+        dataIndex: 0,
+        label: {
+            visible: !0
+        },
+        seriesField: "type",
+        xField: [ "x", "type" ],
+        yField: "y"
+    }, {
+        type: "line",
+        dataIndex: 1,
+        label: {
+            visible: !0
+        },
+        seriesField: "type",
+        xField: "x",
+        yField: "y",
+        stack: !1
+    } ],
+    axes: [ {
+        orient: "left"
+    }, {
+        orient: "bottom",
+        label: {
+            visible: !0
+        },
+        type: "band"
+    } ],
+    legends: {
+        visible: !0,
+        orient: "bottom"
+    }
+};
+//# sourceMappingURL=combination.js.map