tvision-charts-component 3.3.24

package/dist/esm/basicBar/_example/YaxisReverseZoomBar.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function YaxisReverseZoomBar() {
+  const options = {
+    color: ['#3398DB'],
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+        clickStyle: {
+          color: '#CED1F8',
+        },
+      },
+      formatter(params) {
+        const tar = params[1];
+        return `${tar.axisValueLabel}<br/>${tar.seriesName} : ${tar.value}`;
+      },
+      itemSelect: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      show: false,
+    },
+    grid: { left: 0, right: 30, bottom: 0, top: 0, containLabel: false },
+    dataZoom: [{ start: 0 }, { type: 'inside', show: false, showResetBtn: true, resetText: '重置', enable: true }],
+    yAxis: {
+      boundaryGap: true,
+      axisLabel: {
+        inside: false,
+        show: true,
+        // formatter: function (params) {
+        //     var tar = params[1];
+        //     // debugger
+        //     return '';
+        // }
+      },
+      type: 'category',
+      data: ['总耗时', '函数1', '函数2', '函数3', '函数3', '函数5', '函数6'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+      inverse: true,
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLine: { show: true, inside: false }, // 轴
+        // 精度调节
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+          position: 'left',
+          formatter(params) {
+            // debugger
+            return `${params}ms`;
+          },
+        },
+      },
+    ],
+    dataSource: [
+      {
+        name: '辅助',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '60%',
+        // showBackground: true,
+        // backgroundStyle: {
+        //     color: 'rgba(180, 180, 180, 0.2)'
+        // },
+        itemStyle: {
+          barBorderColor: '#ffff',
+          color: 'rgba(0,0,0,0)',
+        },
+        emphasis: {
+          itemStyle: {
+            barBorderColor: 'rgba(0,0,0,0)',
+            color: 'rgba(0,0,0,0)',
+          },
+        },
+        data: [0, 1700, 1400, 1200, 300, 200, 0],
+        // data: [0]
+      },
+      {
+        name: '耗时',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '60%',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(180, 180, 180, 0.2)',
+          interval: true,
+        },
+        itemStyle: {
+          barBorderColor: '#ffff',
+          // color支持“字符串”和“数组”两种类型
+          color: [
+            'rgba(82, 157, 255, 0.9)',
+            'rgba(120, 189, 109, 0.9)',
+            'rgba(99, 205, 214, 0.9)',
+            'rgba(114, 105, 240, 0.9)',
+            'rgba(55, 191, 134, 0.9)',
+            'rgba(255, 127, 71, 0.9)',
+            'rgba(245, 78, 78, 0.9)',
+            'rgba(164, 99, 214, 0.9)',
+            'rgba( 219, 75, 142, 0.9)',
+          ],
+          // color: 'rgba(82, 157, 255, 0.9)',
+        },
+        label: {
+          show: true,
+          position: 'right',
+          formatter(params) {
+            return `${params}ms`;
+          },
+        },
+        data: [2900, 1200, 3, 200, 900, 100, 200],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>支持Y轴反序和缩放</div>
+      <BasicBar height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+---
+order: 0
+title: 基础柱状图
+---
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+````jsx
+import { BasicBar} from '@tencent/tcharts-component';
+
+var xAxis = {
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+};
+var dataSource = [
+    {
+        name: '日志数量',
+        type: 'bar',
+        barWidth: '60%',
+        data: [10, 52, 200, 334, 390, 330, 220]
+    }
+];
+
+  
+ReactDOM.render(
+  <div>
+    <BasicBar 
+        xAxis={xAxis}
+        dataSource={dataSource}
+        height = '500px'>
+        默认
+    </BasicBar>
+  </div>
+, mountNode);
+````

package/dist/esm/basicBar/demo/labelRotate.md

@@ -0,0 +1,35 @@
+---
+order: 0
+title: x轴文字旋转的柱状图
+---
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+````jsx
+import { BasicBar} from '@tencent/tcharts-component';
+
+var xAxis = {
+    axisLabel: { rotate: 60 },
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+};
+var dataSource = [
+    {
+        name: '日志数量',
+        type: 'bar',
+        barWidth: '60%',
+        data: [10, 52, 200, 334, 390, 330, 220]
+    }
+];
+
+  
+ReactDOM.render(
+  <div>
+    <BasicBar 
+        xAxis={xAxis}
+        dataSource={dataSource}
+        height = '500px'>
+        默认
+    </BasicBar>
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,56 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, LegendOptions, AxisOptions, GridOptions, Data, ChartRef } from '../_type';
+export interface BasicBarProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+        textStyle?: {
+            color?: string;
+        };
+    };
+    tooltip?: ToolTipOptions;
+    legend?: LegendOptions;
+    animation?: boolean;
+    xAxis?: AxisOptions;
+    yAxis?: AxisOptions;
+    theme?: string;
+    dataSource: Data[];
+    color?: string[];
+    grid?: GridOptions;
+    unit?: string | string[];
+    dataZoom?: any[];
+    large?: boolean;
+    chartRef?: (chart?: ChartRef) => void;
+}
+declare abstract class Bar<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class BasicBar extends Bar<BasicBarProps> {
+    getOptions(props: any): {
+        title: any;
+        legend: any;
+        xAxis: any;
+        yAxis: any;
+        dataZoom: any;
+        tooltip: any;
+        color: any;
+        series: any;
+        grid: any;
+        theme: any;
+        pointSelectedAnimation: any;
+        onEvent: any;
+        chartRef: any;
+        markLine: any;
+        markArea: any;
+        interaction: any;
+        stat: any;
+        animation: any;
+        large: any;
+        height: any;
+        width: any;
+    };
+}
+export {};

