feat(radial-bar): 玉珏图支持配置开始角度和结束角度 (#2251)

* feat(radial-bar): 玉珏图支持配置开始角度和结束角度 * docs: 补充玉珏图配置坐标系起始和终止角度的文档 & axis 添加 label 配置文档
antvis · Jan 20, 2021 · b18b4d2 · b18b4d2
1 parent b5fe647
commit b18b4d2
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 9 deletions.
diff --git a/docs/api/plots/radial-bar.en.md b/docs/api/plots/radial-bar.en.md
@@ -33,6 +33,20 @@ Radius of Polar coordinate. Value can be: (0, 1]
 
 InnerRadius of Polar coordinate. Value can be: (0, 1]
 
+#### startAngle 
+
+<description>**optional** _number_ _default:_ `-Math.PI / 2`</description>
+
+配置坐标系的起始角度。
+
+#### endAngle 
+
+<description>**optional** _number_ _default:_ `Math.PI / 2 * 3`</description>
+
+配置坐标系的结束角度。
+
+<playground path="more-plots/radial-bar/demo/line.ts" rid="startAngle-endAngle"></playground>
+
 #### maxAngle
 
 <description>**optional** _number_ _default:_ `240`</description>

diff --git a/docs/api/plots/radial-bar.zh.md b/docs/api/plots/radial-bar.zh.md
@@ -34,6 +34,20 @@ order: 25
 
 功能描述： 内径，0 ~ 1。
 
+#### startAngle 
+
+<description>**optional** _number_ _default:_ `-Math.PI / 2`</description>
+
+配置坐标系的起始角度。
+
+#### endAngle 
+
+<description>**optional** _number_ _default:_ `Math.PI / 2 * 3`</description>
+
+配置坐标系的结束角度。
+
+<playground path="more-plots/radial-bar/demo/line.ts" rid="startAngle-endAngle"></playground>
+
 #### maxAngle
 
 <description>**可选** _number_ _default:_ `240`</description>

diff --git a/docs/common/axis.zh.md b/docs/common/axis.zh.md
@@ -1,3 +1,25 @@
+##### position
+
+<description>**optional** _`top` | `bottom` | `left` | `right`_</description>
+
+适用于直角坐标系，设置坐标轴的位置。
+
+### label
+
+<description> _AxisLabelCfg | null_ **optional** </description>
+
+文本标签的配置项，null 表示不展示。_AxisLabelCfg_ 配置如下：
+
+| 参数名       | 类型                                                   | 是否必选 | 默认值  | 描述                     |
+| ------------ | ------------------------------------------------------ | -------- | ------- | ------------------------ |
+| style        | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)                                    |          | -       | 坐标轴刻度线的样式配置项 |
+| offset       | number                                                 |          | -       | label 的偏移量           |
+| rotate       | number                                                 |          | -       | 文本旋转角度             |
+| autoRotate   | boolean                                                |          | `true`  | 是否自动旋转             |
+| autoHide     | boolean                                                |          | `false` | 是否自动隐藏             |
+| autoEllipsis | boolean                                                |          | `false` | 是否自动省略             |
+| formatter    | `(text: string, item: ListItem, index: number) => any` |          | `false` | 格式化函数               |
+
 ##### nice
 
 <description>**optional** _boolean_ _default:_ `true`</description>
@@ -46,12 +68,6 @@
 
 指定 tick 计算方法，或自定义计算 tick 的方法，内置 tick 计算方法包括 `cat`、`time-cat`、 `wilkinson-extended`、`r-pretty`、`time`、`time-pretty`、`log`、`pow`、`quantile`、`d3-linear`。
 
-##### position
-
-<description>**optional** _`top` | `bottom` | `left` | `right`_</description>
-
-适用于直角坐标系，设置坐标轴的位置。
-
 ##### line
 
 <description>**optional** _object_</description>

diff --git a/examples/more-plots/radial-bar/demo/line.ts b/examples/more-plots/radial-bar/demo/line.ts
@@ -17,8 +17,11 @@ const bar = new RadialBar('container', {
   data,
   xField: 'term',
   yField: 'count',
-  radius: 0.8,
-  innerRadius: 0.2,
+  radius: 1,
+  innerRadius: 0.4,
+  // 设置坐标系的起始角度和终止角度
+  startAngle: Math.PI * 0.5,
+  endAngle: Math.PI * 2.5,
   tooltip: {
     showMarkers: true,
   },

diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts
@@ -61,14 +61,16 @@ export function meta(params: Params<RadialBarOptions>): Params<RadialBarOptions>
  */
 function coordinate(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
   const { chart, options } = params;
-  const { radius, innerRadius } = options;
+  const { radius, innerRadius, startAngle, endAngle } = options;
 
   chart
     .coordinate({
       type: 'polar',
       cfg: {
         radius,
         innerRadius,
+        startAngle,
+        endAngle,
       },
     })
     .transpose();

diff --git a/src/plots/radial-bar/types.ts b/src/plots/radial-bar/types.ts
@@ -16,6 +16,10 @@ export interface RadialBarOptions extends Options, Pick<BarOptions, 'barBackgrou
   readonly radius?: number;
   /** 圆内半径 */
   readonly innerRadius?: number;
+  /** 圆环的开始角度 */
+  readonly startAngle?: number;
+  /** 圆环的结束角度 */
+  readonly endAngle?: number;
   /** 颜色字段 */
   readonly colorField?: string;
   /** 类型 */