tvision-charts-component 3.3.24

package/README.md

@@ -0,0 +1,40 @@
+# TCharts 图表的 React 封装
+
+## 文档 & 示例
+
+官网: https://tcharts.woa.com/
+
+<!--<ComponentTOC>-->
+
+- 折线图
+  - [x] [BasicLine](./src/basicLine) - 折线图
+- 柱状图
+  - [x] [BasicBar](./src/basicBar) - 柱状图
+- 磁盘分区图
+  - [x] [BasicHBar](./src/diskPart) - 磁盘分区图
+- 漏斗图
+  - [x] [BasicFunnel](./src/basicFunnel) - 漏斗图
+- 饼图
+  - [x] [BasicPie](./src/basicPie) - 饼图
+- 仪表盘
+  - [x] [BasicGauge](./src/basicGauge) - 仪表盘
+- 统计数字
+  - [x] [BasicStat](./src/basicStat) - 统计数字
+- 热力图
+  - [x] [BasicHeatMap](./src/basicHeatMap) - 热力图
+- 水球图
+  - [x] [LiquidFillChart](./src/liquidFillChart) - 水球图
+- 雷达图
+  - [x] [RadarChart](./src/radarChart) - 雷达图
+- 拓扑图
+  - [x] [BasicTopo](./src/basicTopo) - 拓扑图
+- 地图
+  - [x] [BasicMap](./src/basicMap) - 地图
+- 桑基图
+  - [x] [BasicSankey](./src/basicSankey) - 桑基图
+- 火焰图
+  - [x] [BasicFlame](./src/basicFlame) - 火焰图
+- 词云
+  - [x] [Wordcloud](./src/wordcloud) - 词云
+
+<!--</ComponentTOC>-->

package/dist/esm/_type/chart.d.ts

@@ -0,0 +1,6 @@
+import { EventData } from './data';
+export interface ChartRef {
+    on?: (name?: string, evt?: any) => void;
+    emit?: (name?: string, evt?: any) => void;
+    getData?: (x?: number) => EventData;
+}

package/dist/esm/_type/chart.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chart.js.map

package/dist/esm/_type/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../src/_type/chart.ts"],"names":[],"mappings":""}

package/dist/esm/_type/data.d.ts

@@ -0,0 +1,40 @@
+export type ShapeType = 'line' | 'bar' | 'pie';
+export interface MetaData {
+    value?: number;
+    valueText?: string;
+    color?: string;
+    label?: string;
+    serieName?: string;
+    title?: string;
+    percentage?: number;
+    row?: Data;
+}
+export interface EventData {
+    x?: number;
+    y?: number;
+    category?: string;
+    metaData?: MetaData[];
+    index?: number;
+}
+export interface Data {
+    [key: string]: any;
+}
+export type DataSource = Data[];
+export interface DataLeaf {
+    value?: number;
+    stackValue?: number;
+    category?: string;
+    colorName?: string;
+    serieName?: string;
+    origin?: Data;
+    percent?: number;
+    stackPercent?: number;
+}
+export interface LegendData {
+    label?: string;
+    color?: string;
+    key?: string;
+    type?: ShapeType;
+    index?: number;
+    values?: DataLeaf[];
+}

package/dist/esm/_type/data.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data.js.map

package/dist/esm/_type/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sourceRoot":"","sources":["../../../src/_type/data.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export * from './chart';
+export * from './data';
+export * from './options';

package/dist/esm/_type/index.js

@@ -0,0 +1,4 @@
+export * from './chart';
+export * from './data';
+export * from './options';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/_type/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

package/dist/esm/_type/options.d.ts

