From a6f25716cb4a0809907dbbb6cbfd92466db88d00 Mon Sep 17 00:00:00 2001 From: HuangShengPu <60083015+hsp-sz@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:36:13 +0800 Subject: [PATCH] feat: add radial-bar (#2189) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add radial-bar * feat: 新增健身数据 * feat(radial-bar): change type name * feat(radial-bar): add startAngle * feat(radial-bar): add background and line --------- Co-authored-by: shengzheng Co-authored-by: Joel Alan <31396322+lxfu1@users.noreply.github.com> --- packages/plots/src/components/index.ts | 2 + .../plots/src/components/radial-bar/index.tsx | 10 ++ packages/plots/src/core/index.ts | 3 + .../src/core/plots/radial-bar/adaptor.ts | 88 ++++++++++++++ .../plots/src/core/plots/radial-bar/index.ts | 51 ++++++++ .../plots/src/core/plots/radial-bar/type.ts | 3 + .../radial-bar/demo/apple-watch-activity.js | 59 ++++++++++ .../statistics/radial-bar/demo/background.js | 54 +++++++++ .../statistics/radial-bar/demo/basic.js | 32 +++++ .../statistics/radial-bar/demo/color.js | 42 +++++++ .../statistics/radial-bar/demo/grouped.js | 111 ++++++++++++++++++ .../statistics/radial-bar/demo/line.js | 37 ++++++ .../statistics/radial-bar/demo/meta.json | 66 +++++++++++ .../radial-bar/demo/round-corner.js | 35 ++++++ .../statistics/radial-bar/demo/stacked.js | 111 ++++++++++++++++++ .../statistics/radial-bar/index.en.md | 4 + .../statistics/radial-bar/index.zh.md | 4 + 17 files changed, 712 insertions(+) create mode 100644 packages/plots/src/components/radial-bar/index.tsx create mode 100644 packages/plots/src/core/plots/radial-bar/adaptor.ts create mode 100644 packages/plots/src/core/plots/radial-bar/index.ts create mode 100644 packages/plots/src/core/plots/radial-bar/type.ts create mode 100644 site/examples/statistics/radial-bar/demo/apple-watch-activity.js create mode 100644 site/examples/statistics/radial-bar/demo/background.js create mode 100644 site/examples/statistics/radial-bar/demo/basic.js create mode 100644 site/examples/statistics/radial-bar/demo/color.js create mode 100644 site/examples/statistics/radial-bar/demo/grouped.js create mode 100644 site/examples/statistics/radial-bar/demo/line.js create mode 100644 site/examples/statistics/radial-bar/demo/meta.json create mode 100644 site/examples/statistics/radial-bar/demo/round-corner.js create mode 100644 site/examples/statistics/radial-bar/demo/stacked.js create mode 100644 site/examples/statistics/radial-bar/index.en.md create mode 100644 site/examples/statistics/radial-bar/index.zh.md diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts index 11b5c081b..da5c13eb8 100644 --- a/packages/plots/src/components/index.ts +++ b/packages/plots/src/components/index.ts @@ -20,6 +20,7 @@ import Gauge from './gauge'; import Liquid from './liquid'; import WordCloud from './wordCloud'; import Treemap from './treemap'; +import RadialBar from './radial-bar'; import CirclePacking from './circlePacking'; import Violin from './violin'; import BidirectionalBar from './bidirectional-bar'; @@ -76,6 +77,7 @@ export { Liquid, WordCloud, Treemap, + RadialBar, CirclePacking, Violin, BidirectionalBar, diff --git a/packages/plots/src/components/radial-bar/index.tsx b/packages/plots/src/components/radial-bar/index.tsx new file mode 100644 index 000000000..d59440388 --- /dev/null +++ b/packages/plots/src/components/radial-bar/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { RadialBarOptions } from '../../core'; +import { CommonConfig } from '../../interface'; +import { BaseChart } from '../base'; + +export type RadialBarConfig = CommonConfig; + +const RadialBar = (props: RadialBarConfig) => ; + +export default RadialBar; diff --git a/packages/plots/src/core/index.ts b/packages/plots/src/core/index.ts index 0d4a5fe13..4c4c4e1c6 100644 --- a/packages/plots/src/core/index.ts +++ b/packages/plots/src/core/index.ts @@ -24,6 +24,7 @@ export type { GaugeOptions } from './plots/gauge'; export type { LiquidOptions } from './plots/liquid'; export type { WordCloudOptions } from './plots/wordCloud'; export type { TreemapOptions } from './plots/treemap'; +export type { RadialBarOptions } from './plots/radial-bar'; export type { CirclePackingOptions } from './plots/circlePacking'; export type { ViolinOptions } from './plots/violin'; export type { BidirectionalBarOptions } from './plots/bidirectional-bar'; @@ -57,6 +58,7 @@ import { Gauge } from './plots/gauge'; import { Liquid } from './plots/liquid'; import { WordCloud } from './plots/wordCloud'; import { Treemap } from './plots/treemap'; +import { RadialBar } from './plots/radial-bar'; import { CirclePacking } from './plots/circlePacking'; import { Violin } from './plots/violin'; import { BidirectionalBar } from './plots/bidirectional-bar'; @@ -89,6 +91,7 @@ export const Plots = { Liquid, WordCloud, Treemap, + RadialBar, CirclePacking, Violin, BidirectionalBar, diff --git a/packages/plots/src/core/plots/radial-bar/adaptor.ts b/packages/plots/src/core/plots/radial-bar/adaptor.ts new file mode 100644 index 000000000..aebdf866a --- /dev/null +++ b/packages/plots/src/core/plots/radial-bar/adaptor.ts @@ -0,0 +1,88 @@ +import { flow, set, pick, transformOptions, isNumber, get } from '../../utils'; +import { COORDIANTE_OPTIONS, mark } from '../../components'; +import type { Adaptor } from '../../types'; +import type { RadialBarOptions } from './type'; + +type Params = Adaptor; + +/** + * @param chart + * @param options + */ +export function adaptor(params: Params) { + /** + * coordinate 配置 + * @param params + */ + const coordinate = (params: Params) => { + const { options } = params; + const { startAngle, maxAngle, coordinate, radius, innerRadius } = options; + // 默认开始角度是-90度 + const start = isNumber(startAngle) ? (startAngle / (2 * Math.PI)) * 360 : -90; + // 结束角度通过maxAngle来计算 + const end = isNumber(maxAngle) ? ((Number(maxAngle) + start) / 180) * Math.PI : Math.PI; + set(params, ['options', 'coordinate'], { + ...coordinate, + ...pick(options.coordinate, COORDIANTE_OPTIONS), + endAngle: end, + outerRadius: radius, + innerRadius, + startAngle: startAngle ?? -Math.PI / 2, + }); + + return params; + }; + + /** + * tooltip 配置 + * @param params + */ + const tooltip = (params) => { + const { options } = params; + const { tooltip, xField, yField } = options; + if (!tooltip) { + set(options, 'tooltip', { + title: false, + items: [ + (d) => { + return { name: d[xField], value: d[yField] }; + }, + ], + }); + } + return params; + }; + + /** + * background 配置 + * @param params + */ + const background = (params) => { + const { options } = params; + const { markBackground, children, scale, coordinate, xField } = options; + const domain = get(scale, 'y.domain', []); + if (markBackground) { + children.unshift({ + type: 'interval', + xField: xField, + yField: domain[domain.length - 1], + colorField: markBackground.color, + scale: { color: { type: 'identity' } }, + style: { + fillOpacity: markBackground.opacity, + fill: markBackground.color ? undefined : '#e0e4ee', // 默认用fill填满灰色背景 + }, + // 背景图需要填满整个圆 + coordinate: { + ...coordinate, + startAngle: -Math.PI / 2, + endAngle: (3 / 2) * Math.PI, + }, + animate: false, + }); + } + return params; + }; + + return flow(coordinate, tooltip, background, transformOptions, mark)(params); +} diff --git a/packages/plots/src/core/plots/radial-bar/index.ts b/packages/plots/src/core/plots/radial-bar/index.ts new file mode 100644 index 000000000..82368f71b --- /dev/null +++ b/packages/plots/src/core/plots/radial-bar/index.ts @@ -0,0 +1,51 @@ +import { Plot } from '../../base'; +import type { Adaptor } from '../../types'; +import { adaptor } from './adaptor'; +import { RadialBarOptions } from './type'; + +export type { RadialBarOptions }; + +export class RadialBar extends Plot { + /** 图表类型 */ + public type = 'radial'; + + /** + * 获取 玉珏图 默认配置项 + * 供外部使用 + */ + static getDefaultOptions(): Partial { + return { + type: 'view', + children: [{ type: 'interval' }], + coordinate: { type: 'radial', innerRadius: 0.1, outerRadius: 1, endAngle: Math.PI }, + animate: { enter: { type: 'waveIn', duration: 800 } }, + axis: { + y: { + nice: true, + labelAutoHide: true, + labelAutoRotate: false, + }, + x: { + title: false, + nice: true, + labelAutoRotate: false, + labelAutoHide: { type: 'equidistance', cfg: { minGap: 6 } }, + }, + }, + }; + } + + /** + * 获取 玉珏图 默认配置 + */ + protected getDefaultOptions() { + return RadialBar.getDefaultOptions(); + } + + /** + * 玉珏图适配器 + */ + protected getSchemaAdaptor(): (params: Adaptor) => void { + return adaptor; + } +} diff --git a/packages/plots/src/core/plots/radial-bar/type.ts b/packages/plots/src/core/plots/radial-bar/type.ts new file mode 100644 index 000000000..2696e755d --- /dev/null +++ b/packages/plots/src/core/plots/radial-bar/type.ts @@ -0,0 +1,3 @@ +import type { BaseOptions, Options } from '../../types/common'; + +export type RadialBarOptions = Options & BaseOptions; diff --git a/site/examples/statistics/radial-bar/demo/apple-watch-activity.js b/site/examples/statistics/radial-bar/demo/apple-watch-activity.js new file mode 100644 index 000000000..f841ee822 --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/apple-watch-activity.js @@ -0,0 +1,59 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const data = [ + { + name: 'activity1', + percent: 2370, + color: '#1ad5de', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/ck11Y6aRrz/shangjiantou.png', + }, + { + name: 'activity2', + percent: 800, + color: '#a0ff03', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/zY2JB7hhrO/shuangjiantou.png', + }, + { + name: 'activity3', + percent: 650, + color: '#e90b3a', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/%24qBxSxdK05/jiantou.png', + }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'name', + yField: 'percent', + width: 400, + height: 244, + autoFit: false, + appendPadding: [50, 0, 50, 0], + // maxAngle: 90, //最大旋转角度, + radius: 1, + innerRadius: 0.2, + style: { + radius: 26, // 圆角 + }, + theme: 'dark', + colorField: 'name', + colorKey: 'color', + legend: false, + axis: { x: false, y: false }, + markBackground: { + opacity: 0.25, + color: 'color', + }, + scale: { + y: { + domain: [0, 12000], // 设定范围用于背景图的渲染获取最大值 + }, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/background.js b/site/examples/statistics/radial-bar/demo/background.js new file mode 100644 index 000000000..9031591d2 --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/background.js @@ -0,0 +1,54 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'name', + yField: 'star', + maxAngle: 350, + radius: 1, + innerRadius: 0.2, + tooltip: { + items: ['star'], + }, + legend:false, + axis: { + y: false, + }, + markBackground: { + opacity: 0.25, + }, + scale:{ + y: { + domain: [0, 12000], // 设定范围用于背景图的渲染获取最大值 + }, + }, + style: { + radius: 180, + fill: ({ star }) => { + if (star > 10000) { + return '#6349ec'; + } else if (star > 1000) { + return '#ff9300'; + } + return '#ff93a7'; + }, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/basic.js b/site/examples/statistics/radial-bar/demo/basic.js new file mode 100644 index 000000000..bbe518615 --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/basic.js @@ -0,0 +1,32 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + + +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'name', + yField: 'star', + // maxAngle: 90, //最大旋转角度, + radius: 1, + innerRadius: 0.2, + tooltip: { + items:['star'] + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/color.js b/site/examples/statistics/radial-bar/demo/color.js new file mode 100644 index 000000000..38eacbbec --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/color.js @@ -0,0 +1,42 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'name', + yField: 'star', + maxAngle: 270, + radius: 0.8, + innerRadius: 0.2, + tooltip: { + items: ['star'], + }, + // colorField: 'star', // 会默认给颜色 + style: { + fill: ({ star }) => { + if (star > 10000) { + return '#36c361'; + } else if (star > 1000) { + return '#2194ff'; + } + return '#ff4d4f'; + }, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/grouped.js b/site/examples/statistics/radial-bar/demo/grouped.js new file mode 100644 index 000000000..a9bc549ad --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/grouped.js @@ -0,0 +1,111 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + + +const data = [ + { + "year": "1991", + "value": 3, + "type": "Lon" + }, + { + "year": "1992", + "value": 4, + "type": "Lon" + }, + { + "year": "1993", + "value": 3.5, + "type": "Lon" + }, + { + "year": "1994", + "value": 5, + "type": "Lon" + }, + { + "year": "1995", + "value": 4.9, + "type": "Lon" + }, + { + "year": "1996", + "value": 6, + "type": "Lon" + }, + { + "year": "1997", + "value": 7, + "type": "Lon" + }, + { + "year": "1998", + "value": 9, + "type": "Lon" + }, + { + "year": "1999", + "value": 13, + "type": "Lon" + }, + { + "year": "1991", + "value": 3, + "type": "Bor" + }, + { + "year": "1992", + "value": 4, + "type": "Bor" + }, + { + "year": "1993", + "value": 3.5, + "type": "Bor" + }, + { + "year": "1994", + "value": 5, + "type": "Bor" + }, + { + "year": "1995", + "value": 4.9, + "type": "Bor" + }, + { + "year": "1996", + "value": 6, + "type": "Bor" + }, + { + "year": "1997", + "value": 7, + "type": "Bor" + }, + { + "year": "1998", + "value": 9, + "type": "Bor" + }, + { + "year": "1999", + "value": 13, + "type": "Bor" + } +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'year', + yField: 'value', + group: true, + maxAngle: 270, + colorField: 'type', + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/line.js b/site/examples/statistics/radial-bar/demo/line.js new file mode 100644 index 000000000..5164492ad --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/line.js @@ -0,0 +1,37 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const data = [ + { term: 'Zombieland', count: 9 }, + { term: 'Wieners', count: 8 }, + { term: 'Toy Story', count: 8 }, + { term: 'trashkannon', count: 7 }, + { term: 'the GROWLERS', count: 6 }, + { term: 'mudweiser', count: 6 }, + { term: 'ThunderCats', count: 4 }, + { term: 'The Taqwacores - Motion Picture', count: 4 }, + { term: 'The Shawshank Redemption', count: 2 }, + { term: 'The Olivia Experiment', count: 1 }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'term', + yField: 'count', + startAngle: Math.PI * 0.5, + maxAngle: 270, //最大旋转角度, + radius: 1, + innerRadius: 0.2, + legend: false, + axis: { y: false }, + tooltip: { + items: ['count'], + }, + sizeField: 10, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/meta.json b/site/examples/statistics/radial-bar/demo/meta.json new file mode 100644 index 000000000..fab7457b9 --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/meta.json @@ -0,0 +1,66 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.js", + "title": { + "zh": "玉珏图", + "en": "Radial-Bar plot" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-1GkR6WftskAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "round-corner.js", + "title": { + "zh": "带圆角的玉珏图", + "en": "Radial-Bar plot with rounded corner" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FmTOT68Ai_EAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "color.js", + "title": { + "zh": "带自定义颜色的玉珏图", + "en": "Radial-Bar plot with custom color" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/l6uP5%26MiT7/385e3f80-52ec-49e9-9dfe-bd447e63203f.png" + }, + { + "filename": "stacked.js", + "title": { + "zh": "堆叠玉珏图", + "en": "Stacked Radial-Bar plot" + }, + + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tft60hEBvN/594d5cfc-8da0-441b-89dd-81eb4f5657b6.png" + }, + { + "filename": "grouped.js", + "title": { + "zh": "分组玉珏图", + "en": "Grouped Radial-Bar plot" + }, + + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/M2EJJVBmHE/8984eee5-da51-4afb-8e81-34a8aaab47c0.png" + }, + { + "filename": "background.js", + "title": { + "zh": "带柱子背景的玉珏图", + "en": "Radial-Bar plot with background" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/A2Ik7iu%26YW/519113a4-f42e-48b2-a75d-1021add83c30.png" + }, + { + "filename": "line.js", + "title": { + "zh": "线形玉珏图", + "en": "Radial-line plot" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*GC6wT4GQ-oMAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/site/examples/statistics/radial-bar/demo/round-corner.js b/site/examples/statistics/radial-bar/demo/round-corner.js new file mode 100644 index 000000000..37cbff543 --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/round-corner.js @@ -0,0 +1,35 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + + +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'name', + yField: 'star', + maxAngle: 90, + radius: 1, + innerRadius: 0.2, + style: { + radius:26, // 圆角 + }, + meta: { + y: { nice: true }, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/demo/stacked.js b/site/examples/statistics/radial-bar/demo/stacked.js new file mode 100644 index 000000000..2d76fb6ec --- /dev/null +++ b/site/examples/statistics/radial-bar/demo/stacked.js @@ -0,0 +1,111 @@ +import { RadialBar } from '@ant-design/plots'; +import React from 'react'; +import ReactDOM from 'react-dom'; + + +const data = [ + { + "year": "1991", + "value": 3, + "type": "Lon" + }, + { + "year": "1992", + "value": 4, + "type": "Lon" + }, + { + "year": "1993", + "value": 3.5, + "type": "Lon" + }, + { + "year": "1994", + "value": 5, + "type": "Lon" + }, + { + "year": "1995", + "value": 4.9, + "type": "Lon" + }, + { + "year": "1996", + "value": 6, + "type": "Lon" + }, + { + "year": "1997", + "value": 7, + "type": "Lon" + }, + { + "year": "1998", + "value": 9, + "type": "Lon" + }, + { + "year": "1999", + "value": 13, + "type": "Lon" + }, + { + "year": "1991", + "value": 3, + "type": "Bor" + }, + { + "year": "1992", + "value": 4, + "type": "Bor" + }, + { + "year": "1993", + "value": 3.5, + "type": "Bor" + }, + { + "year": "1994", + "value": 5, + "type": "Bor" + }, + { + "year": "1995", + "value": 4.9, + "type": "Bor" + }, + { + "year": "1996", + "value": 6, + "type": "Bor" + }, + { + "year": "1997", + "value": 7, + "type": "Bor" + }, + { + "year": "1998", + "value": 9, + "type": "Bor" + }, + { + "year": "1999", + "value": 13, + "type": "Bor" + } +]; + +const DemoRadialBar = () => { + const config = { + data, + xField: 'year', + yField: 'value', + stack: true, + maxAngle: 270, + colorField: 'type', + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/radial-bar/index.en.md b/site/examples/statistics/radial-bar/index.en.md new file mode 100644 index 000000000..2e6859450 --- /dev/null +++ b/site/examples/statistics/radial-bar/index.en.md @@ -0,0 +1,4 @@ +--- +title: RadialBar +order: 21 +--- diff --git a/site/examples/statistics/radial-bar/index.zh.md b/site/examples/statistics/radial-bar/index.zh.md new file mode 100644 index 000000000..69c374d3c --- /dev/null +++ b/site/examples/statistics/radial-bar/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 玉珏图 +order: 21 +---