feat(line): 折线图支持坐标系镜像反转 (#2925)

antvis · Oct 21, 2021 · 4d4b22b · 4d4b22b
1 parent bf84671
commit 4d4b22b
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 2 deletions.
diff --git a/docs/api/plots/line.en.md b/docs/api/plots/line.en.md
@@ -9,6 +9,14 @@ order: 0
 
 ### Data Mapping
 
+### Coordinate
+
+#### reflect
+
+<description>**optional** _'x' | 'y' | ['x', 'y']_</description>
+
+Apply `reflect` transform to the coordinate of line plot. When `reflect: 'y'` is set, y-axis can be inverted; in the same way, you can set `reflect: 'x'` to invert x-axis, and invert x-axis and y-axis at the same time is also supported.
+
 #### data
 
 <description>**required** _array object_</description>

diff --git a/docs/api/plots/line.zh.md b/docs/api/plots/line.zh.md
@@ -7,6 +7,14 @@ order: 0
 
 `markdown:docs/common/chart-options.zh.md`
 
+### 坐标系
+
+#### 轴镜像反转 - reflect
+
+<description>**可选** _'x' | 'y' | ['x', 'y']_</description>
+
+折线图坐标系反转。当设置 `reflect: 'y'`时，可以对 y-axis 进行反转；同理，设置 `reflect: 'x'`时，可以对 x-axis 进行反转；也支持同时对 x-axis 和 y-axis 进行反转。
+
 ### 数据映射
 
 #### data
@@ -88,7 +96,7 @@ const data = [
 
 `markdown:docs/common/component.zh.md`
 
-#### 缩略轴
+#### 缩略轴 - slider
 
 `markdown:docs/common/slider.zh.md`
 

diff --git a/examples/line/basic/demo/meta.json b/examples/line/basic/demo/meta.json
@@ -28,6 +28,15 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*VN5SQYsPOaIAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "reflect-y.ts",
+      "title": {
+        "zh": "折线图 y 轴镜像反转",
+        "en": "Invert y-axis of line plot"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/f8CNbPpLQj/a0eaf523-7c9d-4cec-aaaf-74f6e29412e0.png"
+    },
     {
       "filename": "line-slider.ts",
       "title": {

diff --git a/examples/line/basic/demo/reflect-y.ts b/examples/line/basic/demo/reflect-y.ts
@@ -0,0 +1,23 @@
+import { Line } from '@antv/g2plot';
+
+const data = [
+  { Date: '2021-10-01', rating: 1 },
+  { Date: '2021-10-02', rating: 3 },
+  { Date: '2021-10-03', rating: 8 },
+  { Date: '2021-10-04', rating: 12 },
+  { Date: '2021-10-05', rating: 30 },
+];
+
+const line = new Line('container', {
+  data,
+  padding: 'auto',
+  xField: 'Date',
+  yField: 'rating',
+  reflect: 'y',
+  xAxis: {
+    // because coordinate is reflectY
+    position: 'top',
+  },
+});
+
+line.render();
diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts
@@ -1,5 +1,5 @@
 import { Geometry } from '@antv/g2';
-import { each } from '@antv/util';
+import { each, isArray } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { tooltip, slider, interaction, animation, theme, scale, annotation, limitInPlot } from '../../adaptor/common';
 import { findGeometry, transformLabel, deepAssign } from '../../utils';
@@ -71,6 +71,26 @@ export function meta(params: Params<LineOptions>): Params<LineOptions> {
   )(params);
 }
 
+/**
+ * 坐标系配置. 支持 reflect 镜像处理
+ * @param params
+ */
+function coordinate(params: Params<LineOptions>): Params<LineOptions> {
+  const { chart, options } = params;
+  const { reflect } = options;
+  if (reflect) {
+    let p = reflect as any;
+    if (!isArray(p)) {
+      p = [p];
+    }
+    const actions = p.map((d) => ['reflect', d]);
+
+    chart.coordinate({ type: 'rect', actions });
+  }
+
+  return params;
+}
+
 /**
  * axis 配置
  * @param params
@@ -174,6 +194,7 @@ export function adaptor(params: Params<LineOptions>) {
     meta,
     adjust,
     theme,
+    coordinate,
     axis,
     legend,
     tooltip,

diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts
@@ -22,4 +22,7 @@ export interface LineOptions extends Options {
   readonly lineShape?: Required<LineGeometryOptions>['line']['shape'];
   /** 折线数据点：1、图形映射属性 2、状态样式 */
   readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
+
+  // 支持坐标系配置
+  readonly reflect?: 'x' | 'y' | ['x', 'y'];
 }