@@ -0,0 +1,83 @@
+export interface LegendOptions {
+    show?: boolean;
+    data?: Array<any>;
+    formatter?: string | Function;
+}
+export interface AxisOptions {
+    show?: boolean;
+    type?: string;
+    name?: string;
+    boundaryGap?: boolean;
+    axisLabel?: AxisLabelOptions;
+    data?: Array<any>;
+}
+export interface ToolTipOptions {
+    trigger?: string;
+    show?: boolean;
+    axisPointer?: {
+        type?: string;
+        shadowStyle?: React.CSSProperties;
+    };
+    formatter?: string | Function;
+    enterable?: boolean;
+}
+export interface AxisLabelOptions {
+    show?: boolean;
+    inside?: boolean;
+    autoHidden?: boolean;
+    rotate?: number;
+    formatter?: string | Function;
+}
+export interface ZoomOptions {
+    resetText?: string;
+}
+export interface GridOptions {
+    id?: string;
+    show?: boolean;
+    left?: string | number;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    containLabel?: boolean;
+}
+export type InteractionType = 'element-select' | 'element-hover' | 'zoom' | 'brush';
+export type InteractionOptions = {
+    [type in InteractionType]?: {
+        [option: string]: ZoomOptions | any;
+    };
+};
+export interface MarkLineOptions {
+    symbol?: string | Array<any>;
+    lineStyle?: {
+        normal?: {
+            color?: string;
+            width?: number;
+            type?: string;
+            opacity?: number;
+        };
+    };
+}
+export interface MarkAreaOptions {
+    data: Array<any>;
+}
+export interface RadarOptions {
+    id?: string;
+    shape?: string;
+    name?: Object;
+    splitLine?: Object;
+    splitArea?: Object;
+    axisLine?: Object;
+}
+export interface DataZoomOptions {
+    show?: boolean;
+    enable?: boolean;
+    showResetBtn?: boolean;
+    resetText?: string;
+    type?: string;
+    strokeColor?: string;
+    fillColor?: string;
+    fillOpacity?: number;
+    height?: number;
+    btnStrokeColor?: string;
+    btnFillColor?: string;
+}

package/dist/esm/_type/options.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=options.js.map

package/dist/esm/_type/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/_type/options.ts"],"names":[],"mappings":""}

package/dist/esm/basicBar/README.md

@@ -0,0 +1,79 @@
+# BasicBar 基础柱状图
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础柱状图
+
+[Example: 基础柱状图](./_example/Basic.jsx)
+
+### Y 轴支持负值
+
+[Example: Y 轴支持负值](./_example/YaxisNegativeBasicBar.jsx)
+
+### 堆叠柱状图
+
+[Example: 堆叠柱状图](./_example/StackedBar.jsx)
+
+### 分组柱状图
+
+[Example: 分组柱状图](./_example/GroupedBar.jsx)
+
+### 横向柱状图
+
+[Example: 横向柱状图](./_example/HorizontalBar.jsx)
+
+### 横向堆叠图
+
+[Example: 横向堆叠图](./_example/HorizontalStackedBar.jsx)
+
+### X 轴文本换行
+
+[Example: X 轴文本换行](./_example/XaxisLabelWrap.jsx)
+
+### 瀑布流图-x 轴在下方
+
+[Example: 瀑布流图-x 轴在下方](./_example/XaxisBelowWaterfall.jsx)
+
+### 瀑布流图-x 轴在上方
+
+[Example: 瀑布流图-x 轴在上方](./_example/XaxisTopWaterfall.jsx)
+
+### 瀑布流图-x 轴在上方并显示 label
+
+[Example: 瀑布流图-x 轴在上方并显示 label](./_example/XaxisTopWaterfallWithLabel.jsx)
+
+### 固定宽度的柱状图
+
+[Example: 固定宽度的柱状图](./_example/FixedWidthBar.jsx)
+
+### 自定义单个柱子的颜色
+
+[Example: 自定义单个柱子的颜色](./_example/CustomColorSingleBar.jsx)
+
+### 竖直的瀑布流图
+
+[Example: 竖直的瀑布流图](./_example/VerticalWaterfallBar.jsx)
+
+### 鸟瞰图模式
+
+[Example: 鸟瞰图模式](./_example/WaterfallHoverBar.jsx)
+
+### 带有斑马纹
+
+[Example: 带有斑马纹](./_example/WaterfallZebraBar.jsx)
+
+### 隐藏 x 坐标轴
+
+[Example: 隐藏 x 坐标轴](./_example/XaxisHideBar.jsx)
+
+### 支持 Y 轴反序和缩放
+
+[Example: 支持 Y 轴反序和缩放](./_example/YaxisReverseZoomBar.jsx)
+
+## 组件属性
+
+[Interface: BasicBarProps](./index.tsx)

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

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

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

