tvision-charts-component 3.3.24

package/dist/esm/basicFlame/_example/ResetBasic.d.ts

@@ -0,0 +1 @@
+export default function Basic(): JSX.Element;

package/dist/esm/basicFlame/_example/ResetBasic.js

@@ -0,0 +1,59 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicFlame } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        dataSource: [
+            {
+                name: '火焰图test',
+                type: 'flame',
+                descriptions: [{
+                        show: true,
+                        text: '火焰图数据来源1：CPU',
+                        color: 'red',
+                    }],
+                reset: {
+                    show: true,
+                    text: '重置',
+                    color: '#333',
+                },
+                data: {
+                    name: 'root',
+                    value: 100,
+                    children: [
+                        {
+                            name: 'unix`sys_syscall',
+                            value: 30,
+                            children: [
+                                {
+                                    name: 'genunix`syscall_mstate',
+                                    value: 10,
+                                }, {
+                                    name: 'genunix`segkp_release_internal',
+                                    value: 2,
+                                }, {
+                                    name: 'genunix`schedctl_freepage',
+                                    value: 12,
+                                    children: [
+                                        {
+                                            name: 'genunix`pvn_plist_init',
+                                            value: 2,
+                                            children: [
+                                                { name: 'unix`page_lookup', value: 1 },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                        { name: 'unix`page_lookup_create', value: 70 },
+                    ],
+                },
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u6709\u91CD\u7F6E\u4EE5\u53CA\u63CF\u8FF0\u7684\u706B\u7130\u56FE"),
+        React.createElement(BasicFlame, __assign({}, options))));
+}
+//# sourceMappingURL=ResetBasic.js.map

package/dist/esm/basicFlame/_example/ResetBasic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResetBasic.js","sourceRoot":"","sources":["../../../../src/basicFlame/_example/ResetBasic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,OAAO,GAAG;QACd,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,OAAO;gBACb,YAAY,EAAE,CAAC;wBACb,IAAI,EAAE,IAAI;wBACV,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,KAAK;qBACb,CAAC;gBACF,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE,MAAM;iBACd;gBACD,IAAI,EAAE;oBACJ,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,GAAG;oBACV,QAAQ,EAAE;wBACR;4BACE,IAAI,EAAE,kBAAkB;4BACxB,KAAK,EAAE,EAAE;4BACT,QAAQ,EAAE;gCACR;oCACE,IAAI,EAAE,wBAAwB;oCAC9B,KAAK,EAAE,EAAE;iCACV,EAAE;oCACD,IAAI,EAAE,gCAAgC;oCACtC,KAAK,EAAE,CAAC;iCACT,EAAE;oCACD,IAAI,EAAE,2BAA2B;oCACjC,KAAK,EAAE,EAAE;oCACT,QAAQ,EAAE;wCACR;4CACE,IAAI,EAAE,wBAAwB;4CAC9B,KAAK,EAAE,CAAC;4CACR,QAAQ,EAAE;gDACR,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,CAAC,EAAE;6CACvC;yCACF;qCACF;iCACF;6BACF;yBACF;wBACD,EAAE,IAAI,EAAE,yBAAyB,EAAE,KAAK,EAAE,EAAE,EAAE;qBAC/C;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,4GAAuB;QACvB,oBAAC,UAAU,eAAK,OAAO,EAAI,CAC1B,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicFlame/_example/ResetBasic.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { BasicFlame } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    dataSource: [
+      {
+        name: '火焰图test',
+        type: 'flame',
+        descriptions: [{
+          show: true,
+          text: '火焰图数据来源1：CPU',
+          color: 'red',
+        }],
+        reset: {
+          show: true,
+          text: '重置',
+          color: '#333',
+        },
+        data: {
+          name: 'root',
+          value: 100,
+          children: [
+            {
+              name: 'unix`sys_syscall',
+              value: 30,
+              children: [
+                {
+                  name: 'genunix`syscall_mstate',
+                  value: 10,
+                }, {
+                  name: 'genunix`segkp_release_internal',
+                  value: 2,
+                }, {
+                  name: 'genunix`schedctl_freepage',
+                  value: 12,
+                  children: [
+                    {
+                      name: 'genunix`pvn_plist_init',
+                      value: 2,
+                      children: [
+                        { name: 'unix`page_lookup', value: 1 },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            { name: 'unix`page_lookup_create', value: 70 },
+          ],
+        },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>带有重置以及描述的火焰图</div>
+      <BasicFlame {...options} />
+    </>
+  );
+}

package/dist/esm/basicFlame/demo/basic.md

@@ -0,0 +1,55 @@
+---
+order: 0
+title: 火焰图
+---
+
+
+````jsx
+import { BasicFlame } from '@tencent/tcharts-component';
+
+var dataSource = [
+    {
+        name:'火焰图demo',
+        type: 'flame',
+        data: {
+          name: 'root',
+          value: 100,
+          children: [
+            {
+              name: 'unix`sys_syscall',
+              value: 30,
+              children: [
+                {
+                  name: 'genunix`syscall_mstate',
+                  value: 10,
+                }, {
+                  name: 'genunix`segkp_release_internal',
+                  value: 2,
+                }, {
+                  name: 'genunix`schedctl_freepage',
+                  value: 12,
+                  children: [
+                    {
+                      name: 'genunix`pvn_plist_init',
+                      value: 2,
+                      children: [
+                        { name: 'unix`page_lookup', value: 1 },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            { name: 'unix`page_lookup_create', value: 70 },
+          ],
+        }
+    }
+];
+ReactDOM.render(
+  <div>
+    <BasicFlame 
+      dataSource={dataSource}>
+    </BasicFlame>
+  </div>
+, mountNode);
+````

package/dist/esm/basicFlame/index.d.ts

@@ -0,0 +1,28 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, ChartRef, Data, GridOptions } from '../_type';
+export interface FlameProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+        textStyle?: {
+            color?: string;
+        };
+    };
+    tooltip?: ToolTipOptions;
+    theme?: string;
+    dataSource: Data[];
+    chartRef?: (chart?: ChartRef) => void;
+    color?: string[];
+    grid?: GridOptions;
+}
+declare abstract class Flame<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class BasicFlame extends Flame<FlameProps> {
+    getHeight(props: any): any;
+    getOptions(props: any): any;
+}
+export {};

package/dist/esm/basicFlame/index.js

@@ -0,0 +1,29 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addBasicFlameOption, calculateFlameActHeight } from '../common/optionsHelp';
+import { ChartFlameComponent, ChartCore } from 'tvision-charts';
+var Flame = (function (_super) {
+    __extends(Flame, _super);
+    function Flame(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'flame';
+        ChartCore.use(ChartFlameComponent);
+        return _this;
+    }
+    return Flame;
+}(ChartComponent));
+var BasicFlame = (function (_super) {
+    __extends(BasicFlame, _super);
+    function BasicFlame() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicFlame.prototype.getHeight = function (props) {
+        return calculateFlameActHeight(props || this.props);
+    };
+    BasicFlame.prototype.getOptions = function (props) {
+        return addBasicFlameOption(props || this.props);
+    };
+    return BasicFlame;
+}(Flame));
+export default BasicFlame;
+//# sourceMappingURL=index.js.map

package/dist/esm/basicFlame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicFlame/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgDhE;IAAmD,yBAAiB;IAElE,eAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,OAAO,CAAC;QAGlB,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;IACrC,CAAC;IACH,YAAC;AAAD,CAAC,AAND,CAAmD,cAAc,GAMhE;AACD;IAAwC,8BAAiB;IAAzD;;IAOA,CAAC;IANC,8BAAS,GAAT,UAAU,KAAK;QACb,OAAO,uBAAuB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IACD,+BAAU,GAAV,UAAW,KAAK;QACd,OAAO,mBAAmB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IACH,iBAAC;AAAD,CAAC,AAPD,CAAwC,KAAK,GAO5C"}

package/dist/esm/basicFlame/index.md

@@ -0,0 +1,23 @@
+---
+category: Charts
+title: Flame
+subtitle: 火焰图
+cols: 1
+type: 火焰图
+author: raeleneqiu
+---
+火焰图以一个全局的视野来看待时间分布，它从底部往顶部，列出所有可能导致性能瓶颈的调用栈。调用顺序从下至上，方块的大小代表了占用 CPU 使用的长短
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+color | 定制火焰图颜色 | string[] | - | 
+grid | 定制上下左右的边距 | object | - |
+dataSource  | 数据列表 | array | - |
+
+

package/dist/esm/basicFunnel/README.md

@@ -0,0 +1,19 @@
+# BasicFunnel 漏斗图
+
+漏斗图
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础漏斗图
+
+[Example: 基础漏斗图](./_example/Basic.jsx)
+
+### 带间隙漏斗图
+
+[Example: 带间隙漏斗图](./_example/SpaceFunnel.jsx)
+
+## 组件属性
+
+[Interface: FunnelProps](./index.tsx)

package/dist/esm/basicFunnel/_example/Basic.d.ts

@@ -0,0 +1 @@
+export default function Basic(): JSX.Element;

package/dist/esm/basicFunnel/_example/Basic.js

@@ -0,0 +1,70 @@
+import { __assign } from "tslib";
+import React, { useRef } from 'react';
+import { BasicFunnel } from '@tencent/tcharts-component';
+import { Button } from '@tencent/tea-component';
+export default function Basic() {
+    var chartDom = useRef(null);
+    var options = {
+        tooltip: {
+            trigger: 'item',
+            formatter: function (items) { return "<div>\u6F0F\u6597\u56FE</div><div>".concat(items[0].name, ": ").concat(items[0].value, "%</div>  "); },
+        },
+        title: {
+            text: '漏斗图',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'funnel',
+                min: 0,
+                max: 100,
+                minSize: '0%',
+                maxSize: '60%',
+                label: {
+                    show: true,
+                    position: 'inside',
+                },
+                labelLine: {
+                    length: 10,
+                    lineStyle: {
+                        width: 1,
+                        type: 'solid',
+                    },
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 1,
+                },
+                emphasis: {
+                    label: {
+                        fontSize: 20,
+                    },
+                },
+                data: [
+                    { value: 60, name: '访问' },
+                    { value: 40, name: '咨询' },
+                    { value: 20, name: '订单' },
+                    { value: 80, name: '点击' },
+                    { value: 100, name: '展现' },
+                ],
+            },
+        ],
+        chartRef: function (chart) {
+            chartDom.current = chart;
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { textAlign: 'center' } },
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u9876\u90E8\u653E\u5927", onClick: function () { } }, "\u9876\u90E8\u653E\u5927"),
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u9876\u90E8\u7F29\u5C0F", onClick: function () { } }, "\u9876\u90E8\u7F29\u5C0F"),
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u5E95\u90E8\u653E\u5927", onClick: function () { } }, "\u5E95\u90E8\u653E\u5927"),
+            React.createElement(Button, { title: "\u5E95\u90E8\u7F29\u5C0F", onClick: function () { } }, "\u5E95\u90E8\u7F29\u5C0F")),
+        React.createElement(BasicFunnel, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

package/dist/esm/basicFunnel/_example/Basic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicFunnel/_example/Basic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAM,OAAO,GAAG;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,4CAAsB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,eAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,cAAW,EAAjE,CAAiE;SACtF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,IAAI;SACX;QACD,MAAM,EAAE;YACN,MAAM,EAAE,UAAU;YAClB,CAAC,EAAE,MAAM;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;SAC/C;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,KAAK;gBACd,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,QAAQ;iBACnB;gBACD,SAAS,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,SAAS,EAAE;wBACT,KAAK,EAAE,CAAC;wBACR,IAAI,EAAE,OAAO;qBACd;iBACF;gBACD,SAAS,EAAE;oBACT,WAAW,EAAE,MAAM;oBACnB,WAAW,EAAE,CAAC;iBACf;gBACD,QAAQ,EAAE;oBACR,KAAK,EAAE;wBACL,QAAQ,EAAE,EAAE;qBACb;iBACF;gBACD,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE;iBAC3B;aACF;SACF;QACD,QAAQ,EAAE,UAAC,KAAK;YACd,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3B,CAAC;KACF,CAAC;IAEF,OAAO,CACL;QACE,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YACjC,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAE7B,CACL;QACN,oBAAC,WAAW,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACxC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicFunnel/_example/Basic.jsx

@@ -0,0 +1,82 @@
+import React, { useRef } from 'react';
+import { BasicFunnel } from '@tencent/tcharts-component';
+import { Button } from '@tencent/tea-component';
+
+export default function Basic() {
+  const chartDom = useRef(null);
+  const options = {
+    tooltip: {
+      trigger: 'item',
+      formatter: items => `<div>漏斗图</div><div>${items[0].name}: ${items[0].value}%</div>  `,
+    },
+    title: {
+      text: '漏斗图',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'funnel',
+        min: 0,
+        max: 100,
+        minSize: '0%',
+        maxSize: '60%',
+        label: {
+          show: true,
+          position: 'inside',
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+          },
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+          },
+        },
+        data: [
+          { value: 60, name: '访问' },
+          { value: 40, name: '咨询' },
+          { value: 20, name: '订单' },
+          { value: 80, name: '点击' },
+          { value: 100, name: '展现' },
+        ],
+      },
+    ],
+    chartRef: (chart) => {
+      chartDom.current = chart;
+    },
+  };
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }}>
+        <Button style={{ marginRight: 5 }} title="顶部放大" onClick={() => {}}>
+          顶部放大
+        </Button>
+        <Button style={{ marginRight: 5 }} title="顶部缩小" onClick={() => {}}>
+          顶部缩小
+        </Button>
+        <Button style={{ marginRight: 5 }} title="底部放大" onClick={() => {}}>
+          底部放大
+        </Button>
+        <Button title="底部缩小" onClick={() => {}}>
+          底部缩小
+        </Button>
+      </div>
+      <BasicFunnel height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicFunnel/_example/SpaceFunnel.d.ts

@@ -0,0 +1 @@
+export default function SpaceFunnel(): JSX.Element;

package/dist/esm/basicFunnel/_example/SpaceFunnel.js

@@ -0,0 +1,71 @@
+import { __assign } from "tslib";
+import React, { useRef } from 'react';
+import { BasicFunnel } from '@tencent/tcharts-component';
+import { Button } from '@tencent/tea-component';
+export default function SpaceFunnel() {
+    var chartDom = useRef(null);
+    var options = {
+        tooltip: {
+            trigger: 'item',
+            formatter: function (items) { return "<div>\u6F0F\u6597\u56FE</div><div>".concat(items[0].name, ": ").concat(items[0].value, "%</div>  "); },
+        },
+        title: {
+            text: '漏斗图',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'funnel',
+                min: 0,
+                max: 100,
+                minSize: '10%',
+                maxSize: '60%',
+                gap: -10,
+                label: {
+                    show: true,
+                    position: 'inside',
+                },
+                labelLine: {
+                    length: 10,
+                    lineStyle: {
+                        width: 1,
+                        type: 'solid',
+                    },
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 1,
+                },
+                emphasis: {
+                    label: {
+                        fontSize: 20,
+                    },
+                },
+                data: [
+                    { value: 60, name: '访问' },
+                    { value: 40, name: '咨询' },
+                    { value: 20, name: '订单' },
+                    { value: 80, name: '点击' },
+                    { value: 100, name: '展现' },
+                ],
+            },
+        ],
+        chartRef: function (chart) {
+            chartDom.current = chart;
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { textAlign: 'center' } },
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u9876\u90E8\u653E\u5927", onClick: function () { } }, "\u9876\u90E8\u653E\u5927"),
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u9876\u90E8\u7F29\u5C0F", onClick: function () { } }, "\u9876\u90E8\u7F29\u5C0F"),
+            React.createElement(Button, { style: { marginRight: 5 }, title: "\u5E95\u90E8\u653E\u5927", onClick: function () { } }, "\u5E95\u90E8\u653E\u5927"),
+            React.createElement(Button, { title: "\u5E95\u90E8\u7F29\u5C0F", onClick: function () { } }, "\u5E95\u90E8\u7F29\u5C0F")),
+        React.createElement(BasicFunnel, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=SpaceFunnel.js.map

package/dist/esm/basicFunnel/_example/SpaceFunnel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpaceFunnel.js","sourceRoot":"","sources":["../../../../src/basicFunnel/_example/SpaceFunnel.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAM,OAAO,GAAG;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,4CAAsB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,eAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,cAAW,EAAjE,CAAiE;SACtF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,IAAI;SACX;QACD,MAAM,EAAE;YACN,MAAM,EAAE,UAAU;YAClB,CAAC,EAAE,MAAM;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;SAC/C;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,OAAO,EAAE,KAAK;gBACd,OAAO,EAAE,KAAK;gBACd,GAAG,EAAE,CAAC,EAAE;gBACR,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,QAAQ;iBACnB;gBACD,SAAS,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,SAAS,EAAE;wBACT,KAAK,EAAE,CAAC;wBACR,IAAI,EAAE,OAAO;qBACd;iBACF;gBACD,SAAS,EAAE;oBACT,WAAW,EAAE,MAAM;oBACnB,WAAW,EAAE,CAAC;iBACf;gBACD,QAAQ,EAAE;oBACR,KAAK,EAAE;wBACL,QAAQ,EAAE,EAAE;qBACb;iBACF;gBACD,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;oBACzB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE;iBAC3B;aACF;SACF;QACD,QAAQ,EAAE,UAAC,KAAK;YACd,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3B,CAAC;KACF,CAAC;IAEF,OAAO,CACL;QACE,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YACjC,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAExD;YACT,oBAAC,MAAM,IAAC,KAAK,EAAC,0BAAM,EAAC,OAAO,EAAE,cAAO,CAAC,+BAE7B,CACL;QACN,oBAAC,WAAW,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACxC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicFunnel/_example/SpaceFunnel.jsx

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import { BasicFunnel } from '@tencent/tcharts-component';
+import { Button } from '@tencent/tea-component';
+
+export default function SpaceFunnel() {
+  const chartDom = useRef(null);
+  const options = {
+    tooltip: {
+      trigger: 'item',
+      formatter: items => `<div>漏斗图</div><div>${items[0].name}: ${items[0].value}%</div>  `,
+    },
+    title: {
+      text: '漏斗图',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'funnel',
+        min: 0,
+        max: 100,
+        minSize: '10%',
+        maxSize: '60%',
+        gap: -10,
+        label: {
+          show: true,
+          position: 'inside',
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+          },
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+          },
+        },
+        data: [
+          { value: 60, name: '访问' },
+          { value: 40, name: '咨询' },
+          { value: 20, name: '订单' },
+          { value: 80, name: '点击' },
+          { value: 100, name: '展现' },
+        ],
+      },
+    ],
+    chartRef: (chart) => {
+      chartDom.current = chart;
+    },
+  };
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }}>
+        <Button style={{ marginRight: 5 }} title="顶部放大" onClick={() => {}}>
+          顶部放大
+        </Button>
+        <Button style={{ marginRight: 5 }} title="顶部缩小" onClick={() => {}}>
+          顶部缩小
+        </Button>
+        <Button style={{ marginRight: 5 }} title="底部放大" onClick={() => {}}>
+          底部放大
+        </Button>
+        <Button title="底部缩小" onClick={() => {}}>
+          底部缩小
+        </Button>
+      </div>
+      <BasicFunnel height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicFunnel/demo/basic.md

@@ -0,0 +1,45 @@
+---
+order: 0
+title: 基础漏斗图图
+---
+
+基础漏斗图。
+
+````jsx
+import { BasicFunnel } from '@tencent/tcharts-component';
+
+var legend = {
+    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+};
+var dataSource = [
+    {
+        name: '访问来源',
+        type: 'funnel',
+        min: 0,
+        max: 100,
+        width: '100%',
+        minSize: '0%',
+        maxSize: '100%',
+        gap: 5,
+        data: [
+            {value: 60, name: '访问'},
+            {value: 40, name: '咨询'},
+            {value: 20, name: '订单'},
+            {value: 80, name: '点击'},
+            {value: 100, name: '展现'}
+        ]
+    }
+];
+
+  
+ReactDOM.render(
+  <div>
+    <BasicFunnel 
+        legend={legend}
+        dataSource={dataSource}
+        height = '500px'>
+        默认
+    </BasicBar>
+  </div>
+, mountNode);
+````