package/dist/esm/basicBar/index.js

@@ -0,0 +1,42 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addDefaultOption } from '../common/optionsHelp';
+import { ChartBarComponent, ChartCore } from 'tvision-charts';
+var Bar = (function (_super) {
+    __extends(Bar, _super);
+    function Bar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'Bar';
+        ChartCore.use(ChartBarComponent);
+        return _this;
+    }
+    return Bar;
+}(ChartComponent));
+var BasicBar = (function (_super) {
+    __extends(BasicBar, _super);
+    function BasicBar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicBar.prototype.getOptions = function (props) {
+        var _a;
+        var options = addDefaultOption(props || this.props, true);
+        if (!Array.isArray(options.xAxis)) {
+            options.xAxis.boundaryGap = true;
+        }
+        if (!((_a = options.tooltip) === null || _a === void 0 ? void 0 : _a.axisPointer)) {
+            options.tooltip.axisPointer = {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+                clickStyle: {
+                    color: '#CED1F8',
+                },
+            };
+        }
+        return options;
+    };
+    return BasicBar;
+}(Bar));
+export default BasicBar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicBar/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA8E9D;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,4BAAkB;IAAxD;;IAmBA,CAAC;IAlBC,6BAAU,GAAV,UAAW,KAAK;;QACd,IAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,WAAW,CAAA,EAAE,CAAC;YAClC,OAAO,CAAC,OAAO,CAAC,WAAW,GAAG;gBAC5B,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE;oBACX,KAAK,EAAE,SAAS;iBACjB;gBACD,UAAU,EAAE;oBACV,KAAK,EAAE,SAAS;iBACjB;aACF,CAAC;QACJ,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IACH,eAAC;AAAD,CAAC,AAnBD,CAAsC,GAAG,GAmBxC"}

package/dist/esm/basicBar/index.md

@@ -0,0 +1,30 @@
+---
+category: Charts
+title: BasicBar
+subtitle: 基础柱状图
+cols: 1
+type: 柱状图
+author: minchang,卢耀和
+---
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+title | 柱状图的标题 | string | - |
+legend | 图例的配置项。通过该配置项可以配置图例是否显示 | object | legend:{show:true}|
+xAxis | 类目数据xAxis.data 为一个数组，如果不指定而是从 series.data 中获取| array | - |
+color | 定制图表的颜色 | string[] | - | 
+dataSource  | 数据列表 | array | - |
+height |  图表的高度 | number | - |
+unit | 定制y轴和tooltip中的单位 | string[] | - |
+
+
+
+

