docs: special plot (#2193)

packages/plots/src/core/plots/liquid/type.ts

@@ -1,6 +1,5 @@
 import type { Options } from '../../types/common';
 
 export type LiquidOptions = Omit<Options, 'data'> & {
-  data: number;
   percent?: boolean;
 };

packages/plots/src/core/plots/radar/adaptor.ts

@@ -1,4 +1,4 @@
-import { flow, transformOptions, get } from '../../utils';
+import { flow, transformOptions, get, set } from '../../utils';
 import { coordinate } from '../../components';
 
 import type { Adaptor } from '../../types';
@@ -15,7 +15,7 @@ export function adaptor(params: Params) {
    * 图表差异化处理
    */
   const init = (params: Params) => {
-    params.options.coordinate = { type: get(params, 'options.coordinateType', 'polar') };
+    set(params, 'options.coordinate', { type: get(params, 'options.coordinateType', 'polar') });
     return params;
   };
 

packages/plots/src/core/plots/sankey/type.ts

@@ -1,3 +1,3 @@
-import type { Options, BaseOptions } from '../../types/common';
+import type { Options } from '../../types/common';
 
 export type SankeyOptions = Options;

packages/plots/src/core/plots/venn/type.ts

@@ -1,6 +1,6 @@
-import type { BaseOptions, Options } from '../../types/common';
+import type { Options } from '../../types/common';
 
-export type VennOptions = Options & BaseOptions;
+export type VennOptions = Options;
 
 export enum DefaultTransformKey {
   color = 'key',

packages/plots/src/core/types/common.ts

@@ -70,10 +70,6 @@ export type ArcBaseOptions = {
    * @title 角度映射字段
    */
   readonly angleField: string;
-  /**
-   * @title 颜色映射字段
-   */
-  readonly colorField: string;
   /**
    * @title 饼图半径
    */

site/.dumirc.ts

@@ -68,18 +68,18 @@ export default defineConfig({
       {
         slug: 'options/plots/component',
         title: {
-          zh: '组件 - Component',
+          zh: '图表组件 - Component',
           en: 'Component',
         },
-        order: 9,
+        order: 2,
       },
       {
         slug: 'options/plots/label',
         title: {
           zh: '数据标签 - Label',
           en: 'Label',
         },
-        order: 10,
+        order: 3,
       },
 
       {
@@ -88,23 +88,31 @@ export default defineConfig({
           zh: '动画 - Animation',
           en: 'Animation',
         },
-        order: 11,
+        order: 4,
       },
       {
         slug: 'options/plots/interaction',
         title: {
           zh: '交互 - Interaction',
           en: 'Interaction',
         },
-        order: 12,
+        order: 5,
       },
       {
         slug: 'options/plots/theme',
         title: {
           zh: '主题 - Theme',
           en: 'Theme',
         },
-        order: 16,
+        order: 6,
+      },
+      {
+        slug: 'options/plots/special',
+        title: {
+          zh: '专有配置 - Specal Plot',
+          en: 'Specal Plot',
+        },
+        order: 10,
       },
     ],
     examples: [

site/docs/options/plots/component/axis.zh.md

@@ -16,6 +16,8 @@ const config = {
 
 ## 选项
 
+<img alt="item" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*d_cUTqkxrmwAAAAAAAAAAAAADmJ7AQ/original" />
+
 ### 标题
 
 | 属性               | 描述                                                           | 类型                                                         | 默认值 |

site/docs/options/plots/palette.en.md

@@ -1,6 +1,6 @@
 ---
 title: Palette
-order: 15
+order: 8
 ---
 
 <embed src="@/docs/options/plots/palette.zh.md"></embed>

site/docs/options/plots/palette.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 色板 - Palette
-order: 15
+order: 8
 ---
 
 G2 提供了一些内置的色板，可以直接使用，并支持 [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic)的色板。

site/docs/options/plots/special/bar.en.md

@@ -0,0 +1,6 @@
+---
+title: Bar
+order: 0
+---
+
+<embed src="@/docs/options/plots/special/bar.zh.md"></embed>

site/docs/options/plots/special/bar.zh.md

@@ -0,0 +1,29 @@
+---
+title: Bar
+order: 0
+---
+
+#### markBackground
+
+<description>**optional** *BarOptions*</description>
+
+mark 背景配置
+
+```ts
+{
+  scale: {
+    y: {
+      domain: [0, 200]
+    }
+  },
+  markBackground: {
+    style: {
+      fill: '#eee'
+    }
+  },
+}
+```
+
+示例：
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LD4DR6LVD9UAAAAAAAAAAAAADmJ7AQ/original" />

site/docs/options/plots/special/bidirectional-bar.en.md

@@ -0,0 +1,6 @@
+---
+title: BidirectionalBar
+order: 3
+---
+
+<embed src="@/docs/options/plots/special/bidirectional-bar.zh.md"></embed>

site/docs/options/plots/special/bidirectional-bar.zh.md

@@ -0,0 +1,17 @@
+---
+title: BidirectionalBar
+order: 3
+---
+
+#### yField
+
+<description>**optional** *string[]*</description>
+
+Y 轴字段
+
+
+#### layout
+
+<description>**optional** *vertical | horizontal* **default** *vertical*</description>
+
+布局

site/docs/options/plots/special/box.en.md

@@ -0,0 +1,6 @@
+---
+title: Box
+order: 4
+---
+
+<embed src="@/docs/options/plots/special/box.zh.md"></embed>

site/docs/options/plots/special/box.zh.md

@@ -0,0 +1,41 @@
+---
+title: Box
+order: 4
+---
+
+#### boxType
+
+<description>**optional** *boxplot | box* **default** *box*</description>
+
+
+Box` 图形是用来绘制箱线图（boxplot）又叫盒须图、盒式图，通常用来展示一组数据分布情况的统计图，一般包括几种数据：`最小值`、`下四分位数`、`中位数`、`上四分位数`、`最大值`，另外可以结合 `point` mark 绘制异常点数据。
+
+<img alt="box" width="100%" style="max-width: 400px" src="https://gw.alipayobjects.com/zos/antfincdn/f6WEf%24CrgE/20220913111713.jpg" />
+
+Box 特殊的一点在于 `y` 通道对应的数据是一组统计数据的数组，最后会将数据映射为箱线图所需求的 14 个点集合。
+
+```text
+/**
+ *
+ * p0           p2          p1
+ *    ──────────┬──────────
+ *              │
+ *              │
+ *              │
+ *              │ p3
+ * p4 ┌─────────┴──────────┐ p5
+ *    │                    │
+ *    │                    │
+ * p8 ├────────────────────┤ p9
+ *    │                    │
+ *    │        p10         │
+ * p7 └─────────┬──────────┘ p6
+ *              │
+ *              │
+ *              │
+ *   ───────────┴───────────
+ * p12         p11           p13
+ */
+```
+
+更多的案例，可以查看[图表示例](/examples)页面。

site/docs/options/plots/special/bullet.en.md

@@ -0,0 +1,6 @@
+---
+title: Bullet
+order: 5
+---
+
+<embed src="@/docs/options/plots/special/bullet.zh.md"></embed>

site/docs/options/plots/special/bullet.zh.md

@@ -0,0 +1,61 @@
+---
+title: Bullet
+order: 5
+---
+
+#### measureField 
+
+<description>**required** _string_</description>
+
+使用数据条的长度，实际数值的设置字段，表示实际数值。
+
+#### rangeField 
+
+<description>**required** _string_</description>
+
+使用背景色条的长度的设置字段，表示区间范围。
+
+#### targetField 
+
+<description>**required** _string_</description>
+
+使用测量标记的刻度轴位置的设置字段，表示目标值。
+
+#### layout
+
+<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+
+表示子弹图方向。
+
+
+#### color 
+
+<description>**optional** _object_</description>
+
+设置子弹图各图形 color 属性。
+
+| 细分配置 | 类型        | 功能描述     | 默认配置 |
+| -------- | ----------- | ------------ | -------- |
+| ranges    | _string\|string[]_ | 区间背景颜色 | 无       |
+| measures  | _string\|string[]_ | 实际值颜色   | 无       |
+| target   | _string\|string[]_ | 目标值颜色   | 无       |
+
+
+#### range 
+
+<description>**required** _BulletOptions_</description>
+
+range 配置
+
+#### measure 
+
+<description>**required** _BulletOptions_</description>
+
+measure 配置
+
+
+#### target 
+
+<description>**required** _BulletOptions_</description>
+
+target 配置

site/docs/options/plots/special/column.en.md

@@ -0,0 +1,6 @@
+---
+title: Column
+order: 1
+---
+
+<embed src="@/docs/options/plots/special/column.zh.md"></embed>

site/docs/options/plots/special/column.zh.md

@@ -0,0 +1,30 @@
+---
+title: Column
+order: 1
+---
+
+
+#### markBackground
+
+<description>**optional** *ColumnOptions*</description>
+
+mark 背景配置
+
+```ts
+{
+  scale: {
+    y: {
+      domain: [0, 0.5]
+    }
+  },
+  markBackground: {
+    style: {
+      fill: '#eee'
+    }
+  },
+}
+```
+
+示例：
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JhiETbmdyMkAAAAAAAAAAAAADmJ7AQ/original" />

site/docs/options/plots/special/funnel.en.md

@@ -0,0 +1,6 @@
+---
+title: Funnel
+order: 6
+---
+
+<embed src="@/docs/options/plots/special/funnel.zh.md"></embed>

site/docs/options/plots/special/funnel.zh.md

@@ -0,0 +1,16 @@
+---
+title: Funnel
+order: 6
+---
+
+#### compareField
+
+<description>**optional** _string_</description>
+
+对比字段。声明此字段时会自动渲染为对比漏斗图
+
+#### isTransposed
+
+<description>**optional** _boolean_ _default:_ `false`</description>
+
+是否转置。

site/docs/options/plots/special/heatmap.en.md

@@ -0,0 +1,6 @@
+---
+title: Heatmap
+order: 7
+---
+
+<embed src="@/docs/options/plots/special/heatmap.zh.md"></embed>

site/docs/options/plots/special/heatmap.zh.md

@@ -0,0 +1,10 @@
+---
+title: Heatmap
+order: 7
+---
+
+#### mark
+
+<description>**optional** _string_</description>
+
+热力图类型，'point' | 'cell'