@@ -0,0 +1,29 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        xAxis: {
+            boundaryGap: true,
+            axisLabel: { inside: false },
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisTick: {
+                alignWithLabel: true,
+            },
+        },
+        dataSource: [
+            {
+                name: '日志数量',
+                type: 'bar',
+                barWidth: '30%',
+                barMaxWidth: 30,
+                data: [10, 52, 200, 334, 390, 330, 220],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u57FA\u7840\u67F1\u72B6\u56FE"),
+        React.createElement(BasicBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/Basic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,OAAO,GAAG;QACd,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAC5B,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;YACvD,QAAQ,EAAE;gBACR,cAAc,EAAE,IAAI;aACrB;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,KAAK;gBACf,WAAW,EAAE,EAAE;gBACf,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;aACxC;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/basicBar/_example/Basic.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    xAxis: {
+      boundaryGap: true,
+      axisLabel: { inside: false },
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+    },
+    dataSource: [
+      {
+        name: '日志数量',
+        type: 'bar',
+        barWidth: '30%',
+        barMaxWidth: 30,
+        data: [10, 52, 200, 334, 390, 330, 220],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>基础柱状图</div>
+      <BasicBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicBar/_example/CustomColorSingleBar.d.ts

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

package/dist/esm/basicBar/_example/CustomColorSingleBar.js

@@ -0,0 +1,58 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function CustomColorSingleBar() {
+    var options = {
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            type: 'time',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+            },
+        },
+        legend: {
+            align: 'left',
+            show: true,
+        },
+        grid: { left: 10, right: 10, bottom: 10, top: 10, containLabel: true },
+        xAxis: {
+            boundaryGap: true,
+            axisLabel: {
+                inside: false,
+            },
+            type: 'category',
+            data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+            axisTick: {
+                alignWithLabel: true,
+            },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: { show: true, inside: false },
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                },
+            },
+        ],
+        dataSource: [
+            {
+                name: '直接访问',
+                type: 'bar',
+                barWidth: 10,
+                color: ['#529DFF', '#529DFF', '#529DFF', '#529DFF', '#529DFF', '#F54E4E', '#529DFF', '#529DFF', '#529DFF'],
+                data: [60, 80, 90, 10, 110, 260, 50, 200, 10, 150, 200, 88, 120],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u81EA\u5B9A\u4E49\u5355\u4E2A\u67F1\u5B50\u7684\u989C\u8272"),
+        React.createElement(BasicBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=CustomColorSingleBar.js.map

package/dist/esm/basicBar/_example/CustomColorSingleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomColorSingleBar.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/CustomColorSingleBar.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,IAAM,OAAO,GAAG;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE;gBAEX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE;oBACX,KAAK,EAAE,SAAS;iBACjB;aACF;SACF;QACD,MAAM,EAAE;YACN,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,IAAI;SACX;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QACtE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,SAAS,EAAE;gBACT,MAAM,EAAE,KAAK;aAId;YACD,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;YACjH,QAAQ,EAAE;gBACR,cAAc,EAAE,IAAI;aACrB;SACF;QACD,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;gBAEvC,SAAS,EAAE;oBACT,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE,KAAK;oBACb,MAAM,EAAE,CAAC;iBACV;aACF;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,EAAE;gBACZ,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;gBAC1G,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC;aACjE;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,gGAAqB;QACrB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function CustomColorSingleBar() {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      type: 'time',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+      },
+    },
+    legend: {
+      align: 'left',
+      show: true,
+    },
+    grid: { left: 10, right: 10, bottom: 10, top: 10, containLabel: true },
+    xAxis: {
+      boundaryGap: true,
+      axisLabel: {
+        inside: false,
+        //     formatter: (params) => {
+        //      return '';
+        //   }
+      },
+      type: 'category',
+      data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: { show: true, inside: false }, // 轴
+        // 精度调节
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+        },
+      },
+    ],
+    dataSource: [
+      {
+        name: '直接访问',
+        type: 'bar',
+        barWidth: 10,
+        color: ['#529DFF', '#529DFF', '#529DFF', '#529DFF', '#529DFF', '#F54E4E', '#529DFF', '#529DFF', '#529DFF'],
+        data: [60, 80, 90, 10, 110, 260, 50, 200, 10, 150, 200, 88, 120],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>自定义单个柱子的颜色</div>
+      <BasicBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicBar/_example/FixedWidthBar.d.ts

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

package/dist/esm/basicBar/_example/FixedWidthBar.js

@@ -0,0 +1,57 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function FixedWidthBar() {
+    var options = {
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            type: 'time',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+            },
+        },
+        legend: {
+            align: 'left',
+            show: true,
+        },
+        grid: { left: 10, right: 10, bottom: 10, top: 10, containLabel: true },
+        xAxis: {
+            boundaryGap: true,
+            axisLabel: {
+                inside: false,
+            },
+            type: 'category',
+            data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00'],
+            axisTick: {
+                alignWithLabel: true,
+            },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: { show: true, inside: false },
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                },
+            },
+        ],
+        dataSource: [
+            {
+                name: '直接访问',
+                type: 'bar',
+                barWidth: 10,
+                data: [60, 80, 90, 10, 110, 260, 50, 200, 10, 150],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u56FA\u5B9A\u5BBD\u5EA6\u7684\u67F1\u72B6\u56FE"),
+        React.createElement(BasicBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=FixedWidthBar.js.map

package/dist/esm/basicBar/_example/FixedWidthBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedWidthBar.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/FixedWidthBar.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;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE;gBAEX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE;oBACX,KAAK,EAAE,SAAS;iBACjB;aACF;SACF;QACD,MAAM,EAAE;YACN,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,IAAI;SACX;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QACtE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,SAAS,EAAE;gBACT,MAAM,EAAE,KAAK;aAId;YACD,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;YACtF,QAAQ,EAAE;gBACR,cAAc,EAAE,IAAI;aACrB;SACF;QACD,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;gBAEvC,SAAS,EAAE;oBACT,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE,KAAK;oBACb,MAAM,EAAE,CAAC;iBACV;aACF;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,EAAE;gBAEZ,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC;aACnD;SA2BF;KACF,CAAC;IAEF,OAAO,CACL;QACE,oFAAmB;QACnB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function FixedWidthBar() {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      type: 'time',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+      },
+    },
+    legend: {
+      align: 'left',
+      show: true,
+    },
+    grid: { left: 10, right: 10, bottom: 10, top: 10, containLabel: true },
+    xAxis: {
+      boundaryGap: true,
+      axisLabel: {
+        inside: false,
+        //     formatter: (params) => {
+        //      return '';
+        //   }
+      },
+      type: 'category',
+      data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: { show: true, inside: false }, // 轴
+        // 精度调节
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+        },
+      },
+    ],
+    dataSource: [
+      {
+        name: '直接访问',
+        type: 'bar',
+        barWidth: 10,
+        // stack:'a',
+        data: [60, 80, 90, 10, 110, 260, 50, 200, 10, 150],
+      },
+      // {
+      //     name: '请求数量',
+      //     type: 'bar',
+      //     barWidth: 100,
+      //     stack:'a',
+      //     data: [-100, 520, 20, 33, 39, 33, 22]
+      // },
+      // {
+      //     name: '服务器数量',
+      //     type: 'bar',
+      //     barWidth: 100,
+      //     stack:'a',
+      //     data: [-110, 152, 120, 300, 390, 330, 122]
+      // },
+      // {
+      //     name: 'IP数量',
+      //     type: 'bar',
+      //     barWidth: 100,
+      //     data: [130, 112, 160, 90, 100, 30, 122]
+      // },
+      // {
+      //     name: '日志level',
+      //     type: 'bar',
+      //     barWidth: 100,
+      //     data: [130, 112, 160, 90, 100, 30, 122]
+      // }
+    ],
+  };
+
+  return (
+    <>
+      <div>固定宽度的柱状图</div>
+      <BasicBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicBar/_example/GroupedBar.d.ts

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