package/dist/esm/basicFlame/README.md

@@ -0,0 +1,56 @@
+# Flame 火焰图
+火焰图。火焰图以一个全局的视野来看待时间分布，它从底部往顶部，列出所有可能导致性能瓶颈的调用栈。火焰图的调用顺序从下到上，每个方块代表一个函数，它上面一层表示这个函数会调用哪些函数，方块的大小代表了占用 CPU 使用的长短。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础火焰图
+
+[Example: 基础火焰图](./_example/Basic.jsx)
+
+### 定高火焰图
+
+火焰图默认高度计算是根据火焰图数据计算而来，可以通过传入height，自定义火焰图高度
+
+[Example: 定高火焰图](./_example/HeightBasic.jsx)
+
+### 自定义填充色火焰图
+
+[Example: 自定义填充色火焰图](./_example/FillBasic.jsx)
+
+### 自定义矩形展示文本颜色
+
+[Example: 自定义矩形展示文本颜色](./_example/LabelBasic.jsx)
+
+### 重置&描述
+
+[Example: 重置火焰图](./_example/ResetBasic.jsx)
+
+### 自带背景的火焰图
+
+火焰图内部实现了业界通用的渐变背景色，可以通过```startColor```及```stopColor```来自定义背景颜色
+
+[Example: 自带背景火焰图](./_example/BackgroundBasic.jsx)
+
+
+### 配置火焰图色调
+
+配置火焰图展示色调，可传入：''（默认）| 'cold'
+
+[Example: 配置色调火焰图](./_example/HueBasic.jsx)
+
+
+### 配置火焰图方块可选颜色
+
+[Example: 配置火焰图可选颜色](./_example/ColorsBasic.jsx)
+
+### 数据量较大
+
+[Example: 大量数据火焰图1](./_example/LargeBasic1.jsx)
+
+[Example: 大量数据火焰图2](./_example/LargeBasic2.jsx)
+
+## 组件属性
+
+[Interface: FlameProps](./index.tsx)

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

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

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

@@ -0,0 +1,52 @@
+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',
+                backgroundStyle: {
+                    show: true,
+                },
+                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, "\u81EA\u5E26\u80CC\u666F\u7684\u706B\u7130\u56FE"),
+        React.createElement(BasicFlame, __assign({}, options))));
+}
+//# sourceMappingURL=BackgroundBasic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundBasic.js","sourceRoot":"","sources":["../../../../src/basicFlame/_example/BackgroundBasic.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,eAAe,EAAE;oBACf,IAAI,EAAE,IAAI;iBAGX;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,oFAAmB;QACnB,oBAAC,UAAU,eAAK,OAAO,EAAI,CAC1B,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { BasicFlame } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    dataSource: [
+      {
+        name: '火焰图test',
+        type: 'flame',
+        backgroundStyle: {
+          show: true,
+          // startColor: '#fff',
+          // stopColor: 'red'
+        },
+        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/_example/Basic.d.ts

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

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

@@ -0,0 +1,49 @@
+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',
+                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, "\u57FA\u7840\u706B\u7130\u56FE"),
+        React.createElement(BasicFlame, __assign({}, options))));
+}
+//# sourceMappingURL=Basic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicFlame/_example/Basic.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,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,kEAAgB;QAChB,oBAAC,UAAU,eAAK,OAAO,EAAI,CAC1B,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BasicFlame } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    dataSource: [
+      {
+        name: '火焰图test',
+        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 },
+          ],
+        },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>基础火焰图</div>
+      <BasicFlame {...options} />
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,50 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicFlame } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        color: ['#FFF8B8', '#EF961D', '#E34D59'],
+        dataSource: [
+            {
+                name: '火焰图test',
+                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 },
+                    ],
+                },
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u81EA\u5B9A\u4E49\u706B\u7130\u56FE\u53EF\u9009\u8272\u503C"),
+        React.createElement(BasicFlame, __assign({}, options))));
+}
+//# sourceMappingURL=ColorsBasic.js.map