fix(bidirection-bar): 修复对称条形图 label 位置设置和默认配置 (#2921)

* fix(bidirection-bar): 修复对称条形图 label 位置设置和默认配置 * refactor: 代码可读性优化 * fix: 修复 ts 错误
antvis · Oct 19, 2021 · 7f0ecba · 7f0ecba
1 parent f096740
commit 7f0ecba
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 11 deletions.
diff --git a/examples/more-plots/bidirectional-bar/demo/label.ts b/examples/more-plots/bidirectional-bar/demo/label.ts
@@ -0,0 +1,37 @@
+import { BidirectionalBar } from '@antv/g2plot';
+
+export const data = [
+  { country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3 },
+  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 },
+  { country: '南非', '2016年耕地总面积': 18.4, '2016年转基因种植面积': 8.3 },
+  { country: '巴基斯坦', '2016年耕地总面积': 34.4, '2016年转基因种植面积': 13.8 },
+  { country: '阿根廷', '2016年耕地总面积': 44.4, '2016年转基因种植面积': 19.5 },
+  { country: '巴西', '2016年耕地总面积': 24.4, '2016年转基因种植面积': 18.8 },
+  { country: '加拿大', '2016年耕地总面积': 54.4, '2016年转基因种植面积': 24.7 },
+  { country: '中国', '2016年耕地总面积': 104.4, '2016年转基因种植面积': 5.3 },
+  { country: '美国', '2016年耕地总面积': 165.2, '2016年转基因种植面积': 72.9 },
+];
+
+const BidirectionalBarPlot = new BidirectionalBar('container', {
+  data,
+  xField: 'country',
+  xAxis: {
+    position: 'bottom',
+  },
+  appendPadding: [0, 30],
+  interactions: [{ type: 'active-region' }],
+  yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+  tooltip: {
+    shared: true,
+    showMarkers: false,
+  },
+  // 开启 label 展示
+  label: {
+    // 默认居中, 'middle'
+    position: 'right',
+    // 默认为: 2
+    // offset: 4,
+  },
+});
+
+BidirectionalBarPlot.render();
diff --git a/examples/more-plots/bidirectional-bar/demo/meta.json b/examples/more-plots/bidirectional-bar/demo/meta.json
@@ -7,18 +7,34 @@
     {
       "filename": "basic.ts",
       "title": {
-        "zh": "基础水平方对称条形图",
-        "en": "Basic bullet plot"
+        "zh": "基础对称条形图",
+        "en": "BidirectionalBar plot"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*9wdPQIJyXdoAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "layout.ts",
       "title": {
-        "zh": "基础垂直方向对称条形图",
-        "en": "Basic bullet plot"
+        "zh": "对称条形图（垂直方向）",
+        "en": "Vertical BidirectionalBar plot"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*dpEiSZht_1AAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "label.ts",
+      "title": {
+        "zh": "对称条形图 label 设置",
+        "en": "Label of BidirectionalBar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/4A7SJPC00p/3b637385-c121-429f-9c13-82b4662c1c2e.png"
+    },
+    {
+      "filename": "vertical-label.ts",
+      "title": {
+        "zh": "对称条形图（垂直方向） label 设置",
+        "en": "Label of Vertical BidirectionalBar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/w9EHshX3Q1/524ae45f-dc52-48ca-bff8-efa97dcf071e.png"
     }
   ]
 }

diff --git a/examples/more-plots/bidirectional-bar/demo/vertical-label.ts b/examples/more-plots/bidirectional-bar/demo/vertical-label.ts
@@ -0,0 +1,34 @@
+import { BidirectionalBar } from '@antv/g2plot';
+
+export const data = [
+  { country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3 },
+  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 },
+  { country: '南非', '2016年耕地总面积': 18.4, '2016年转基因种植面积': 8.3 },
+  { country: '巴基斯坦', '2016年耕地总面积': 34.4, '2016年转基因种植面积': 13.8 },
+  { country: '阿根廷', '2016年耕地总面积': 44.4, '2016年转基因种植面积': 19.5 },
+  { country: '巴西', '2016年耕地总面积': 24.4, '2016年转基因种植面积': 18.8 },
+  { country: '加拿大', '2016年耕地总面积': 54.4, '2016年转基因种植面积': 24.7 },
+  { country: '中国', '2016年耕地总面积': 104.4, '2016年转基因种植面积': 5.3 },
+  { country: '美国', '2016年耕地总面积': 165.2, '2016年转基因种植面积': 72.9 },
+];
+
+const BidirectionalBarPlot = new BidirectionalBar('container', {
+  data,
+  layout: 'vertical',
+  xField: 'country',
+  yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+  tooltip: {
+    shared: true,
+    showMarkers: false,
+  },
+  appendPadding: [20, 0],
+  // 开启 label 展示
+  label: {
+    // 默认居中, 'middle'
+    position: 'top',
+    // 默认为: 2
+    // offset: 4,
+  },
+});
+
+BidirectionalBarPlot.render();
diff --git a/src/plots/bidirectional-bar/adaptor.ts b/src/plots/bidirectional-bar/adaptor.ts
@@ -76,10 +76,7 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
       },
       id: SECOND_AXES_VIEW,
     });
