tvision-charts-component 3.3.24

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

@@ -0,0 +1,82 @@
+---
+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.8,
+          //方向
+          direction: 'left',
+          itemStyle: {
+            //波纹样式
+            normal: {
+              color: '#2d70f6',
+              opacity: 0.8
+            }
+          }
+        },
+        {
+          value: 0.6,
+          direction: 'right',
+          itemStyle: {
+            normal: {
+              color: '#6fd598'
+            }
+          }
+        }]
+	}
+];
+	
+  
+ReactDOM.render(
+  <div>
+	<LiquidFillChart 
+		title={title}
+		legend={legend}
+		dataSource={dataSource}
+		height = '500px'>
+		默认
+	</LiquidFillChart>
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,32 @@
+import { ChartComponent } from '../common/chart';
+import { ToolTipOptions, LegendOptions, GridOptions, Data } from '../_type';
+export interface LiquidFillProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+    };
+    tooltip?: ToolTipOptions;
+    legend?: LegendOptions;
+    theme?: string;
+    dataSource: Data[];
+    color?: string[];
+    grid?: GridOptions;
+}
+export default class LiquidFillChart extends ChartComponent<LiquidFillProps> {
+    chartType: string;
+    constructor(props: any);
+    getOptions(): {
+        title: string | {
+            show?: boolean;
+            text?: string;
+        };
+        legend: LegendOptions;
+        tooltip: ToolTipOptions | undefined;
+        color: string[] | undefined;
+        series: Data[];
+        grid: GridOptions | undefined;
+        theme: string | undefined;
+    };
+}

package/dist/esm/liquidFillChart/index.js

@@ -0,0 +1,28 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { ChartLiquidFillComponent, ChartCore } from 'tvision-charts';
+var LiquidFillChart = (function (_super) {
+    __extends(LiquidFillChart, _super);
+    function LiquidFillChart(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'liquidFill';
+        ChartCore.use(ChartLiquidFillComponent);
+        return _this;
+    }
+    LiquidFillChart.prototype.getOptions = function () {
+        var _a = this.props, title = _a.title, grid = _a.grid, legend = _a.legend, tooltip = _a.tooltip, color = _a.color, dataSource = _a.dataSource, theme = _a.theme;
+        var options = {
+            title: title || '',
+            legend: legend || {},
+            tooltip: tooltip,
+            color: color,
+            series: dataSource,
+            grid: grid,
+            theme: theme,
+        };
+        return options;
+    };
+    return LiquidFillChart;
+}(ChartComponent));
+export default LiquidFillChart;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/liquidFillChart/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA0CrE;IAA6C,mCAA+B;IAE1E,yBAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,YAAY,CAAC;QAGvB,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;;IAC1C,CAAC;IACD,oCAAU,GAAV;QACQ,IAAA,KAA6D,IAAI,CAAC,KAAK,EAArE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;QAC9E,IAAM,OAAO,GAAG;YACd,KAAK,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,EAAE,MAAM,IAAI,EAAE;YACpB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,MAAM,EAAE,UAAU;YAClB,IAAI,MAAA;YACJ,KAAK,OAAA;SACN,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;IACH,sBAAC;AAAD,CAAC,AAnBD,CAA6C,cAAc,GAmB1D"}

package/dist/esm/liquidFillChart/index.md

@@ -0,0 +1,27 @@
+---
+category: Charts
+title: LiquidFillChart
+subtitle: 水球图
+cols: 1
+type: 比例图
+author: minchang,卢耀和
+---
+
+水球图(水位图)，是一种比例图，用一种形象有趣的形式表示占比。
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+title | 标题 | object | - |
+legend | 图例的配置项 | object | - |
+dataSource | 数据列表 | array | - |
+height |  图表的高度 | number | - |
+
+
+
+

package/dist/esm/proxy.d.ts

@@ -0,0 +1,2 @@
+import TCharts from 'tvision-charts';
+export { TCharts };

package/dist/esm/proxy.js

@@ -0,0 +1,3 @@
+import TCharts from 'tvision-charts';
+export { TCharts };
+//# sourceMappingURL=proxy.js.map

package/dist/esm/proxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proxy.js","sourceRoot":"","sources":["../../src/proxy.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/esm/radarChart/README.md

@@ -0,0 +1,18 @@
+# RadarChart 雷达图
+
+“雷达图”分析法是从企业的生产性、安全性、收益性、成长性和流动性等五个方面，对企业财务状态和经营现状进行直观、形象的综合分析与评价的图形。因其形状如雷达（图）的放射波，而且具有指引经营“航向”的作用，故而得名。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础雷达图
+[Example: 基础雷达图](./_example/CommonRadarChart.jsx)
+
+### 带背景雷达图
+
+[Example: 带背景雷达图](./_example/FilledRadarChart.jsx)
+
+## 组件属性
+
+[Interface: RadarProps](./index.tsx)

