@visactor/vchart-theme-demo-component 1.11.6-alpha.1 → 1.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/spec/businessFunnel.d.ts +223 -0
- package/cjs/spec/businessFunnel.js +261 -0
- package/cjs/spec/businessFunnel.js.map +1 -0
- package/cjs/spec/combination.d.ts +48 -0
- package/cjs/spec/combination.js +134 -0
- package/cjs/spec/combination.js.map +1 -0
- package/cjs/spec/gauge.d.ts +1 -0
- package/cjs/spec/gauge.js +2 -2
- package/cjs/spec/gauge.js.map +1 -1
- package/cjs/spec/indicatorSankey.js +2 -1
- package/cjs/vchart-chart-hub-theme/chart-list.js +13 -1
- package/cjs/vchart-chart-hub-theme/chart-list.js.map +1 -1
- package/cjs/vchart-chart-hub-theme/charts.js.map +1 -1
- package/esm/spec/businessFunnel.d.ts +223 -0
- package/esm/spec/businessFunnel.js +257 -0
- package/esm/spec/businessFunnel.js.map +1 -0
- package/esm/spec/combination.d.ts +48 -0
- package/esm/spec/combination.js +130 -0
- package/esm/spec/combination.js.map +1 -0
- package/esm/spec/gauge.d.ts +1 -0
- package/esm/spec/gauge.js +2 -2
- package/esm/spec/gauge.js.map +1 -1
- package/esm/spec/indicatorSankey.js +2 -1
- package/esm/vchart-chart-hub-theme/chart-list.js +18 -0
- package/esm/vchart-chart-hub-theme/chart-list.js.map +1 -1
- package/esm/vchart-chart-hub-theme/charts.js.map +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/spec/combination.ts"],"names":[],"mappings":"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","file":"combination.js","sourcesContent":["export const CombinationSpec = {\n type: 'common',\n seriesField: 'color',\n data: [\n {\n id: 'id0',\n values: [\n { x: '周一', type: '早餐', y: 15 },\n { x: '周一', type: '午餐', y: 25 },\n { x: '周二', type: '早餐', y: 12 },\n { x: '周二', type: '午餐', y: 30 },\n { x: '周三', type: '早餐', y: 15 },\n { x: '周三', type: '午餐', y: 24 },\n { x: '周四', type: '早餐', y: 10 },\n { x: '周四', type: '午餐', y: 25 },\n { x: '周五', type: '早餐', y: 13 },\n { x: '周五', type: '午餐', y: 20 },\n { x: '周六', type: '早餐', y: 10 },\n { x: '周六', type: '午餐', y: 22 },\n { x: '周日', type: '早餐', y: 12 },\n { x: '周日', type: '午餐', y: 19 }\n ]\n },\n {\n id: 'id1',\n values: [\n { x: '周一', type: '饮料', y: 22 },\n { x: '周二', type: '饮料', y: 43 },\n { x: '周三', type: '饮料', y: 33 },\n { x: '周四', type: '饮料', y: 22 },\n { x: '周五', type: '饮料', y: 10 },\n { x: '周六', type: '饮料', y: 30 },\n { x: '周日', type: '饮料', y: 50 }\n ]\n }\n ],\n series: [\n {\n type: 'bar',\n dataIndex: 0,\n label: { visible: true },\n seriesField: 'type',\n //@ts-ignore\n dataIndex: 0,\n xField: ['x', 'type'],\n yField: 'y'\n },\n {\n type: 'line',\n dataIndex: 1,\n label: { visible: true },\n seriesField: 'type',\n xField: 'x',\n yField: 'y',\n stack: false\n }\n ],\n axes: [{ orient: 'left' }, { orient: 'bottom', label: { visible: true }, type: 'band' }],\n legends: {\n visible: true,\n orient: 'bottom'\n }\n};\n"]}
|
package/cjs/spec/gauge.d.ts
CHANGED
package/cjs/spec/gauge.js
CHANGED
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
17
17
|
innerRadius: .7,
|
|
18
18
|
startAngle: -180,
|
|
19
19
|
endAngle: 0,
|
|
20
|
+
centerY: "60%",
|
|
20
21
|
indicator: [ {
|
|
21
22
|
visible: !0,
|
|
22
23
|
title: {
|
|
@@ -59,5 +60,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
} ]
|
|
62
|
-
};
|
|
63
|
-
//# sourceMappingURL=gauge.js.map
|
|
63
|
+
};
|
package/cjs/spec/gauge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/spec/gauge.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,EAAE;iBACV;aACF;SACF;KACF;IACD,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,CAAC,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE;QACT;YACE,OAAO,EAAE,IAAI;YACb,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;iBAChB;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ;YACE,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,OAAO;YACf,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAC7D,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAChE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;SACjE;KACF;CACF,CAAC","file":"gauge.js","sourcesContent":["export const gaugeSpec = {\n type: 'gauge',\n data: [\n {\n id: 'id0',\n values: [\n {\n type: '目标A',\n value: 45\n }\n ]\n }\n ],\n categoryField: 'type',\n valueField: 'value',\n outerRadius: 0.8,\n innerRadius: 0.7,\n startAngle: -180,\n endAngle: 0,\n indicator: [\n {\n visible: true,\n title: {\n style: {\n text: '45',\n fontSize: 60,\n fontWeight: 800\n }\n }\n }\n ],\n axes: [\n {\n type: 'linear',\n orient: 'angle',\n min: 0,\n max: 50,\n offset: 20,\n radius: 0.81,\n grid: { visible: false },\n tick: { visible: true, tickSize: 5, style: { lineWidth: 1 } },\n subTick: { visible: true, tickSize: 3, style: { lineWidth: 1 } },\n label: { visible: true, style: { fill: 'black', fontSize: 12 } }\n }\n ]\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/spec/gauge.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,EAAE;iBACV;aACF;SACF;KACF;IACD,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,CAAC,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,KAAK;IACd,SAAS,EAAE;QACT;YACE,OAAO,EAAE,IAAI;YACb,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;iBAChB;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ;YACE,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,OAAO;YACf,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAC7D,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAChE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;SACjE;KACF;CACF,CAAC","file":"gauge.js","sourcesContent":["export const gaugeSpec = {\n type: 'gauge',\n data: [\n {\n id: 'id0',\n values: [\n {\n type: '目标A',\n value: 45\n }\n ]\n }\n ],\n categoryField: 'type',\n valueField: 'value',\n outerRadius: 0.8,\n innerRadius: 0.7,\n startAngle: -180,\n endAngle: 0,\n centerY: '60%',\n indicator: [\n {\n visible: true,\n title: {\n style: {\n text: '45',\n fontSize: 60,\n fontWeight: 800\n }\n }\n }\n ],\n axes: [\n {\n type: 'linear',\n orient: 'angle',\n min: 0,\n max: 50,\n offset: 20,\n radius: 0.81,\n grid: { visible: false },\n tick: { visible: true, tickSize: 5, style: { lineWidth: 1 } },\n subTick: { visible: true, tickSize: 3, style: { lineWidth: 1 } },\n label: { visible: true, style: { fill: 'black', fontSize: 12 } }\n }\n ]\n};\n"]}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: !0
|
|
5
5
|
}), exports.charts = void 0;
|
|
6
6
|
|
|
7
|
-
const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), funnelHorizontal_1 = require("../spec/funnelHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter");
|
|
7
|
+
const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), funnelHorizontal_1 = require("../spec/funnelHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter"), funnel_1 = require("../spec/funnel"), combination_1 = require("../spec/combination"), businessFunnel_1 = require("../spec/businessFunnel");
|
|
8
8
|
|
|
9
9
|
exports.charts = [ {
|
|
10
10
|
title: "Line Chart",
|
|
@@ -65,5 +65,17 @@ exports.charts = [ {
|
|
|
65
65
|
title: "Horizontal Funnel",
|
|
66
66
|
spec: funnelHorizontal_1.horizontalFunnelSpec,
|
|
67
67
|
fileName: "funnelHorizontal"
|
|
68
|
+
}, {
|
|
69
|
+
title: "漏斗图",
|
|
70
|
+
spec: funnel_1.funnelSpec,
|
|
71
|
+
fileName: "funnel"
|
|
72
|
+
}, {
|
|
73
|
+
title: "基础组合图",
|
|
74
|
+
spec: combination_1.CombinationSpec,
|
|
75
|
+
fileName: "combination"
|
|
76
|
+
}, {
|
|
77
|
+
title: "业务漏斗图",
|
|
78
|
+
spec: businessFunnel_1.businessFunnelSpec,
|
|
79
|
+
fileName: "businessFunnel"
|
|
68
80
|
} ];
|
|
69
81
|
//# sourceMappingURL=chart-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,+DAAgE;AAChE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,+DAAgE;AAChE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;AAC9C,2CAA4C;AAC5C,qDAAsD;AACtD,2DAA4D;AAE/C,QAAA,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;QAC5B,QAAQ,EAAE,oBAAoB;KAC/B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,+CAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,aAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iCAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,qBAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,qCAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uCAAoB;QAC1B,QAAQ,EAAE,kBAAkB;KAC7B;IACD;QACE,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,mBAAU;QAChB,QAAQ,EAAE,QAAQ;KACnB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,6BAAe;QACrB,QAAQ,EAAE,aAAa;KACxB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,mCAAkB;QACxB,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAC","file":"chart-list.js","sourcesContent":["import type { IChartInfo } from '../interface';\nimport { areaSpec } from '../spec/area';\nimport { barGroupSpec } from '../spec/barGroup';\nimport { barGroupHorizontalSpec } from '../spec/barGroupHorizontal';\nimport { barStackedSpec } from '../spec/barStacked';\nimport { barStackedHorizontalSpec } from '../spec/barStackedHorizontal';\nimport { horizontalFunnelSpec } from '../spec/funnelHorizontal';\nimport { gaugeSpec } from '../spec/gauge';\nimport { horizontalBarSpec } from '../spec/horizontalBar';\nimport { indicatorSankeySpec } from '../spec/indicatorSankey';\nimport { lineSpec } from '../spec/line';\nimport { pieSpec } from '../spec/pie';\nimport { radarSpec } from '../spec/radar';\nimport { ringSpec } from '../spec/ring';\nimport { scatterSpec } from '../spec/scatter';\nimport { funnelSpec } from '../spec/funnel';\nimport { CombinationSpec } from '../spec/combination';\nimport { businessFunnelSpec } from '../spec/businessFunnel';\n\nexport const charts: IChartInfo[] = [\n {\n title: 'Line Chart',\n spec: lineSpec,\n fileName: 'line'\n },\n {\n title: 'Area Chart',\n spec: areaSpec,\n fileName: 'area'\n },\n {\n title: 'Grouped Bar Chart',\n spec: barGroupSpec,\n fileName: 'barGroup'\n },\n {\n title: 'Stacked Bar Chart',\n spec: barStackedSpec,\n fileName: 'barStacked'\n },\n {\n title: 'Horizontal Grouped Bar Chart',\n spec: barGroupHorizontalSpec,\n fileName: 'barGroupHorizontal'\n },\n {\n title: 'Horizontal Stacked Bar Chart',\n spec: barStackedHorizontalSpec,\n fileName: 'barStackedHorizontal'\n },\n {\n title: 'Pie Chart',\n spec: pieSpec,\n fileName: 'pie'\n },\n {\n title: 'Ring Chart',\n spec: ringSpec,\n fileName: 'ring'\n },\n {\n title: 'Gauge Chart',\n spec: gaugeSpec,\n fileName: 'gauge'\n },\n {\n title: 'Horizontal Bar Chart',\n spec: horizontalBarSpec,\n fileName: 'horizontalBar'\n },\n {\n title: 'Scatter Chart',\n spec: scatterSpec,\n fileName: 'scatter'\n },\n {\n title: 'Radar Chart',\n spec: radarSpec,\n fileName: 'radar'\n },\n {\n title: 'Indicator Sankey Chart',\n spec: indicatorSankeySpec,\n fileName: 'indicatorSankey',\n option: {\n enableHtmlAttribute: true\n }\n },\n {\n title: 'Horizontal Funnel',\n spec: horizontalFunnelSpec,\n fileName: 'funnelHorizontal'\n },\n {\n title: '漏斗图',\n spec: funnelSpec,\n fileName: 'funnel'\n },\n {\n title: '基础组合图',\n spec: CombinationSpec,\n fileName: 'combination'\n },\n {\n title: '业务漏斗图',\n spec: businessFunnelSpec,\n fileName: 'businessFunnel'\n }\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAA+C;AAC/C,6CAAsC;AACtC,yDAA+E;AAC/E,iCAA8B;AAC9B,yDAA4D;AAE5D,+CAAiD;AACjD,sDAA8C;AAC9C,oDAAkD;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,yBAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAyB,CAAC,CAAC;AACpF,yBAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,SAAgB,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,8BAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,8BAAC,cAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,WAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,8BAAC,qBAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAA+C;AAC/C,6CAAsC;AACtC,yDAA+E;AAC/E,iCAA8B;AAC9B,yDAA4D;AAE5D,+CAAiD;AACjD,sDAA8C;AAC9C,oDAAkD;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,yBAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAyB,CAAC,CAAC;AACpF,yBAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,SAAgB,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,8BAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,8BAAC,cAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,WAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,8BAAC,qBAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAErB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,8BAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAtDD,wBAsDC","file":"charts.js","sourcesContent":["import React, { useCallback } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent, VChartCore } from '@visactor/react-vchart';\nimport { i18n } from './i18n';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Button, Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\nimport type { IChartInfo } from '../interface';\n\nconst { Row, Col } = Grid;\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nconst DEMO_SOURCE_PREFIX =\n 'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';\n\nVChartCore.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme as any);\nVChartCore.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport interface IProps {\n language?: 'en' | 'zh';\n}\n\nexport function Charts(props: IProps) {\n const { language = 'zh' } = props;\n\n const onClick = useCallback(async (chartInfo: IChartInfo) => {\n const { fileName, option } = chartInfo;\n if (!fileName) {\n return;\n }\n const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;\n let url = `/vchart/playground?specUrl=${specUrl}`;\n if (option) {\n url += `&initOption=${JSON.stringify(option)}`;\n }\n url += `&theme=chartHubLight`;\n window.open(url);\n }, []);\n\n return (\n <Row gutter={gutter}>\n {charts.map((chart, i) => {\n return (\n <Col span={12} key={i} style={{ marginBottom: 16 }}>\n <Card\n className=\"chartContainer\"\n bordered={false}\n headerLine={true}\n title={chart.title}\n headerExtraContent={\n <Button\n size=\"small\"\n onClick={() => {\n onClick(chart);\n }}\n >\n {i18n.link[language]}\n </Button>\n }\n >\n <VChartComponent\n spec={{\n ...chart.spec,\n height: chartHeight\n }}\n options={{\n ...chart.option,\n mode: isMobile ? 'mobile-browser' : 'desktop-browser'\n }}\n />\n </Card>\n </Col>\n );\n })}\n </Row>\n );\n}\n"]}
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
export declare const businessFunnelSpec: {
|
|
2
|
+
id: string;
|
|
3
|
+
type: string;
|
|
4
|
+
seriesField: string;
|
|
5
|
+
height: number;
|
|
6
|
+
padding: {
|
|
7
|
+
top: number;
|
|
8
|
+
bottom: number;
|
|
9
|
+
left: number;
|
|
10
|
+
right: number;
|
|
11
|
+
};
|
|
12
|
+
data: ({
|
|
13
|
+
id: string;
|
|
14
|
+
values: {
|
|
15
|
+
x: string;
|
|
16
|
+
y: number;
|
|
17
|
+
percent: number;
|
|
18
|
+
average: number;
|
|
19
|
+
}[];
|
|
20
|
+
} | {
|
|
21
|
+
id: string;
|
|
22
|
+
values: {
|
|
23
|
+
x: string;
|
|
24
|
+
y0: number;
|
|
25
|
+
y1: number;
|
|
26
|
+
y: number;
|
|
27
|
+
percent: number;
|
|
28
|
+
}[];
|
|
29
|
+
})[];
|
|
30
|
+
series: ({
|
|
31
|
+
type: string;
|
|
32
|
+
id: string;
|
|
33
|
+
dataIndex: number;
|
|
34
|
+
xField: string;
|
|
35
|
+
yField: string;
|
|
36
|
+
barWidth: string;
|
|
37
|
+
extensionMark: {
|
|
38
|
+
type: string;
|
|
39
|
+
dataId: string;
|
|
40
|
+
style: {
|
|
41
|
+
x: (datum: any, ctx: any) => any;
|
|
42
|
+
y: number;
|
|
43
|
+
textAlign: string;
|
|
44
|
+
fontSize: number;
|
|
45
|
+
stroke: boolean;
|
|
46
|
+
text: (datum: any) => {
|
|
47
|
+
type: string;
|
|
48
|
+
text: ({
|
|
49
|
+
text: string;
|
|
50
|
+
fill: string;
|
|
51
|
+
textAlign: string;
|
|
52
|
+
fontWeight: string;
|
|
53
|
+
lineHeight: number;
|
|
54
|
+
} | {
|
|
55
|
+
text: string;
|
|
56
|
+
fill: string;
|
|
57
|
+
textAlign: string;
|
|
58
|
+
lineHeight: number;
|
|
59
|
+
fontWeight?: undefined;
|
|
60
|
+
})[];
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
}[];
|
|
64
|
+
bar?: undefined;
|
|
65
|
+
stack?: undefined;
|
|
66
|
+
tooltip?: undefined;
|
|
67
|
+
} | {
|
|
68
|
+
type: string;
|
|
69
|
+
id: string;
|
|
70
|
+
dataIndex: number;
|
|
71
|
+
xField: string;
|
|
72
|
+
yField: string;
|
|
73
|
+
bar: {
|
|
74
|
+
visible: boolean;
|
|
75
|
+
style?: undefined;
|
|
76
|
+
};
|
|
77
|
+
extensionMark: ({
|
|
78
|
+
type: string;
|
|
79
|
+
dataId: string;
|
|
80
|
+
dataKey: string;
|
|
81
|
+
style: {
|
|
82
|
+
points: (datum: any, ctx: any) => {
|
|
83
|
+
x: any;
|
|
84
|
+
y: any;
|
|
85
|
+
}[];
|
|
86
|
+
fill: string;
|
|
87
|
+
fillOpacity: number;
|
|
88
|
+
x?: undefined;
|
|
89
|
+
y?: undefined;
|
|
90
|
+
textAlign?: undefined;
|
|
91
|
+
fontSize?: undefined;
|
|
92
|
+
stroke?: undefined;
|
|
93
|
+
text?: undefined;
|
|
94
|
+
};
|
|
95
|
+
customShape?: undefined;
|
|
96
|
+
} | {
|
|
97
|
+
type: string;
|
|
98
|
+
dataId: string;
|
|
99
|
+
dataKey: string;
|
|
100
|
+
customShape: (data: any, attrs: any, path: any) => any;
|
|
101
|
+
style: {
|
|
102
|
+
points: (datum: any, ctx: any) => {
|
|
103
|
+
x: any;
|
|
104
|
+
y: any;
|
|
105
|
+
}[];
|
|
106
|
+
fill: string;
|
|
107
|
+
fillOpacity?: undefined;
|
|
108
|
+
x?: undefined;
|
|
109
|
+
y?: undefined;
|
|
110
|
+
textAlign?: undefined;
|
|
111
|
+
fontSize?: undefined;
|
|
112
|
+
stroke?: undefined;
|
|
113
|
+
text?: undefined;
|
|
114
|
+
};
|
|
115
|
+
} | {
|
|
116
|
+
type: string;
|
|
117
|
+
dataId: string;
|
|
118
|
+
dataKey: string;
|
|
119
|
+
style: {
|
|
120
|
+
x: (datum: any, ctx: any) => any;
|
|
121
|
+
y: number;
|
|
122
|
+
textAlign: string;
|
|
123
|
+
fontSize: number;
|
|
124
|
+
stroke: boolean;
|
|
125
|
+
text: (datum: any) => {
|
|
126
|
+
type: string;
|
|
127
|
+
text: ({
|
|
128
|
+
text: string;
|
|
129
|
+
fill: string;
|
|
130
|
+
textAlign: string;
|
|
131
|
+
fontWeight: string;
|
|
132
|
+
lineHeight: number;
|
|
133
|
+
} | {
|
|
134
|
+
text: string;
|
|
135
|
+
fill: string;
|
|
136
|
+
textAlign: string;
|
|
137
|
+
lineHeight: number;
|
|
138
|
+
fontWeight?: undefined;
|
|
139
|
+
})[];
|
|
140
|
+
};
|
|
141
|
+
points?: undefined;
|
|
142
|
+
fill?: undefined;
|
|
143
|
+
fillOpacity?: undefined;
|
|
144
|
+
};
|
|
145
|
+
customShape?: undefined;
|
|
146
|
+
})[];
|
|
147
|
+
barWidth?: undefined;
|
|
148
|
+
stack?: undefined;
|
|
149
|
+
tooltip?: undefined;
|
|
150
|
+
} | {
|
|
151
|
+
type: string;
|
|
152
|
+
stack: boolean;
|
|
153
|
+
id: string;
|
|
154
|
+
dataIndex: number;
|
|
155
|
+
xField: string;
|
|
156
|
+
yField: string;
|
|
157
|
+
barWidth: string;
|
|
158
|
+
bar: {
|
|
159
|
+
visible: boolean;
|
|
160
|
+
style: {
|
|
161
|
+
fill: string;
|
|
162
|
+
height: number;
|
|
163
|
+
};
|
|
164
|
+
};
|
|
165
|
+
tooltip: {
|
|
166
|
+
visible: boolean;
|
|
167
|
+
};
|
|
168
|
+
extensionMark?: undefined;
|
|
169
|
+
})[];
|
|
170
|
+
animation: boolean;
|
|
171
|
+
tooltip: {
|
|
172
|
+
mark: {
|
|
173
|
+
visible: boolean;
|
|
174
|
+
};
|
|
175
|
+
dimension: {
|
|
176
|
+
title: (data: any, params: any) => {
|
|
177
|
+
value: any;
|
|
178
|
+
};
|
|
179
|
+
content: (data: any, params: any) => ({
|
|
180
|
+
hasShape: boolean;
|
|
181
|
+
key: (datum: any) => any;
|
|
182
|
+
value: (datum: any) => any;
|
|
183
|
+
} | {
|
|
184
|
+
hasShape: boolean;
|
|
185
|
+
key: string;
|
|
186
|
+
value: (datum: any) => any;
|
|
187
|
+
})[];
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
axes: ({
|
|
191
|
+
orient: string;
|
|
192
|
+
seriesIndex: number[];
|
|
193
|
+
visible: boolean;
|
|
194
|
+
paddingInner?: undefined;
|
|
195
|
+
paddingOuter?: undefined;
|
|
196
|
+
domain?: undefined;
|
|
197
|
+
domainLine?: undefined;
|
|
198
|
+
tick?: undefined;
|
|
199
|
+
sampling?: undefined;
|
|
200
|
+
label?: undefined;
|
|
201
|
+
} | {
|
|
202
|
+
orient: string;
|
|
203
|
+
paddingInner: number;
|
|
204
|
+
paddingOuter: number;
|
|
205
|
+
domain: string[];
|
|
206
|
+
domainLine: {
|
|
207
|
+
visible: boolean;
|
|
208
|
+
};
|
|
209
|
+
tick: {
|
|
210
|
+
visible: boolean;
|
|
211
|
+
};
|
|
212
|
+
sampling: boolean;
|
|
213
|
+
label: {
|
|
214
|
+
style: {
|
|
215
|
+
fill: string;
|
|
216
|
+
};
|
|
217
|
+
autoLimit: boolean;
|
|
218
|
+
formatMethod: (label: any) => any;
|
|
219
|
+
};
|
|
220
|
+
seriesIndex?: undefined;
|
|
221
|
+
visible?: undefined;
|
|
222
|
+
})[];
|
|
223
|
+
};
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
export const businessFunnelSpec = {
|
|
2
|
+
id: "businessFunnel",
|
|
3
|
+
type: "common",
|
|
4
|
+
seriesField: "color",
|
|
5
|
+
height: 300,
|
|
6
|
+
padding: {
|
|
7
|
+
top: 50,
|
|
8
|
+
bottom: 50,
|
|
9
|
+
left: 20,
|
|
10
|
+
right: 20
|
|
11
|
+
},
|
|
12
|
+
data: [ {
|
|
13
|
+
id: "main",
|
|
14
|
+
values: [ {
|
|
15
|
+
x: "大盘商品",
|
|
16
|
+
y: 11795e3,
|
|
17
|
+
percent: 100,
|
|
18
|
+
average: 1e6
|
|
19
|
+
}, {
|
|
20
|
+
x: "发生价格变化的商品",
|
|
21
|
+
y: 53e5,
|
|
22
|
+
percent: 4.52,
|
|
23
|
+
average: 1e6
|
|
24
|
+
}, {
|
|
25
|
+
x: "符合筛选条件的商品",
|
|
26
|
+
y: 174e3,
|
|
27
|
+
percent: .19,
|
|
28
|
+
average: 1e3
|
|
29
|
+
} ]
|
|
30
|
+
}, {
|
|
31
|
+
id: "transform",
|
|
32
|
+
values: [ {
|
|
33
|
+
x: "0-1",
|
|
34
|
+
y0: 11795e3,
|
|
35
|
+
y1: 53e5,
|
|
36
|
+
y: 6495e3,
|
|
37
|
+
percent: -95.48
|
|
38
|
+
}, {
|
|
39
|
+
x: "1-2",
|
|
40
|
+
y0: 53e5,
|
|
41
|
+
y1: 174e3,
|
|
42
|
+
y: 5126e3,
|
|
43
|
+
percent: -4.33
|
|
44
|
+
} ]
|
|
45
|
+
} ],
|
|
46
|
+
series: [ {
|
|
47
|
+
type: "bar",
|
|
48
|
+
id: "bar",
|
|
49
|
+
dataIndex: 0,
|
|
50
|
+
xField: "x",
|
|
51
|
+
yField: "y",
|
|
52
|
+
barWidth: "100%",
|
|
53
|
+
extensionMark: [ {
|
|
54
|
+
type: "text",
|
|
55
|
+
dataId: "main",
|
|
56
|
+
style: {
|
|
57
|
+
x: (datum, ctx) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,
|
|
58
|
+
y: -40,
|
|
59
|
+
textAlign: "center",
|
|
60
|
+
fontSize: 12,
|
|
61
|
+
stroke: !1,
|
|
62
|
+
text: datum => ({
|
|
63
|
+
type: "rich",
|
|
64
|
+
text: [ {
|
|
65
|
+
text: `${datum.percent}%\n`,
|
|
66
|
+
fill: "black",
|
|
67
|
+
textAlign: "center",
|
|
68
|
+
fontWeight: "bold",
|
|
69
|
+
lineHeight: 20
|
|
70
|
+
}, {
|
|
71
|
+
text: `${datum.y}`,
|
|
72
|
+
fill: "grey",
|
|
73
|
+
textAlign: "center",
|
|
74
|
+
lineHeight: 20
|
|
75
|
+
} ]
|
|
76
|
+
})
|
|
77
|
+
}
|
|
78
|
+
} ]
|
|
79
|
+
}, {
|
|
80
|
+
type: "bar",
|
|
81
|
+
id: "transform",
|
|
82
|
+
dataIndex: 1,
|
|
83
|
+
xField: "x",
|
|
84
|
+
yField: "y",
|
|
85
|
+
bar: {
|
|
86
|
+
visible: !1
|
|
87
|
+
},
|
|
88
|
+
extensionMark: [ {
|
|
89
|
+
type: "polygon",
|
|
90
|
+
dataId: "transform",
|
|
91
|
+
dataKey: "x",
|
|
92
|
+
style: {
|
|
93
|
+
points: (datum, ctx) => {
|
|
94
|
+
const {valueToX: valueToX, valueToY: valueToY, xBandwidth: xBandwidth} = ctx;
|
|
95
|
+
return [ {
|
|
96
|
+
x: valueToX(datum.x),
|
|
97
|
+
y: valueToY(0) + 40
|
|
98
|
+
}, {
|
|
99
|
+
x: valueToX(datum.x) + xBandwidth(),
|
|
100
|
+
y: valueToY(0) + 40
|
|
101
|
+
}, {
|
|
102
|
+
x: valueToX(datum.x) + xBandwidth(),
|
|
103
|
+
y: -40
|
|
104
|
+
}, {
|
|
105
|
+
x: valueToX(datum.x),
|
|
106
|
+
y: -40
|
|
107
|
+
} ];
|
|
108
|
+
},
|
|
109
|
+
fill: "grey",
|
|
110
|
+
fillOpacity: .05
|
|
111
|
+
}
|
|
112
|
+
}, {
|
|
113
|
+
type: "polygon",
|
|
114
|
+
dataId: "transform",
|
|
115
|
+
dataKey: "x",
|
|
116
|
+
customShape: (data, attrs, path) => {
|
|
117
|
+
const points = attrs.points;
|
|
118
|
+
return path.moveTo(points[0].x, points[0].y), path.lineTo(points[1].x, points[1].y),
|
|
119
|
+
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),
|
|
120
|
+
path.closePath(), path;
|
|
121
|
+
},
|
|
122
|
+
style: {
|
|
123
|
+
points: (datum, ctx) => {
|
|
124
|
+
const {valueToX: valueToX, valueToY: valueToY, xBandwidth: xBandwidth} = ctx;
|
|
125
|
+
return [ {
|
|
126
|
+
x: valueToX(datum.x),
|
|
127
|
+
y: valueToY(0)
|
|
128
|
+
}, {
|
|
129
|
+
x: valueToX(datum.x) + xBandwidth(),
|
|
130
|
+
y: valueToY(0)
|
|
131
|
+
}, {
|
|
132
|
+
x: valueToX(datum.x) + xBandwidth(),
|
|
133
|
+
y: valueToY(datum.y1)
|
|
134
|
+
}, {
|
|
135
|
+
x: valueToX(datum.x),
|
|
136
|
+
y: valueToY(datum.y0)
|
|
137
|
+
} ];
|
|
138
|
+
},
|
|
139
|
+
fill: "rgb(228, 232, 247)"
|
|
140
|
+
}
|
|
141
|
+
}, {
|
|
142
|
+
type: "text",
|
|
143
|
+
dataId: "transform",
|
|
144
|
+
dataKey: "x",
|
|
145
|
+
style: {
|
|
146
|
+
x: (datum, ctx) => ctx.valueToX(datum.x) + ctx.xBandwidth() / 2,
|
|
147
|
+
y: -40,
|
|
148
|
+
textAlign: "center",
|
|
149
|
+
fontSize: 12,
|
|
150
|
+
stroke: !1,
|
|
151
|
+
text: datum => ({
|
|
152
|
+
type: "rich",
|
|
153
|
+
text: [ {
|
|
154
|
+
text: `${datum.percent}%\n`,
|
|
155
|
+
fill: "green",
|
|
156
|
+
textAlign: "center",
|
|
157
|
+
fontWeight: "bold",
|
|
158
|
+
lineHeight: 20
|
|
159
|
+
}, {
|
|
160
|
+
text: `${datum.y}`,
|
|
161
|
+
fill: "grey",
|
|
162
|
+
textAlign: "center",
|
|
163
|
+
lineHeight: 20
|
|
164
|
+
} ]
|
|
165
|
+
})
|
|
166
|
+
}
|
|
167
|
+
} ]
|
|
168
|
+
}, {
|
|
169
|
+
type: "bar",
|
|
170
|
+
stack: !1,
|
|
171
|
+
id: "average",
|
|
172
|
+
dataIndex: 0,
|
|
173
|
+
xField: "x",
|
|
174
|
+
yField: "average",
|
|
175
|
+
barWidth: "100%",
|
|
176
|
+
bar: {
|
|
177
|
+
visible: !0,
|
|
178
|
+
style: {
|
|
179
|
+
fill: "orange",
|
|
180
|
+
height: 2
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
tooltip: {
|
|
184
|
+
visible: !1
|
|
185
|
+
}
|
|
186
|
+
} ],
|
|
187
|
+
animation: !1,
|
|
188
|
+
tooltip: {
|
|
189
|
+
mark: {
|
|
190
|
+
visible: !1
|
|
191
|
+
},
|
|
192
|
+
dimension: {
|
|
193
|
+
title: (data, params) => {
|
|
194
|
+
var _a, _b;
|
|
195
|
+
return {
|
|
196
|
+
value: (null === (_b = null === (_a = data[0]) || void 0 === _a ? void 0 : _a.value) || void 0 === _b ? void 0 : _b.includes("-")) ? "流失情况" : data[0].value
|
|
197
|
+
};
|
|
198
|
+
},
|
|
199
|
+
content: (data, params) => {
|
|
200
|
+
var _a, _b;
|
|
201
|
+
return (null === (_b = null === (_a = data[0]) || void 0 === _a ? void 0 : _a.value) || void 0 === _b ? void 0 : _b.includes("-")) ? [ {
|
|
202
|
+
hasShape: !1,
|
|
203
|
+
key: "流失量",
|
|
204
|
+
value: datum => datum.y
|
|
205
|
+
}, {
|
|
206
|
+
hasShape: !1,
|
|
207
|
+
key: "流失率",
|
|
208
|
+
value: datum => `${datum.percent}%`
|
|
209
|
+
} ] : [ {
|
|
210
|
+
hasShape: !1,
|
|
211
|
+
key: datum => datum.x,
|
|
212
|
+
value: datum => datum.y
|
|
213
|
+
}, {
|
|
214
|
+
hasShape: !1,
|
|
215
|
+
key: datum => `${datum.x}占比`,
|
|
216
|
+
value: datum => `${datum.percent}%`
|
|
217
|
+
}, {
|
|
218
|
+
hasShape: !1,
|
|
219
|
+
key: "average",
|
|
220
|
+
value: datum => datum.average
|
|
221
|
+
} ];
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
axes: [ {
|
|
226
|
+
orient: "left",
|
|
227
|
+
seriesIndex: [ 0, 1, 2 ],
|
|
228
|
+
visible: !1
|
|
229
|
+
}, {
|
|
230
|
+
orient: "bottom",
|
|
231
|
+
paddingInner: 0,
|
|
232
|
+
paddingOuter: 0,
|
|
233
|
+
domain: [ "大盘商品", "0-1", "发生价格变化的商品", "1-2", "符合筛选条件的商品" ],
|
|
234
|
+
domainLine: {
|
|
235
|
+
visible: !1
|
|
236
|
+
},
|
|
237
|
+
tick: {
|
|
238
|
+
visible: !1
|
|
239
|
+
},
|
|
240
|
+
sampling: !1,
|
|
241
|
+
label: {
|
|
242
|
+
style: {
|
|
243
|
+
fill: "black"
|
|
244
|
+
},
|
|
245
|
+
autoLimit: !0,
|
|
246
|
+
formatMethod: label => label.includes("-") ? {
|
|
247
|
+
type: "rich",
|
|
248
|
+
text: [ {
|
|
249
|
+
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>',
|
|
250
|
+
height: 14,
|
|
251
|
+
width: 10
|
|
252
|
+
} ]
|
|
253
|
+
} : label
|
|
254
|
+
}
|
|
255
|
+
} ]
|
|
256
|
+
};
|
|
257
|
+
//# sourceMappingURL=businessFunnel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/spec/businessFunnel.ts"],"names":[],"mappings":"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","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"]}
|