tvision-charts-component 3.3.24

package/dist/esm/basicPie/_example/RosePic.js

@@ -0,0 +1,56 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function RosePic() {
+    var options = {
+        title: {
+            text: '甜甜圈图测试用例1',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'pie',
+                radius: ['20%', '70%'],
+                roseType: 'area',
+                label: {
+                    show: false,
+                    layout: 'outer',
+                    formatters: {
+                        normal: function (param) {
+                            return [
+                                { text: param.seriesName, font: '12px', color: '#3398DB' },
+                            ];
+                        },
+                    },
+                },
+                labelLine: {
+                    normal: {
+                        show: false,
+                    },
+                },
+                data: [
+                    { value: 110, name: '直接访问' },
+                    { value: 140, name: '邮件营销' },
+                    { value: 200, name: '联盟广告' },
+                    { value: 250, name: '视频广告' },
+                    { value: 300, name: '搜索引擎' },
+                ],
+                itemStyle: {
+                    normal: {
+                        dividerWidth: 5,
+                    },
+                },
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u901A\u7528\u73AB\u7470\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=RosePic.js.map

package/dist/esm/basicPie/_example/RosePic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RosePic.js","sourceRoot":"","sources":["../../../../src/basicPie/_example/RosePic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,IAAM,OAAO,GAAG;QAKd,KAAK,EAAE;YACL,IAAI,EAAE,WAAW;YACjB,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,KAAK;gBACX,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;gBACtB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE;oBACL,IAAI,EAAE,KAAK;oBACX,MAAM,EAAE,OAAO;oBACf,UAAU,EAAE;wBACV,MAAM,YAAC,KAAK;4BACV,OAAO;gCAEL,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;6BAC3D,CAAC;wBACJ,CAAC;qBACF;iBACF;gBACD,SAAS,EAAE;oBACT,MAAM,EAAE;wBACN,IAAI,EAAE,KAAK;qBACZ;iBACF;gBACD,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;iBAC7B;gBAED,SAAS,EAAE;oBACT,MAAM,EAAE;wBACN,YAAY,EAAE,CAAC;qBAChB;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicPie/_example/RosePic.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function RosePic() {
+  const options = {
+    // tooltip: {
+    //  trigger: 'item',
+    //  formatter: "{a} <br/>{b}: {c} ({d}%)"
+    // },
+    title: {
+      text: '甜甜圈图测试用例1',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'pie',
+        radius: ['20%', '70%'],
+        roseType: 'area',
+        label: {
+          show: false,
+          layout: 'outer',
+          formatters: {
+            normal(param) {
+              return [
+                // 换行
+                { text: param.seriesName, font: '12px', color: '#3398DB' },
+              ];
+            },
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false,
+          },
+        },
+        data: [
+          { value: 110, name: '直接访问' },
+          { value: 140, name: '邮件营销' },
+          { value: 200, name: '联盟广告' },
+          { value: 250, name: '视频广告' },
+          { value: 300, name: '搜索引擎' },
+        ],
+        // 饼图按块划分时是否需要用线隔开，不需要注释即可
+        itemStyle: {
+          normal: {
+            dividerWidth: 5,
+          },
+        },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>通用玫瑰图</div>
+      <BasicPie height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicPie/_example/SpaceDonutPic.d.ts

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

package/dist/esm/basicPie/_example/SpaceDonutPic.js

@@ -0,0 +1,51 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function SpaceDonutPic() {
+    var options = {
+        title: {
+            text: '甜甜圈图测试用例1',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'pie',
+                radius: ['50%', '70%'],
+                label: {
+                    show: false,
+                    layout: 'outer',
+                    formatters: {
+                        normal: function (param) {
+                            return [
+                                { text: param.seriesName, font: '12px', color: '#3398DB' },
+                            ];
+                        },
+                    },
+                },
+                labelLine: {
+                    normal: {
+                        show: false,
+                    },
+                },
+                itemStyle: { borderWidth: 3, borderColor: 'white' },
+                data: [
+                    { value: 210, name: '直接访问' },
+                    { value: 140, name: '邮件营销' },
+                    { value: 501, name: '联盟广告' },
+                    { value: 1405, name: '视频广告' },
+                    { value: 181, name: '搜索引擎' },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u95F4\u9694\u751C\u751C\u5708\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=SpaceDonutPic.js.map

package/dist/esm/basicPie/_example/SpaceDonutPic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpaceDonutPic.js","sourceRoot":"","sources":["../../../../src/basicPie/_example/SpaceDonutPic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,aAAa;IACnC,IAAM,OAAO,GAAG;QAKd,KAAK,EAAE;YACL,IAAI,EAAE,WAAW;YACjB,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,KAAK;gBACX,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;gBACtB,KAAK,EAAE;oBACL,IAAI,EAAE,KAAK;oBACX,MAAM,EAAE,OAAO;oBACf,UAAU,EAAE;wBACV,MAAM,YAAC,KAAK;4BACV,OAAO;gCAEL,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;6BAC3D,CAAC;wBACJ,CAAC;qBACF;iBACF;gBACD,SAAS,EAAE;oBACT,MAAM,EAAE;wBACN,IAAI,EAAE,KAAK;qBACZ;iBACF;gBACD,SAAS,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE;gBACnD,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC5B,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE;oBAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE;iBAC7B;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,8EAAkB;QAClB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicPie/_example/SpaceDonutPic.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function SpaceDonutPic() {
+  const options = {
+    // tooltip: {
+    //  trigger: 'item',
+    //  formatter: "{a} <br/>{b}: {c} ({d}%)"
+    // },
+    title: {
+      text: '甜甜圈图测试用例1',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'pie',
+        radius: ['50%', '70%'],
+        label: {
+          show: false,
+          layout: 'outer',
+          formatters: {
+            normal(param) {
+              return [
+                // 换行
+                { text: param.seriesName, font: '12px', color: '#3398DB' },
+              ];
+            },
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false,
+          },
+        },
+        itemStyle: { borderWidth: 3, borderColor: 'white' },
+        data: [
+          { value: 210, name: '直接访问' },
+          { value: 140, name: '邮件营销' },
+          { value: 501, name: '联盟广告' },
+          { value: 1405, name: '视频广告' },
+          { value: 181, name: '搜索引擎' },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>带间隔甜甜圈图</div>
+      <BasicPie height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicPie/_example/SpacePic.d.ts

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

package/dist/esm/basicPie/_example/SpacePic.js

@@ -0,0 +1,40 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function SpacePic() {
+    var options = {
+        dataSource: [
+            {
+                name: 'CPU利用率',
+                label: {
+                    layout: 'inner',
+                    formatters: {
+                        normal: function () { },
+                        hover: function () { },
+                    },
+                },
+                radius: ['80%'],
+                type: 'pie',
+                itemStyle: { borderWidth: 3, borderColor: 'white' },
+                data: [
+                    {
+                        name: '(上周)CPU利用率',
+                        value: 9.816,
+                    },
+                    {
+                        name: '(当前)CPU利用率',
+                        value: 6.7,
+                    },
+                    {
+                        name: '(昨天)CPU利用率',
+                        value: 9.516,
+                    },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u95F4\u9694\u997C\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=SpacePic.js.map

package/dist/esm/basicPie/_example/SpacePic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacePic.js","sourceRoot":"","sources":["../../../../src/basicPie/_example/SpacePic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,IAAM,OAAO,GAAG;QACd,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE;oBACL,MAAM,EAAE,OAAO;oBACf,UAAU,EAAE;wBACV,MAAM,EAAE,cAAO,CAAC;wBAChB,KAAK,EAAE,cAAO,CAAC;qBAChB;iBACF;gBACD,MAAM,EAAE,CAAC,KAAK,CAAC;gBACf,IAAI,EAAE,KAAK;gBACX,SAAS,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE;gBACnD,IAAI,EAAE;oBACJ;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,GAAG;qBACX;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,KAAK;qBACb;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicPie/_example/SpacePic.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function SpacePic() {
+  const options = {
+    dataSource: [
+      {
+        name: 'CPU利用率',
+        label: {
+          layout: 'inner',
+          formatters: {
+            normal: () => {},
+            hover: () => {},
+          },
+        },
+        radius: ['80%'],
+        type: 'pie',
+        itemStyle: { borderWidth: 3, borderColor: 'white' },
+        data: [
+          {
+            name: '(上周)CPU利用率',
+            value: 9.816,
+          },
+          {
+            name: '(当前)CPU利用率',
+            value: 6.7,
+          },
+          {
+            name: '(昨天)CPU利用率',
+            value: 9.516,
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>带间隔饼图</div>
+      <BasicPie height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+---
+order: 0
+title: 基础饼图
+---
+
+基础饼图，广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类，所有区块（圆弧）相加的和等于 100%。
+
+````jsx
+import { BasicPie } from '@tencent/tcharts-component';
+
+var dataSource = [
+    {
+        name:'工具统计',
+        data:[
+            {value:100, name:'内置编排工具'},
+            {value:100, name:'自定义编排工具'},
+            {value:234, name:'内置公共工具'},
+            {value:235, name:'自定义公共工具'},
+            {value:1540, name:'自定义私有工具'}
+        ]
+    }
+];
+ReactDOM.render(
+  <div>
+    <BasicPie 
+        dataSource={dataSource}
+        height='500px'>
+    </BasicPie>
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,47 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, LegendOptions, ChartRef, GridOptions, Data } from '../_type';
+export interface PieProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+        subtext?: string;
+        textStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
+        subtextStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
+    };
+    tooltip?: ToolTipOptions;
+    legend?: LegendOptions;
+    theme?: string;
+    dataSource: Data[];
+    color?: string[];
+    grid?: GridOptions;
+    unit?: string | string[];
+    precision?: number;
+    chartRef?: (chart?: ChartRef) => void;
+}
+declare abstract class Pie<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class BasicPie extends Pie<PieProps> {
+    getOptions(props: any): {
+        title: any;
+        legend: any;
+        tooltip: any;
+        color: any;
+        series: any;
+        grid: any;
+        theme: any;
+        onEvent: any;
+        chartRef: any;
+    };
+    addExtendInfo(props: any): any;
+}
+export {};

package/dist/esm/basicPie/index.js

@@ -0,0 +1,34 @@
+import { __assign, __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addBasicPieOption } from '../common/optionsHelp';
+import { ChartPieComponent, ChartCore } from 'tvision-charts';
+var Pie = (function (_super) {
+    __extends(Pie, _super);
+    function Pie(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'pie';
+        ChartCore.use(ChartPieComponent);
+        return _this;
+    }
+    return Pie;
+}(ChartComponent));
+var BasicPie = (function (_super) {
+    __extends(BasicPie, _super);
+    function BasicPie() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicPie.prototype.getOptions = function (props) {
+        return addBasicPieOption(props || this.props);
+    };
+    BasicPie.prototype.addExtendInfo = function (props) {
+        var extendsParam = {};
+        var chartRef = props.chartRef;
+        if (chartRef) {
+            extendsParam.chartRef = chartRef;
+        }
+        return __assign(__assign({}, props), extendsParam);
+    };
+    return BasicPie;
+}(Pie));
+export default BasicPie;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicPie/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiE9D;IAAiD,uBAAiB;IAEhE,aAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,KAAK,CAAC;QAGhB,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;;IACnC,CAAC;IACH,UAAC;AAAD,CAAC,AAND,CAAiD,cAAc,GAM9D;AAED;IAAsC,4BAAa;IAAnD;;IAgBA,CAAC;IAfC,6BAAU,GAAV,UAAW,KAAK;QAEd,OAAO,iBAAiB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IACD,gCAAa,GAAb,UAAc,KAAK;QACjB,IAAM,YAAY,GAAG,EAAE,CAAC;QAChB,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;QAC3B,IAAI,QAAQ,EAAE,CAAC;YACZ,YAAoB,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5C,CAAC;QACD,6BACK,KAAK,GACL,YAAY,EACf;IACJ,CAAC;IACH,eAAC;AAAD,CAAC,AAhBD,CAAsC,GAAG,GAgBxC"}

package/dist/esm/basicPie/index.md

@@ -0,0 +1,27 @@
+---
+category: Charts
+title: BasicPie
+subtitle: 基础饼图
+cols: 1
+type: 饼图
+author: minchang,卢耀和
+---
+相对饼图，环图采用了让我们更关注长度而不是面积的做法。这样我们就能相对简单的对比不同的环图。同时环图相对于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信息，比如标题等。
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+title | 饼图的标题 | string | - |
+legend | 图例的配置项。通过该配置项可以配置图例是否显示 | object | legend:{show:true}|
+color | 定制饼图的颜色 | string[] | - | 
+dataSource  | 数据列表 | array | - |
+height |  图表的高度 | number | - |
+
+
+
+

package/dist/esm/basicSankey/README.md

@@ -0,0 +1,12 @@
+# BasicSankey 桑基图
+
+桑基图
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 桑基图
+
+[Example: 桑基图](./_example/Basic.jsx)
+

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

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

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

@@ -0,0 +1,75 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicSankey } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        legend: {
+            show: false,
+        },
+        dataSource: [
+            {
+                type: 'sankey',
+                layout: 'none',
+                emphasis: {
+                    focus: 'adjacency',
+                },
+                data: [
+                    {
+                        name: 'a',
+                    },
+                    {
+                        name: 'b',
+                    },
+                    {
+                        name: 'a1',
+                    },
+                    {
+                        name: 'a2',
+                    },
+                    {
+                        name: 'b1',
+                    },
+                    {
+                        name: 'c',
+                    },
+                ],
+                links: [
+                    {
+                        source: 'a',
+                        target: 'a1',
+                        value: 5,
+                    },
+                    {
+                        source: 'a',
+                        target: 'a2',
+                        value: 3,
+                    },
+                    {
+                        source: 'b',
+                        target: 'b1',
+                        value: 8,
+                    },
+                    {
+                        source: 'a',
+                        target: 'b1',
+                        value: 3,
+                    },
+                    {
+                        source: 'b1',
+                        target: 'a1',
+                        value: 1,
+                    },
+                    {
+                        source: 'b1',
+                        target: 'c',
+                        value: 2,
+                    },
+                ],
+            },
+        ]
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u57FA\u7840\u6851\u57FA\u56FE"),
+        React.createElement(BasicSankey, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicSankey/_example/Basic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,OAAO,UAAU,KAAK;IAE3B,IAAM,OAAO,GAAG;QACd,MAAM,EAAE;YACN,IAAI,EAAE,KAAK;SACZ;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE;oBACR,KAAK,EAAE,WAAW;iBACnB;gBACD,IAAI,EAAE;oBACJ;wBACE,IAAI,EAAE,GAAG;qBACV;oBACD;wBACE,IAAI,EAAE,GAAG;qBACV;oBACD;wBACE,IAAI,EAAE,IAAI;qBACX;oBACD;wBACE,IAAI,EAAE,IAAI;qBACX;oBACD;wBACE,IAAI,EAAE,IAAI;qBACX;oBACD;wBACE,IAAI,EAAE,GAAG;qBACV;iBACF;gBACD,KAAK,EAAE;oBACL;wBACE,MAAM,EAAE,GAAG;wBACX,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,CAAC;qBACT;oBACD;wBACE,MAAM,EAAE,GAAG;wBACX,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,CAAC;qBACT;oBACD;wBACE,MAAM,EAAE,GAAG;wBACX,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,CAAC;qBACT;oBACD;wBACE,MAAM,EAAE,GAAG;wBACX,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,CAAC;qBACT;oBACD;wBACE,MAAM,EAAE,IAAI;wBACZ,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,CAAC;qBACT;oBACD;wBACE,MAAM,EAAE,IAAI;wBACZ,MAAM,EAAE,GAAG;wBACX,KAAK,EAAE,CAAC;qBACT;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,WAAW,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACxC,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { BasicSankey } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  // const chartDom = useRef(null);
+  const options = {
+    legend: {
+      show: false,
+    },
+    dataSource: [
+      {
+        type: 'sankey',
+        layout: 'none',
+        emphasis: {
+          focus: 'adjacency',
+        },
+        data: [
+          {
+            name: 'a',
+          },
+          {
+            name: 'b',
+          },
+          {
+            name: 'a1',
+          },
+          {
+            name: 'a2',
+          },
+          {
+            name: 'b1',
+          },
+          {
+            name: 'c',
+          },
+        ],
+        links: [
+          {
+            source: 'a',
+            target: 'a1',
+            value: 5,
+          },
+          {
+            source: 'a',
+            target: 'a2',
+            value: 3,
+          },
+          {
+            source: 'b',
+            target: 'b1',
+            value: 8,
+          },
+          {
+            source: 'a',
+            target: 'b1',
+            value: 3,
+          },
+          {
+            source: 'b1',
+            target: 'a1',
+            value: 1,
+          },
+          {
+            source: 'b1',
+            target: 'c',
+            value: 2,
+          },
+        ],
+      },
+    ]
+  };
+
+  return (
+    <>
+      <div>基础桑基图</div>
+      <BasicSankey height={500} {...options} />
+    </>
+  );
+}