package/dist/esm/radarChart/_example/CommonRadarChart.d.ts

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

package/dist/esm/radarChart/_example/CommonRadarChart.js

@@ -0,0 +1,44 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { RadarChart } from '@tencent/tcharts-component';
+export default function CommonRadarChart() {
+    var options = {
+        title: {
+            text: '基础雷达图',
+        },
+        grid: { left: 0, right: 0, bottom: 60, top: 0, containLabel: false },
+        legend: {
+            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+        },
+        radar: {
+            indicator: [
+                { name: '销售（sales）', max: 6500 },
+                { name: '管理（Administration）', max: 16000 },
+                { name: '信息技术（Information Techology）', max: 30000 },
+                { name: '客服（Customer Support）', max: 38000 },
+                { name: '研发（Development）', max: 52000 },
+                { name: '市场（Marketing）', max: 25000 },
+            ],
+        },
+        dataSource: [
+            {
+                name: '预算 vs 开销（Budget vs spending）',
+                type: 'radar',
+                data: [
+                    {
+                        value: [4300, 10000, 28000, 35000, 50000, 19000],
+                        name: '预算分配（Allocated Budget）',
+                    },
+                    {
+                        value: [5000, 14000, 28000, 31000, 42000, 21000],
+                        name: '实际开销（Actual Spending）',
+                    },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h3", null, "\u96F7\u8FBE\u56FE"),
+        React.createElement(RadarChart, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=CommonRadarChart.js.map

package/dist/esm/radarChart/_example/CommonRadarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonRadarChart.js","sourceRoot":"","sources":["../../../../src/radarChart/_example/CommonRadarChart.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,IAAM,OAAO,GAAG;QACd,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;SACd;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,wBAAwB,EAAE,uBAAuB,CAAC;SAC1D;QACD,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;gBAChC,EAAE,IAAI,EAAE,oBAAoB,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC1C,EAAE,IAAI,EAAE,6BAA6B,EAAE,GAAG,EAAE,KAAK,EAAE;gBACnD,EAAE,IAAI,EAAE,sBAAsB,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC5C,EAAE,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,KAAK,EAAE;gBACvC,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,EAAE;aACtC;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,8BAA8B;gBACpC,IAAI,EAAE,OAAO;gBAEb,IAAI,EAAE;oBACJ;wBACE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBAChD,IAAI,EAAE,wBAAwB;qBAC/B;oBACD;wBACE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBAChD,IAAI,EAAE,uBAAuB;qBAC9B;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,qDAAY;QACZ,oBAAC,UAAU,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACvC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/radarChart/_example/CommonRadarChart.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { RadarChart } from '@tencent/tcharts-component';
+
+export default function CommonRadarChart() {
+  const options = {
+    title: {
+      text: '基础雷达图',
+    },
+    grid: { left: 0, right: 0, bottom: 60, top: 0, containLabel: false },
+    legend: {
+      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    },
+    radar: {
+      indicator: [
+        { name: '销售（sales）', max: 6500 },
+        { name: '管理（Administration）', max: 16000 },
+        { name: '信息技术（Information Techology）', max: 30000 },
+        { name: '客服（Customer Support）', max: 38000 },
+        { name: '研发（Development）', max: 52000 },
+        { name: '市场（Marketing）', max: 25000 },
+      ],
+    },
+    dataSource: [
+      {
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+          {
+            value: [4300, 10000, 28000, 35000, 50000, 19000],
+            name: '预算分配（Allocated Budget）',
+          },
+          {
+            value: [5000, 14000, 28000, 31000, 42000, 21000],
+            name: '实际开销（Actual Spending）',
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <h3>雷达图</h3>
+      <RadarChart height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/radarChart/_example/FilledRadarChart.d.ts

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

package/dist/esm/radarChart/_example/FilledRadarChart.js

@@ -0,0 +1,73 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { RadarChart } from '@tencent/tcharts-component';
+export default function FilledRadarChart() {
+    var options = {
+        title: {
+            text: '基础雷达图',
+        },
+        legend: {
+            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+        },
+        radar: {
+            shape: 'circle',
+            name: {
+                textStyle: {
+                    color: '#fff',
+                    backgroundColor: '#999',
+                    borderRadius: 3,
+                    padding: [3, 5],
+                },
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 2,
+                },
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                },
+            },
+            splitArea: {
+                show: true,
+            },
+            indicator: [
+                { name: '销售（sales）', max: 6500 },
+                { name: '管理（Administration）', max: 16000 },
+                { name: '信息技术（Information Techology）', max: 30000 },
+                { name: '客服（Customer Support）', max: 38000 },
+                { name: '研发（Development）', max: 52000 },
+                { name: '市场（Marketing）', max: 25000 },
+            ],
+        },
+        dataSource: [
+            {
+                name: '预算 vs 开销（Budget vs spending）',
+                type: 'radar',
+                data: [
+                    {
+                        value: [4300, 10000, 28000, 35000, 50000, 19000],
+                        name: '预算分配（Allocated Budget）',
+                        areaStyle: {
+                            color: 'red',
+                        },
+                    },
+                    {
+                        value: [5000, 14000, 28000, 31000, 42000, 21000],
+                        name: '实际开销（Actual Spending）',
+                        lineStyle: {
+                            width: 4,
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h3", null, "\u586B\u5145\u96F7\u8FBE\u56FE"),
+        React.createElement(RadarChart, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=FilledRadarChart.js.map

package/dist/esm/radarChart/_example/FilledRadarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilledRadarChart.js","sourceRoot":"","sources":["../../../../src/radarChart/_example/FilledRadarChart.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,IAAM,OAAO,GAAG;QACd,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;SACd;QACD,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,wBAAwB,EAAE,uBAAuB,CAAC;SAC1D;QACD,KAAK,EAAE;YACL,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE;gBACJ,SAAS,EAAE;oBACT,KAAK,EAAE,MAAM;oBACb,eAAe,EAAE,MAAM;oBACvB,YAAY,EAAE,CAAC;oBACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;iBAChB;aACF;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE;oBACT,KAAK,EAAE,CAAC;iBACT;aACF;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE;oBACT,KAAK,EAAE,CAAC;iBACT;aACF;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,IAAI;aACX;YACD,SAAS,EAAE;gBACT,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;gBAChC,EAAE,IAAI,EAAE,oBAAoB,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC1C,EAAE,IAAI,EAAE,6BAA6B,EAAE,GAAG,EAAE,KAAK,EAAE;gBACnD,EAAE,IAAI,EAAE,sBAAsB,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC5C,EAAE,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,KAAK,EAAE;gBACvC,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,EAAE;aACtC;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,8BAA8B;gBACpC,IAAI,EAAE,OAAO;gBAEb,IAAI,EAAE;oBACJ;wBACE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBAChD,IAAI,EAAE,wBAAwB;wBAC9B,SAAS,EAAE;4BACT,KAAK,EAAE,KAAK;yBACb;qBACF;oBACD;wBACE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBAChD,IAAI,EAAE,uBAAuB;wBAC7B,SAAS,EAAE;4BACT,KAAK,EAAE,CAAC;yBACT;qBACF;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,iEAAc;QACd,oBAAC,UAAU,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACvC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/radarChart/_example/FilledRadarChart.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { RadarChart } from '@tencent/tcharts-component';
+
+export default function FilledRadarChart() {
+  const options = {
+    title: {
+      text: '基础雷达图',
+    },
+    legend: {
+      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    },
+    radar: {
+      shape: 'circle',
+      name: {
+        textStyle: {
+          color: '#fff',
+          backgroundColor: '#999',
+          borderRadius: 3,
+          padding: [3, 5],
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+        },
+      },
+      splitArea: {
+        show: true,
+      },
+      indicator: [
+        { name: '销售（sales）', max: 6500 },
+        { name: '管理（Administration）', max: 16000 },
+        { name: '信息技术（Information Techology）', max: 30000 },
+        { name: '客服（Customer Support）', max: 38000 },
+        { name: '研发（Development）', max: 52000 },
+        { name: '市场（Marketing）', max: 25000 },
+      ],
+    },
+    dataSource: [
+      {
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+          {
+            value: [4300, 10000, 28000, 35000, 50000, 19000],
+            name: '预算分配（Allocated Budget）',
+            areaStyle: {
+              color: 'red',
+            },
+          },
+          {
+            value: [5000, 14000, 28000, 31000, 42000, 21000],
+            name: '实际开销（Actual Spending）',
+            lineStyle: {
+              width: 4,
+            },
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <h3>填充雷达图</h3>
+      <RadarChart height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+---
+order: 0
+title: 雷达图
+---
+
+雷达图反映多个维度的达成情况
+
+````jsx
+import { RadarChart } from '@tencent/tcharts-component';
+
+    const title = {
+      text: '基础雷达图'
+    };
+    const legend= {
+      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
+    };
+    const radar = {
+      indicator: [
+        { name: '销售（sales）', max: 6500 },
+        { name: '管理（Administration）', max: 16000 },
+        { name: '信息技术（Information Techology）', max: 30000 },
+        { name: '客服（Customer Support）', max: 38000 },
+        { name: '研发（Development）', max: 52000 },
+        { name: '市场（Marketing）', max: 25000 }
+      ]
+    };
+    const dataSource = [{
+      name: '预算 vs 开销（Budget vs spending）',
+      type: 'radar',
+      // areaStyle: {normal: {}},
+      data: [
+        {
+          value: [4300, 10000, 28000, 35000, 50000, 19000],
+          name: '预算分配（Allocated Budget）'
+        },
+        {
+          value: [5000, 14000, 28000, 31000, 42000, 21000],
+          name: '实际开销（Actual Spending）'
+        }
+      ]
+    }];
+ReactDOM.render(
+  <div>
+    <RadarChart
+        title = {title}
+        legend = {legend}
+        radar = {radar}
+        dataSource={dataSource}
+        height={'800px'}>
+    </RadarChart>
+  </div>
+, mountNode);
+````

package/dist/esm/radarChart/demo/basicx.md

@@ -0,0 +1,83 @@
+---
+order: 1
+title: 雷达图
+---
+
+雷达图反映多个维度的达成情况
+
+````jsx
+import { RadarChart } from '@tencent/tcharts-component';
+
+    const title = {
+      text: '基础雷达图'
+    };
+    const legend= {
+      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
+    };
+    const radar = {
+      shape: 'circle',
+      name: {
+        textStyle: {
+          color: '#fff',
+          backgroundColor: '#999',
+          borderRadius: 3,
+          padding: [3, 5]
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          width: 2
+        }
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1
+        }
+      },
+      splitArea: {
+        show: true
+      },
+      indicator: [
+        { name: '销售（sales）', max: 6500 },
+        { name: '管理（Administration）', max: 16000 },
+        { name: '信息技术（Information Techology）', max: 30000 },
+        { name: '客服（Customer Support）', max: 38000 },
+        { name: '研发（Development）', max: 52000 },
+        { name: '市场（Marketing）', max: 25000 }
+      ]
+    };
+    const dataSource = [{
+      name: '预算 vs 开销（Budget vs spending）',
+      type: 'radar',
+      // areaStyle: {normal: {}},
+      data: [
+        {
+          value: [4300, 10000, 28000, 35000, 50000, 19000],
+          name: '预算分配（Allocated Budget）',
+          areaStyle: {
+            color: 'red'
+          }
+        },
+        {
+          value: [5000, 14000, 28000, 31000, 42000, 21000],
+          name: '实际开销（Actual Spending）',
+          lineStyle: {
+            width: 4
+          }
+        }
+      ]
+    }];
+ReactDOM.render(
+  <div>
+    <RadarChart
+        title = {title}
+        legend = {legend}
+        radar = {radar}
+        dataSource={dataSource}
+        height={'800px'}>
+    </RadarChart>
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,37 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, LegendOptions, GridOptions, RadarOptions, Data } from '../_type';
+export interface RadarProps {
+    width?: number | string;
+    height: number | string;
+    title?: {
+        show?: boolean;
+        text?: string;
+        textStyle?: {
+            color?: string;
+        };
+    };
+    tooltip?: ToolTipOptions;
+    legend?: LegendOptions;
+    theme?: string;
+    dataSource: Data[];
+    color?: string[];
+    grid?: GridOptions;
+    radar?: RadarOptions;
+}
+declare abstract class Radar<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class RadarChart extends Radar<RadarProps> {
+    getOptions(props: any): {
+        title: any;
+        grid: any;
+        legend: any;
+        tooltip: any;
+        color: any;
+        series: any;
+        theme: any;
+        radar: any;
+    };
+}
+export {};

package/dist/esm/radarChart/index.js

@@ -0,0 +1,26 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addBasicRadarOption } from '../common/optionsHelp';
+import { ChartRadarComponent, ChartCore } from 'tvision-charts';
+var Radar = (function (_super) {
+    __extends(Radar, _super);
+    function Radar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'radar';
+        ChartCore.use(ChartRadarComponent);
+        return _this;
+    }
+    return Radar;
+}(ChartComponent));
+var RadarChart = (function (_super) {
+    __extends(RadarChart, _super);
+    function RadarChart() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadarChart.prototype.getOptions = function (props) {
+        return addBasicRadarOption(props || this.props);
+    };
+    return RadarChart;
+}(Radar));
+export default RadarChart;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radarChart/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmDhE;IAAmD,yBAAiB;IAElE,eAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,OAAO,CAAC;QAGlB,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;IACrC,CAAC;IACH,YAAC;AAAD,CAAC,AAND,CAAmD,cAAc,GAMhE;AACD;IAAwC,8BAAiB;IAAzD;;IAIA,CAAC;IAHC,+BAAU,GAAV,UAAW,KAAK;QACd,OAAO,mBAAmB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IACH,iBAAC;AAAD,CAAC,AAJD,CAAwC,KAAK,GAI5C"}