tvision-charts-component 3.3.24

package/dist/esm/diskPart/_example/MultipleDiskPart.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+
+export default function MultipleDiskPart() {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 20,
+      top: 100,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      unit: 'GB',
+      formatter: (value) => {
+        console.log(value);
+        return value;
+      },
+    },
+    yAxis: {
+      type: 'category',
+      description: [],
+      data: ['ins-dtrqhgh1', 'ins-dtrqhgh2', 'ins-dtrqhgh3'],
+      axisLine: { show: true, lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' } },
+    },
+    dataSource: [
+      { name: 'CPU利用率1', names: ['A', 'B', 'C'], type: 'HBar', data: [3.766, 10, 20], maxData: [40, 50, 50] },
+      { name: 'CPU利用率2', names: ['D'], type: 'HBar', data: [4.883], maxData: [30] },
+      { name: 'CPU利用率3', names: ['E', 'F'], type: 'HBar', data: [3.11, 6.43], maxData: [20, 60] },
+    ],
+  };
+  return (
+    <>
+      <div>多个磁盘分区图</div>
+      <BasicHBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/diskPart/_example/SingleDiskPart.d.ts

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

package/dist/esm/diskPart/_example/SingleDiskPart.js

@@ -0,0 +1,43 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+export default function SingleDiskPart() {
+    var options = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+        },
+        grid: {
+            left: 20,
+            right: 20,
+            bottom: 20,
+            top: 100,
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'value',
+            unit: 'GB',
+            formatter: function (value) {
+                console.log(value);
+                return value;
+            },
+        },
+        yAxis: {
+            type: 'category',
+            description: [],
+            data: ['ins-dtrqhgh1', 'ins-dtrqhgh2', 'ins-dtrqhgh3'],
+            axisLine: { show: true, lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' } },
+        },
+        dataSource: [
+            { name: 'CPU利用率1', names: ['A'], type: 'HBar', data: [3.766], maxData: [40] },
+            { name: 'CPU利用率2', names: ['B'], type: 'HBar', data: [4.883], maxData: [30] },
+            { name: 'CPU利用率3', names: ['C'], type: 'HBar', data: [2.11], maxData: [60] },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5355\u4E2A\u78C1\u76D8\u5206\u533A\u56FE"),
+        React.createElement(BasicHBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=SingleDiskPart.js.map

package/dist/esm/diskPart/_example/SingleDiskPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleDiskPart.js","sourceRoot":"","sources":["../../../../src/diskPart/_example/SingleDiskPart.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,IAAM,OAAO,GAAG;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBAEX,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,GAAG;YACR,YAAY,EAAE,IAAI;SACnB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,UAAC,KAAK;gBACf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACnB,OAAO,KAAK,CAAC;YACf,CAAC;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,EAAE;YACf,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC;YACtD,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;SACnF;QACD,UAAU,EAAE;YACV,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;YAC7E,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;YAC7E,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;SAC7E;KACF,CAAC;IACF,OAAO,CACL;QACE,8EAAkB;QAClB,oBAAC,SAAS,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACtC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/diskPart/_example/SingleDiskPart.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+
+export default function SingleDiskPart() {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 20,
+      top: 100,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      unit: 'GB',
+      formatter: (value) => {
+        console.log(value);
+        return value;
+      },
+    },
+    yAxis: {
+      type: 'category',
+      description: [],
+      data: ['ins-dtrqhgh1', 'ins-dtrqhgh2', 'ins-dtrqhgh3'],
+      axisLine: { show: true, lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' } },
+    },
+    dataSource: [
+      { name: 'CPU利用率1', names: ['A'], type: 'HBar', data: [3.766], maxData: [40] },
+      { name: 'CPU利用率2', names: ['B'], type: 'HBar', data: [4.883], maxData: [30] },
+      { name: 'CPU利用率3', names: ['C'], type: 'HBar', data: [2.11], maxData: [60] },
+    ],
+  };
+  return (
+    <>
+      <div>单个磁盘分区图</div>
+      <BasicHBar height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { ToolTipOptions, LegendOptions, AxisOptions, GridOptions, Data } from '../_type';
+import { HBar } from '../basicHBar';
+export interface HBarProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+    };
+    tooltip?: ToolTipOptions;
+    legend?: LegendOptions;
+    xAxis?: AxisOptions;
+    yAxis?: AxisOptions;
+    theme?: string;
+    dataSource: Data[];
+    color?: string[];
+    grid?: GridOptions;
+}
+export default class BasicHBar extends HBar<HBarProps> {
+    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;
+    };
+}

package/dist/esm/diskPart/index.js

@@ -0,0 +1,25 @@
+import { __extends } from "tslib";
+import { addDefaultOption } from '../common/optionsHelp';
+import { HBar } from '../basicHBar';
+var BasicHBar = (function (_super) {
+    __extends(BasicHBar, _super);
+    function BasicHBar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicHBar.prototype.getOptions = function (props) {
+        var options = addDefaultOption(props || this.props, true);
+        if (!Array.isArray(options.xAxis)) {
+            options.xAxis.boundaryGap = true;
+        }
+        options.tooltip.axisPointer = {
+            type: 'shadow',
+            shadowStyle: {
+                color: '#e5e5e5',
+            },
+        };
+        return options;
+    };
+    return BasicHBar;
+}(HBar));
+export default BasicHBar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/diskPart/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAmDpC;IAAuC,6BAAe;IAAtD;;IAcA,CAAC;IAbC,8BAAU,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,OAAO,CAAC,OAAO,CAAC,WAAW,GAAG;YAC5B,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE;gBACX,KAAK,EAAE,SAAS;aACjB;SACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;IACH,gBAAC;AAAD,CAAC,AAdD,CAAuC,IAAI,GAc1C"}

package/dist/esm/index.d.ts

@@ -0,0 +1,16 @@
+export { default as BasicLine } from './basicLine';
+export { default as BasicBar } from './basicBar';
+export { default as BasicHBar } from './basicHBar';
+export { default as LiquidFillChart } from './liquidFillChart';
+export { default as BasicPie } from './basicPie';
+export { default as RadarChart } from './radarChart';
+export { default as BasicGauge } from './basicGauge';
+export { default as BasicStat } from './basicStat';
+export { default as BasicHeatMap } from './basicHeatMap';
+export { default as BasicMap } from './basicMap';
+export { default as BasicTopo } from './basicTopo';
+export { default as BasicFunnel } from './basicFunnel';
+export { default as BasicSankey } from './basicSankey';
+export { default as BasicFlame } from './basicFlame';
+export { default as Wordcloud } from './wordcloud';
+export { default as BasicTreeMap } from './basicTreeMap/basicTreeMap';

package/dist/esm/index.js

@@ -0,0 +1,17 @@
+export { default as BasicLine } from './basicLine';
+export { default as BasicBar } from './basicBar';
+export { default as BasicHBar } from './basicHBar';
+export { default as LiquidFillChart } from './liquidFillChart';
+export { default as BasicPie } from './basicPie';
+export { default as RadarChart } from './radarChart';
+export { default as BasicGauge } from './basicGauge';
+export { default as BasicStat } from './basicStat';
+export { default as BasicHeatMap } from './basicHeatMap';
+export { default as BasicMap } from './basicMap';
+export { default as BasicTopo } from './basicTopo';
+export { default as BasicFunnel } from './basicFunnel';
+export { default as BasicSankey } from './basicSankey';
+export { default as BasicFlame } from './basicFlame';
+export { default as Wordcloud } from './wordcloud';
+export { default as BasicTreeMap } from './basicTreeMap/basicTreeMap';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/esm/liquidFillChart/README.md

@@ -0,0 +1,19 @@
+# LiquidFillChart 水球图
+
+水球图(水位图)，是一种比例图，用一种形象有趣的形式表示占比。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础水球图
+
+[Example: 基础水球图](./_example/Basic.jsx)
+
+### 阈值水球图
+
+[Example: 阈值水球图](./_example/Basicx.jsx)
+
+## 组件属性
+
+[Interface: LiquidFillProps](./index.tsx)

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

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

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

@@ -0,0 +1,53 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { LiquidFillChart } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        title: {
+            text: '采集数据',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'liquidFill',
+                radius: '40%',
+                avoidLabelOverlap: false,
+                label: {
+                    normal: {
+                        show: false,
+                        position: 'center',
+                    },
+                    emphasis: {
+                        show: true,
+                        textStyle: {
+                            fontSize: '30',
+                            fontWeight: 'bold',
+                        },
+                    },
+                    formatters: {
+                        normal: function (param) {
+                            return [
+                                {
+                                    text: "".concat(param[0].value * 100, "%"),
+                                    font: '35px',
+                                    color: 'black',
+                                },
+                            ];
+                        },
+                    },
+                },
+                data: [{ value: 0.5 }, { value: 0.4 }],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u57FA\u7840\u6C34\u7403\u56FE"),
+        React.createElement(LiquidFillChart, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/liquidFillChart/_example/Basic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,OAAO,GAAG;QACd,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,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,YAAY;gBAClB,MAAM,EAAE,KAAK;gBACb,iBAAiB,EAAE,KAAK;gBACxB,KAAK,EAAE;oBACL,MAAM,EAAE;wBACN,IAAI,EAAE,KAAK;wBACX,QAAQ,EAAE,QAAQ;qBACnB;oBACD,QAAQ,EAAE;wBACR,IAAI,EAAE,IAAI;wBACV,SAAS,EAAE;4BACT,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,MAAM;yBACnB;qBACF;oBACD,UAAU,EAAE;wBACV,MAAM,YAAC,KAAK;4BACV,OAAO;gCACL;oCACE,IAAI,EAAE,UAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,MAAG;oCAChC,IAAI,EAAE,MAAM;oCACZ,KAAK,EAAE,OAAO;iCACf;6BACF,CAAC;wBACJ,CAAC;qBACF;iBACF;gBACD,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;aACvC;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,eAAe,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CAC5C,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { LiquidFillChart } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    title: {
+      text: '采集数据',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'liquidFill',
+        radius: '40%',
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            show: true,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold',
+            },
+          },
+          formatters: {
+            normal(param) {
+              return [
+                {
+                  text: `${param[0].value * 100}%`,
+                  font: '35px',
+                  color: 'black',
+                }, // 换行
+              ];
+            },
+          },
+        },
+        data: [{ value: 0.5 }, { value: 0.4 }],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>基础水球图</div>
+      <LiquidFillChart height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/liquidFillChart/_example/Basicx.d.ts

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

package/dist/esm/liquidFillChart/_example/Basicx.js

@@ -0,0 +1,73 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { LiquidFillChart } from '@tencent/tcharts-component';
+export default function Basicx() {
+    var options = {
+        title: {
+            text: '采集数据',
+            show: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+        },
+        dataSource: [
+            {
+                name: '访问来源',
+                type: 'liquidFill',
+                radius: '40%',
+                avoidLabelOverlap: false,
+                label: {
+                    normal: {
+                        show: false,
+                        position: 'center',
+                    },
+                    emphasis: {
+                        show: true,
+                        textStyle: {
+                            fontSize: '30',
+                            fontWeight: 'bold',
+                        },
+                    },
+                    formatters: {
+                        normal: function (param) {
+                            return [
+                                {
+                                    text: "".concat(param[0].value * 100, "%"),
+                                    font: '35px',
+                                    color: 'black',
+                                },
+                            ];
+                        },
+                    },
+                },
+                data: [
+                    {
+                        value: 0.8,
+                        direction: 'left',
+                        itemStyle: {
+                            normal: {
+                                color: '#2d70f6',
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                    {
+                        value: 0.6,
+                        direction: 'right',
+                        itemStyle: {
+                            normal: {
+                                color: '#6fd598',
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u9608\u503C\u6C34\u7403\u56FE"),
+        React.createElement(LiquidFillChart, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basicx.js.map

package/dist/esm/liquidFillChart/_example/Basicx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Basicx.js","sourceRoot":"","sources":["../../../../src/liquidFillChart/_example/Basicx.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,IAAM,OAAO,GAAG;QACd,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,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,YAAY;gBAClB,MAAM,EAAE,KAAK;gBACb,iBAAiB,EAAE,KAAK;gBACxB,KAAK,EAAE;oBACL,MAAM,EAAE;wBACN,IAAI,EAAE,KAAK;wBACX,QAAQ,EAAE,QAAQ;qBACnB;oBACD,QAAQ,EAAE;wBACR,IAAI,EAAE,IAAI;wBACV,SAAS,EAAE;4BACT,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,MAAM;yBACnB;qBACF;oBACD,UAAU,EAAE;wBACV,MAAM,YAAC,KAAK;4BACV,OAAO;gCACL;oCACE,IAAI,EAAE,UAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,MAAG;oCAChC,IAAI,EAAE,MAAM;oCACZ,KAAK,EAAE,OAAO;iCACf;6BACF,CAAC;wBACJ,CAAC;qBACF;iBACF;gBACD,IAAI,EAAE;oBACJ;wBACE,KAAK,EAAE,GAAG;wBAEV,SAAS,EAAE,MAAM;wBACjB,SAAS,EAAE;4BAET,MAAM,EAAE;gCACN,KAAK,EAAE,SAAS;gCAChB,OAAO,EAAE,GAAG;6BACb;yBACF;qBACF;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,SAAS,EAAE,OAAO;wBAClB,SAAS,EAAE;4BACT,MAAM,EAAE;gCACN,KAAK,EAAE,SAAS;6BACjB;yBACF;qBACF;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,eAAe,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CAC5C,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/liquidFillChart/_example/Basicx.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { LiquidFillChart } from '@tencent/tcharts-component';
+
+export default function Basicx() {
+  const options = {
+    title: {
+      text: '采集数据',
+      show: true,
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'left',
+      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+    },
+    dataSource: [
+      {
+        name: '访问来源',
+        type: 'liquidFill',
+        radius: '40%',
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            show: true,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold',
+            },
+          },
+          formatters: {
+            normal(param) {
+              return [
+                {
+                  text: `${param[0].value * 100}%`,
+                  font: '35px',
+                  color: 'black',
+                }, // 换行
+              ];
+            },
+          },
+        },
+        data: [
+          {
+            value: 0.8,
+            // 方向
+            direction: 'left',
+            itemStyle: {
+              // 波纹样式
+              normal: {
+                color: '#2d70f6',
+                opacity: 0.8,
+              },
+            },
+          },
+          {
+            value: 0.6,
+            direction: 'right',
+            itemStyle: {
+              normal: {
+                color: '#6fd598',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>阈值水球图</div>
+      <LiquidFillChart height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,62 @@
+---
+order: 0
+title: 水球图
+---
+
+水球图(水位图)，是一种比例图，用一种形象有趣的形式表示占比。
+
+````jsx
+import { LiquidFillChart } from '@tencent/tcharts-component';
+
+var title = {
+	text: "采集数据",
+	show: true
+};
+var legend = {
+	orient: 'vertical',
+	x: 'left',
+	data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+};
+var dataSource = [
+	{
+		name: '访问来源',
+		type: 'liquidFill',
+		radius: '40%',
+		avoidLabelOverlap: false,
+		label: {
+			normal: {
+				show: false,
+				position: 'center'
+			},
+			emphasis: {
+				show: true,
+				textStyle: {
+					fontSize: '30',
+					fontWeight: 'bold'
+				}
+			},
+			formatters: {
+				normal: function (param) {
+					return [
+						{ text: param[0].value*100 + '%', font: '35px', color: 'black' }, // 换行
+					];
+				}
+			}
+		},
+		data: [{ value: 0.5 }, { value: 0.4 }]
+	}
+];
+	
+  
+ReactDOM.render(
+  <div>
+	<LiquidFillChart 
+		title={title}
+		legend={legend}
+		dataSource={dataSource}
+		height = '500px'>
+		默认
+	</LiquidFillChart>
+  </div>
+, mountNode);
+````