tvision-charts-component 3.3.24

package/dist/esm/basicMap/_example/ChinaMapNodeLink.jsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { BasicMap } from '@tencent/tcharts-component';
+import ChinaMapJson from '@app/data/china_map_ex_geojson.202007211628.json';
+window['TCharts'].registerMap('chinaNodeLink', ChinaMapJson);
+
+export default function ChinaMapEx() {
+  const options = {
+    grid: { left: 0, right: 0, bottom: 0, top: 0, containLabel: true },
+    showSouthChinaSea: true,
+    tooltip: {
+      trigger: 'item',
+      formatter: items => (items[0] ? `<div>${items[0].name}<div><div>人数: ${items[0].value}<div>` : ''),
+    },
+    legend: {
+      show: false,
+    },
+    visualMap: {
+      top: 50,
+      right: 10,
+      pieces: [{
+        gt: 0,
+        lte: 200,
+        label: '<200',
+        color: '#00A870',
+      }, {
+        gt: 200,
+        lte: 400,
+        label: '<400',
+        color: '#ED7B2F',
+      }, {
+        gt: 400,
+        lte: 500,
+        label: '<500',
+        color: '#E34D59',
+      }],
+    },
+    dataSource: [
+      {
+        name: '中国地图热力图',
+        type: 'map',
+        mapType: 'chinaNodeLink', // 自定义扩展图表类型
+        label: {
+          show: false,
+        },
+        links: [
+          { source: 's', target: 'd',color: 'green' },
+          { source: 's', target: 'c',color: 'green' },
+          { source: 's', target: 'k' ,color: 'green'},
+      ],
+      nodes: [
+          {
+              value: 300,
+              id: 'k', // 必填
+              text: '深圳', //label， 可选
+              textStyle: { //label的样式， 可选
+                  fontSize: '14px',
+                  color: 'blue',
+              },
+              // x: 200,
+              // y: 200,
+              color: 'yellow', //节点的颜色，可选
+              longitude: 114.114861, //position，必选， 要么xy，要么经度纬度
+              latitude: 22.285139,
+              symbolSize: 15 //节点的大小 可选，可以是数字，可以是返回数字的function
+          },
+          {
+              value: 300,
+              id: 's', // 必填
+              text: '北京', //label， 可选
+              textStyle: { //label的样式， 可选
+                  fontSize: '12px',
+                  color: 'blue',
+              },
+              longitude: 117,
+              latitude: 40, 
+              color: 'yellow', //节点的颜色，可选
+              symbolSize: 15 //节点的大小 可选，可以是数字，可以是返回数字的function
+          },
+          {
+            value: 300,
+            id: 'c', // 必填
+            text: '拉萨', //label， 可选
+            textStyle: { //label的样式， 可选
+                fontSize: '12px',
+                color: 'blue',
+            },
+            longitude: 92.06,
+            latitude: 29.36, 
+            color: 'yellow', //节点的颜色，可选
+            symbolSize: 15 //节点的大小 可选，可以是数字，可以是返回数字的function
+        },
+        {
+          value: 300,
+          id: 'd', // 必填
+          text: '拉尔滨', //label， 可选
+          textStyle: { //label的样式， 可选
+              fontSize: '12px',
+              color: 'blue',
+          },
+          longitude: 128,
+          latitude: 46, 
+          color: 'yellow', //节点的颜色，可选
+          symbolSize: 15 //节点的大小 可选，可以是数字，可以是返回数字的function
+      }
+      ],
+      // nodes: [
+      //     {
+      //         value: 3000,
+      //         id: 'k', // 必填
+      //         text: '北京', //label， 可选
+      //         textStyle: { //label的样式， 可选
+      //             fontSize: '12px',
+      //             color: 'green',
+      //         },
+      //         // x: 200,
+      //         // y: 200,
+      //         color: 'red', //节点的颜色，可选
+      //         longitude: 39.9, //position，必选， 要么xy，要么经度纬度
+      //         latitude: 116.3,
+      //         symbolSize: 10 //节点的大小 可选，可以是数字，可以是返回数字的function
+      //     },
+      //     {
+      //         value: 4000,
+      //         id: 's', // 必填
+      //         text: '深圳', //label， 可选
+      //         textStyle: { //label的样式， 可选
+      //             fontSize: '14px',
+      //             color: 'red',
+      //         },
+      //         longitude: 22.27, //position，必选， 要么xy，要么经度纬度
+      //         latitude: 114, 
+      //         color: '深圳', //节点的颜色，可选
+      //         symbolSize: 20 //节点的大小 可选，可以是数字，可以是返回数字的function
+      //     }
+      //  ],
+        data: [
+          { name: '南海诸岛', value: 0 },
+          { name: '北京市', value: Math.round(Math.random() * 500) },
+          { name: '天津市', value: Math.round(Math.random() * 500) },
+          { name: '河北省', value: Math.round(Math.random() * 500) },
+          { name: '内蒙古自治区', value: Math.round(Math.random() * 500) },
+          { name: '辽宁省', value: Math.round(Math.random() * 500) },
+          { name: '吉林省', value: Math.round(Math.random() * 500) },
+          { name: '黑龙江省', value: Math.round(Math.random() * 500) },
+          { name: '上海市', value: Math.round(Math.random() * 500) },
+          { name: '江苏省', value: Math.round(Math.random() * 500) },
+          { name: '浙江省', value: Math.round(Math.random() * 500) },
+          { name: '安徽省', value: Math.round(Math.random() * 500) },
+          { name: '福建省', value: Math.round(Math.random() * 500) },
+          { name: '江西省', value: Math.round(Math.random() * 500) },
+          { name: '山东省', value: Math.round(Math.random() * 500) },
+          { name: '河南省', value: Math.round(Math.random() * 500) },
+          { name: '湖北省', value: Math.round(Math.random() * 500) },
+          { name: '湖南省', value: Math.round(Math.random() * 500) },
+          { name: '广东省', value: Math.round(Math.random() * 500) },
+          { name: '广西壮族自治区', value: Math.round(Math.random() * 500) },
+          // { name: '海南省', value: Math.round(Math.random() * 500) },
+          // { name: '重庆市', value: Math.round(Math.random() * 500) },
+          // { name: '四川省', value: Math.round(Math.random() * 500) },
+          // { name: '贵州省', value: Math.round(Math.random() * 500) },
+          // { name: '云南省', value: Math.round(Math.random() * 500) },
+          { name: '西藏自治区', value: Math.round(Math.random() * 500) },
+          // { name: '陕西省', value: Math.round(Math.random() * 500) },
+          // { name: '甘肃省', value: Math.round(Math.random() * 500) },
+          // { name: '青海省', value: Math.round(Math.random() * 500) },
+          // { name: '宁夏回族自治区', value: Math.round(Math.random() * 500) },
+          // { name: '新疆维吾尔自治区', value: Math.round(Math.random() * 500) },
+          { name: '台湾省', value: Math.round(Math.random() * 500) },
+          { name: '香港', value: Math.round(Math.random() * 500) },
+          { name: '澳门', value: Math.round(Math.random() * 500) },
+          { name: '', value: Math.round(Math.random() * 500) },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>中国地图-带Node和link</div>
+      <BasicMap width={1000} height={700} {...options} />
+    </>
+  );
+}

package/dist/esm/basicMap/_example/WorldMap.d.ts

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

package/dist/esm/basicMap/_example/WorldMap.js

@@ -0,0 +1,49 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicMap } from '@tencent/tcharts-component';
+import WorldMapJson from '@app/data/world_map_geojson.202012091746.json';
+window['TCharts'].registerMap('world', WorldMapJson);
+export default function WorldMap() {
+    var options = {
+        grid: { left: 0, right: 0, bottom: 0, top: 0, containLabel: true },
+        tooltip: {
+            trigger: 'item',
+            formatter: function (items) { return (items[0] ? "<div>".concat(items[0].name, "<div><div>\u4EBA\u6570: ").concat(items[0].value, "<div>") : ''); },
+        },
+        legend: {
+            show: false,
+        },
+        visualMap: {
+            min: 0,
+            max: 1000,
+            text: ['High', 'Low'],
+            realtime: false,
+            calculable: true,
+            inRange: {
+                color: ['lightskyblue', 'yellow', 'orangered']
+            },
+        },
+        dataSource: [
+            {
+                name: '世界地图热力图',
+                type: 'map',
+                mapType: 'world',
+                label: {
+                    show: false,
+                },
+                itemStyle: {
+                    borderWidth: 1,
+                    borderColor: '#fff',
+                },
+                data: [
+                    { name: 'China', value: Math.round(Math.random() * 1000) },
+                    { name: 'United States of America', value: Math.round(Math.random() * 1000) },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u4E16\u754C\u5730\u56FE"),
+        React.createElement(BasicMap, __assign({ width: 1000, height: 800 }, options))));
+}
+//# sourceMappingURL=WorldMap.js.map

package/dist/esm/basicMap/_example/WorldMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldMap.js","sourceRoot":"","sources":["../../../../src/basicMap/_example/WorldMap.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,IAAM,OAAO,GAAG;QACd,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE;QAClE,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,qCAAiB,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,UAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAA7E,CAA6E;SAClG;QACD,MAAM,EAAE;YACN,IAAI,EAAE,KAAK;SACZ;QACD,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,IAAI;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACrB,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,WAAW,CAAC;aAC/C;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE;oBACL,IAAI,EAAE,KAAK;iBACZ;gBACD,SAAS,EAAE;oBACT,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,MAAM;iBAEpB;gBACD,IAAI,EAAE;oBACJ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE;oBAC1D,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE;iBAC9E;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,4DAAe;QACf,oBAAC,QAAQ,aAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAO,OAAO,EAAI,CACnD,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicMap/_example/WorldMap.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { BasicMap } from '@tencent/tcharts-component';
+import WorldMapJson from '@app/data/world_map_geojson.202012091746.json';
+window['TCharts'].registerMap('world', WorldMapJson);
+
+export default function WorldMap() {
+  const options = {
+    grid: { left: 0, right: 0, bottom: 0, top: 0, containLabel: true },
+    tooltip: {
+      trigger: 'item',
+      formatter: items => (items[0] ? `<div>${items[0].name}<div><div>人数: ${items[0].value}<div>` : ''),
+    },
+    legend: {
+      show: false,
+    },
+    visualMap: {
+      min: 0,
+      max: 1000,
+      text: ['High', 'Low'],
+      realtime: false,
+      calculable: true,
+      inRange: {
+        color: ['lightskyblue', 'yellow', 'orangered']
+      },
+    },
+    dataSource: [
+      {
+        name: '世界地图热力图',
+        type: 'map',
+        mapType: 'world', // 自定义扩展图表类型
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: '#fff',
+          // areaColor:'',
+        },
+        data: [
+          { name: 'China', value: Math.round(Math.random() * 1000) },
+          { name: 'United States of America', value: Math.round(Math.random() * 1000) },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>世界地图</div>
+      <BasicMap width={1000} height={800}  {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { ChartComponent } from '../common/chart';
+import { ToolTipOptions, GridOptions, ChartRef, Data } from '../_type';
+export interface MapProps {
+    width?: number | string;
+    height: number | string;
+    tooltip?: ToolTipOptions;
+    theme?: string;
+    dataSource: Data[];
+    grid?: GridOptions;
+    visualMap?: {
+        min?: number;
+        max?: number;
+        text?: any;
+        inRange?: any;
+        realtime?: Boolean;
+        calculable?: Boolean;
+    };
+    showSouthChinaSea?: boolean;
+    chartRef?: (chart?: ChartRef) => void;
+    geo?: any;
+}
+export default class BasicMap extends ChartComponent<MapProps> {
+    chartType: string;
+    constructor(props: any);
+    getOptions(props: any): {
+        legend: any;
+        tooltip: any;
+        series: any;
+        grid: any;
+        theme: any;
+        visualMap: any;
+        showSouthChinaSea: any;
+        chartRef: any;
+        link: any;
+        node: any;
+        hooks: any;
+        hideScroll: any;
+        geo: any;
+    };
+}

package/dist/esm/basicMap/index.js

@@ -0,0 +1,19 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addMapOption } from '../common/optionsHelp';
+import { ChartMapComponent, ChartCore } from 'tvision-charts';
+var BasicMap = (function (_super) {
+    __extends(BasicMap, _super);
+    function BasicMap(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'map';
+        ChartCore.use(ChartMapComponent);
+        return _this;
+    }
+    BasicMap.prototype.getOptions = function (props) {
+        return addMapOption(props || this.props);
+    };
+    return BasicMap;
+}(ChartComponent));
+export default BasicMap;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicMap/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA0C9D;IAAsC,4BAAwB;IAE5D,kBAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,KAAK,CAAC;QAGhB,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;;IACnC,CAAC;IACD,6BAAU,GAAV,UAAW,KAAK;QACd,OAAO,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IACH,eAAC;AAAD,CAAC,AATD,CAAsC,cAAc,GASnD"}

package/dist/esm/basicPie/README.md

@@ -0,0 +1,35 @@
+# BasicPie 基础饼图
+
+基础饼图，广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类，所有区块（圆弧）相加的和等于 100%。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础饼图
+
+[Example: 基础饼图](./_example/Basic.jsx)
+
+### 带间隔饼图
+
+[Example: 带间隔饼图](./_example/SpacePic.jsx)
+
+### 甜甜圈图
+
+[Example: 甜甜圈图](./_example/DonutPic.jsx)
+
+### 带间隔甜甜圈图
+
+[Example: 带间隔甜甜圈图](./_example/SpaceDonutPic.jsx)
+
+### 带标签饼图
+
+[Example: 带标签饼图](./_example/LabelPic.jsx)
+
+### 通用玫瑰图
+
+[Example: 通用玫瑰图](./_example/RosePic.jsx)
+
+## 组件属性
+
+[Interface: PieProps](./index.tsx)

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

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

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

@@ -0,0 +1,40 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        dataSource: [
+            {
+                name: '(上周)CPU利用率',
+                label: {
+                    layout: 'inner',
+                    formatters: {
+                        normal: function () { },
+                        hover: function () { },
+                    },
+                },
+                radius: ['80%'],
+                type: 'pie',
+                itemStyle: { borderWidth: 0, 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, "\u57FA\u7840\u997C\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicPie/_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,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,YAAY;gBAClB,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,4DAAe;QACf,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    dataSource: [
+      {
+        name: '(上周)CPU利用率',
+        label: {
+          layout: 'inner',
+          formatters: {
+            normal: () => {},
+            hover: () => {},
+          },
+        },
+        radius: ['80%'],
+        type: 'pie',
+        itemStyle: { borderWidth: 0, 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/_example/DonutPic.d.ts

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

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

@@ -0,0 +1,39 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function DonutPic() {
+    var options = {
+        dataSource: [
+            {
+                name: '(上周)CPU利用率',
+                label: {
+                    layout: 'inner',
+                    formatters: {
+                        normal: function () { },
+                        hover: function () { },
+                    },
+                },
+                radius: ['60%', '80%'],
+                type: 'pie',
+                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, "\u751C\u751C\u5708\u997C\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=DonutPic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutPic.js","sourceRoot":"","sources":["../../../../src/basicPie/_example/DonutPic.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,YAAY;gBAClB,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,EAAE,KAAK,CAAC;gBACtB,IAAI,EAAE,KAAK;gBACX,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/DonutPic.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function DonutPic() {
+  const options = {
+    dataSource: [
+      {
+        name: '(上周)CPU利用率',
+        label: {
+          layout: 'inner',
+          formatters: {
+            normal: () => {},
+            hover: () => {},
+          },
+        },
+        radius: ['60%', '80%'],
+        type: 'pie',
+        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/_example/LabelPic.d.ts

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

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

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+export default function LabelPic() {
+    var options = {
+        dataSource: [
+            {
+                name: '工具统计',
+                radius: ['80%'],
+                type: 'pie',
+                data: [
+                    { value: 100, name: '内置编排工具' },
+                    { value: 100, name: '自定义编排工具' },
+                    { value: 234, name: '内置公共工具' },
+                    { value: 235, name: '自定义公共工具' },
+                    { value: 1540, name: '自定义私有工具' },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u6807\u7B7E\u997C\u56FE"),
+        React.createElement(BasicPie, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=LabelPic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelPic.js","sourceRoot":"","sources":["../../../../src/basicPie/_example/LabelPic.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,MAAM;gBACZ,MAAM,EAAE,CAAC,KAAK,CAAC;gBACf,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;oBAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE;oBAC/B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;oBAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE;oBAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;iBACjC;aACF;SACF;KACF,CAAC;IACF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BasicPie } from '@tencent/tcharts-component';
+
+export default function LabelPic() {
+  const options = {
+    dataSource: [
+      {
+        name: '工具统计',
+        radius: ['80%'],
+        type: 'pie',
+        data: [
+          { value: 100, name: '内置编排工具' },
+          { value: 100, name: '自定义编排工具' },
+          { value: 234, name: '内置公共工具' },
+          { value: 235, name: '自定义公共工具' },
+          { value: 1540, name: '自定义私有工具' },
+        ],
+      },
+    ],
+  };
+  return (
+    <>
+      <div>带标签饼图</div>
+      <BasicPie height={500} {...options} />
+    </>
+  );
+}

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

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