-    secondView
-      .coordinate()
-      .reflect('y')
-      .rotate(Math.PI * 0); // 旋转
+    secondView.coordinate().reflect('y');
 
     firstView.data(firstViewData);
     secondView.data(secondViewData);
@@ -277,12 +274,12 @@ export function animation(params: Params<BidirectionalBarOptions>): Params<Bidir
 }
 
 /**
- * label 配置
+ * label 配置 (1. 设置 offset 偏移量默认值 2. leftView 偏移量需要 *= -1)
  * @param params
  */
 function label(params: Params<BidirectionalBarOptions>): Params<BidirectionalBarOptions> {
   const { chart, options } = params;
-  const { label, yField } = options;
+  const { label, yField, layout } = options;
 
   const firstView = findViewById(chart, FIRST_AXES_VIEW);
   const secondView = findViewById(chart, SECOND_AXES_VIEW);
@@ -294,10 +291,41 @@ function label(params: Params<BidirectionalBarOptions>): Params<BidirectionalBar
     rightGeometry.label(false);
   } else {
     const { callback, ...cfg } = label;
+    /** ---- 设置默认配置 ---- */
+    // 默认居中
+    if (!cfg.position) {
+      cfg.position = 'middle';
+    }
+    if (cfg.offset === undefined) {
+      cfg.offset = 2;
+    }
+
+    /** ---- leftView label 设置 ---- */
+    const leftLabelCfg = { ...cfg };
+    if (isHorizontal(layout)) {
+      // 设置 textAlign 默认值
+      const textAlign = leftLabelCfg.style?.textAlign || (cfg.position === 'middle' ? 'center' : 'left');
+      cfg.style = deepAssign({}, cfg.style, { textAlign });
+      const textAlignMap = { left: 'right', right: 'left', center: 'center' };
+      leftLabelCfg.style = deepAssign({}, leftLabelCfg.style, { textAlign: textAlignMap[textAlign] });
+    } else {
+      const positionMap = { top: 'bottom', bottom: 'top', middle: 'middle' };
+      if (typeof cfg.position === 'string') {
+        cfg.position = positionMap[cfg.position];
+      } else if (typeof cfg.position === 'function') {
+        cfg.position = (...args) => positionMap[(cfg.position as Function).apply(this, args)];
+      }
+      // 设置 textBaseline 默认值
+      const textBaseline = leftLabelCfg.style?.textBaseline || 'bottom';
+      leftLabelCfg.style = deepAssign({}, leftLabelCfg.style, { textBaseline });
+      const textBaselineMap = { top: 'bottom', bottom: 'top', middle: 'middle' };
+      cfg.style = deepAssign({}, cfg.style, { textBaseline: textBaselineMap[textBaseline] });
+    }
+
     leftGeometry.label({
       fields: [yField[0]],
       callback,
-      cfg: transformLabel(cfg),
+      cfg: transformLabel(leftLabelCfg),
     });
     rightGeometry.label({
       fields: [yField[1]],

diff --git a/src/plots/bidirectional-bar/index.ts b/src/plots/bidirectional-bar/index.ts
@@ -20,6 +20,9 @@ export class BidirectionalBar extends Plot<BidirectionalBarOptions> {
     });
   }
 
+  /** 对称条形图分类字段 */
+  static SERIES_FIELD_KEY = SERIES_FIELD_KEY;
+
   /** 图表类型 */
   public type: string = 'bidirectional-bar';