BREAKING CHANGE: update the configuration of the RadialBar

Author: lxfu1

packages/plots/src/core/plots/radial-bar/adaptor.ts

@@ -59,15 +59,15 @@ export function adaptor(params: Params) {
     const { markBackground, children, scale, coordinate, xField } = options;
     const domain = get(scale, 'y.domain', []);
     if (markBackground) {
+      const { style, ...rest } = 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填满灰色背景
+          fillOpacity: 0.4,
+          fill: '#e0e4ee', // 默认用fill填满灰色背景
+          ...style,
         },
         // 背景图需要填满整个圆
         coordinate: {
@@ -76,7 +76,7 @@ export function adaptor(params: Params) {
           endAngle: (3 / 2) * Math.PI,
         },
         animate: false,
-        ...markBackground,
+        ...rest,
       });
     }
     return params;

packages/plots/src/core/plots/radial-bar/type.ts

@@ -30,5 +30,5 @@ export type RadialBarOptions = Options & {
    * @default null
    * @description 通过配置color指定颜色参数,必须配合scale.y.domain 指定背景轴的范围区间
    */
-  markBackground: Record<string, string>;
+  markBackground: Record<string, any>;
 };

site/docs/components/plots/bar.zh.md

@@ -65,7 +65,7 @@ conversionTag: {
 | data | [数据](/options/plots/data/overview) | Array | [] |
 | xField | 横轴字段 | string | - |
 | yField | 纵轴字段 | string \| string[] | - |
-| seriesField | 多折线图区分字段 | string（可选） | - |
+| seriesField | 多条形图区分字段 | string（可选） | - |
 | colorField | 和 seriesField 类似，不过会加上颜色通道，详见[color](/options/plots/color) | string（可选） | - |
 | stack | 条形图是否堆叠 | boolean\|[Stack](#stack) | false |
 | group | 条形图是否分组 | boolean\|[Group](#group) | false |

site/docs/components/plots/box.zh.md

@@ -94,7 +94,7 @@ p12         p11           p13
 | data | [数据](#data) | Array | [] |
 | xField | 横轴字段 | string | - |
 | yField | 纵轴字段 | string \| string[] | - |
-| seriesField | 多折线图区分字段 | string（可选） | - |
+| seriesField | 多箱线图区分字段 | string（可选） | - |
 | colorField | 和 seriesField 类似，不过会加上颜色通道，详见[color](/options/plots/color) | string（可选） | - |
 | boxType | 标记类型，可选值为 `box` 和 `boxplot`。 `box` 是原子标记，需要开发者手动指定 5 个统计点的数据; `boxplot` 是高阶标记，自带数据分组和数据统计聚合功能； | box \| boxplot | `box` |
 | transpose | 是否开启坐标转置 | boolean | - |

site/docs/components/plots/column.zh.md

@@ -72,7 +72,7 @@ conversionTag: {
 | data | [数据](/options/plots/data/overview) | Array | [] |
 | xField | 横轴字段 | string | - |
 | yField | 纵轴字段 | string \| string[] | - |
-| seriesField | 多折线图区分字段 | string（可选） | - |
+| seriesField | 多柱状图区分字段 | string（可选） | - |
 | colorField | 和 seriesField 类似，不过会加上颜色通道，详见[color](/options/plots/color) | string（可选） | - |
 | stack | 柱状图是否堆叠 | boolean\|[Stack](#stack) | false |
 | group | 柱状图是否分组 | boolean\|[Group](#group) | false |

site/docs/components/plots/dual-axes.zh.md

@@ -55,7 +55,7 @@ order: 5
 | xField | 横轴字段 | string | - |
 | yField | 纵轴字段 | string \| string[] | - |
 | children | 图表列表 | any[] | - |
-| seriesField | 多折线图区分字段 | string（可选） | - |
+| seriesField | 多 Mark 区分字段 | string（可选） | - |
 | colorField | 和 seriesField 类似，不过会加上颜色通道，详见[color](/options/plots/color) | string（可选） | - |
 | title | 用于指定图表的标题内容，详见[标题](/options/plots/title) | object（可选） | - |
 | axis | 用于建立数据与视觉位置的映射关系，详见[坐标轴](/options/plots/axis) | object（可选） | - |

site/docs/components/plots/radial-bar.zh.md

@@ -8,44 +8,85 @@ link: /examples#statistics-radial-bar
 order: 21
 ---
 
-## 特有
+## 简介
 
-### markBackground
+玉珏图（RadialBar）又名环形柱状图，是柱状图关于笛卡尔坐标系转换到极坐标系的仿射变换。其意义和用法与柱状图类似。
 
-<description>**optional** _BarOptions_</description>
+玉珏图有半径反馈效应。由于玉珏图中是用角度表示每个珏环数值的大小，角度是决定性因素。所以，哪怕外侧（半径大的）珏环的数值小于内侧（半径小的）珏环，外侧的每个珏环会相对的比里面的珏环更长。这会造成视觉上的误解。
 
-data 参数
+而且因为我们的视觉系统更善于比较直线，所以笛卡尔坐标系更适合于比较各个分类的数值比较。所以玉珏图从实用的角度去看，其更多的是一种审美上的需求。。
 
-```ts
-const data = [
-  { name: 'X6', star: 297, color: 'pink' },
-  { name: 'G', star: 506, color: 'pink' },
-  { name: 'AVA', star: 805, color: 'pink' },
-  { name: 'G2Plot', star: 1478, color: 'orange' },
-  { name: 'L7', star: 2029, color: 'orange' },
-  { name: 'G6', star: 7100, color: 'orange' },
-  { name: 'F2', star: 7346, color: 'orange' },
-  { name: 'G2', star: 10178, color: 'blue' },
-];
-```
+## 代码演示
+
+更多示例详见[玉珏图](/examples#statistics-radial-bar)
+
+### 基础用法
+
+<Playground path="/statistics/radial-bar/demo/basic.js" rid="radial-bar-basic"></playground>
+
+### 带圆角
+
+<Playground path="/statistics/radial-bar/demo/round-corner.js" rid="radial-bar-round-corner"></playground>
+
+### 自定义颜色
+
+<Playground path="/statistics/radial-bar/demo/color.js" rid="radial-bar-color"></playground>
+
+### 堆叠
 
-mark 背景配置
+<Playground path="/statistics/radial-bar/demo/stacked.js" rid="radial-bar-stacked"></playground>
+
+### 带背景
+
+<Playground path="/statistics/radial-bar/demo/background.js" rid="radial-bar-background"></playground>
+
+
+## 配置项
+
+### 概览
+
+|配置项|说明|类型|默认值|
+|-----|---|----|-----|
+| data | [数据](/options/plots/data/overview) | Array | [] |
+| xField | 横轴字段 | string | - |
+| yField | 纵轴字段 | string \| string[] | - |
+| colorField | 颜色映射通道，详见[color](/options/plots/color) | string（可选） | - |
+| radius | 半径 | number[0~1]  | - |
+| innerRadius | 内径 | number[0~1]  | 0 |
+| startAngle | 起始角度 | number  | - |
+| endAngle | 起始角度 | number  | - |
+| stack | 柱状图是否堆叠 | boolean\|[Stack](#stack) | false |
+| group | 柱状图是否分组 | boolean\|[Group](#group) | false |
+| markBackground | 元素背景配置，和配置柱子无区别，可以看做是放置于底层的 Column 组件，需要配置 `scale.y.domain` 才能生效 | [MarkBackground](#markBackground) | - |
+| title | 用于指定图表的标题内容，详见[标题](/options/plots/title) | object（可选） | - |
+| legend | 图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选，详见[图例](/options/plots/legend) | object（可选） | - |
+| label | 数据标签是给图表添加标注的手段之一，详见[标签](/options/plots/label) | object（可选） | - |
+| tooltip | 用于动态展示数据点的详细信息，详见[提示](/options/plots/tooltip) | object（可选） | - |
+| style | 视觉样式，配置项详见[绘图属性](/options/plots/style#绘图属性) | object（可选） | - |
+| theme | 用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见[主题](/options/plots/theme/overview) | string \| object（可选） | `light` |
+| onReady | 图表加载回调，用于后续的事件[事件](/options/plots/event)绑定 | Function（可选） | - |
+| scale | 将抽象数据映射为视觉数据，详见[比例尺](/options/plots/scale/overview) | object（可选） | - |
+| animate | 动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见[动画](/options/plots/animate/overview) | object（可选） | - |
+| interaction | 提供了按需探索数据的能力，详见[交互](/options/plots/interaction/overview) | object（可选） | - |
+| state | 实现交互反馈、高亮、选中等效果，详见[状态](/options/plots/state)，不同交互下图表样式 | object（可选） | - |
+| annotations | 视图好比一个画板，`RadailBar` 组件默认在其上绘制了一个玉珏图，我们可以通过 annotations 在上面叠加更多的图层，详见[标注](/examples#statistics-annotation-shape) | Array（可选） | - |
+
+### MarkBackground
 
 ```ts
-{
-  scale: {
-    y: {
-      domain: [0, 200]
-    }
-  },
-  /** 不配置任何参数，默认开启背景颜色 '#e0e4ee' */
-  // markBackground:{}
-  markBackground: {
-    color: 'color'; // 指定color的参数，即根据color字段进行颜色映射
-  },
-}
+type MarkBackground = {
+  /** background 样式 */
+  style?: ShapeAttrs;
+  [key: string]: any
+};
 ```
 
-示例：
+style 配置可以参考[配置图形样式](/options/plots/style#配置图形样式)
+
+## 事件
+
+详见[选项-事件](/options/plots/event)。
+
+## 方法
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4IsBSoYrLL4AAAAAAAAAAAAADmJ7AQ/original" />
+详见[图表概览-图表方法](/components/plots/overview#图表方法)。

site/examples/statistics/radial-bar/demo/apple-watch-activity.js

@@ -32,7 +32,6 @@ const DemoRadialBar = () => {
     height: 244,
     autoFit: false,
     appendPadding: [50, 0, 50, 0],
-    // maxAngle: 90, //最大旋转角度,
     radius: 1,
     innerRadius: 0.2,
     style: {

site/examples/statistics/radial-bar/demo/background.js

@@ -18,7 +18,6 @@ const DemoRadialBar = () => {
     data,
     xField: 'name',
     yField: 'star',
-    maxAngle: 350,
     radius: 1,
     innerRadius: 0.2,
     tooltip: {

site/examples/statistics/radial-bar/demo/basic.js

@@ -18,7 +18,6 @@ const DemoRadialBar = () => {
     data,
     xField: 'name',
     yField: 'star',
-    // maxAngle: 90, //最大旋转角度,
     radius: 1,
     innerRadius: 0.2,
     tooltip: {