From 7f0ecba7da1ab2b27d2eb6ba6489d43efad4bb61 Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Tue, 19 Oct 2021 22:01:07 +0800 Subject: [PATCH] =?UTF-8?q?fix(bidirection-bar):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=AF=B9=E7=A7=B0=E6=9D=A1=E5=BD=A2=E5=9B=BE=20label=20?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=AE=BE=E7=BD=AE=E5=92=8C=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20(#2921)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(bidirection-bar): 修复对称条形图 label 位置设置和默认配置 * refactor: 代码可读性优化 * fix: 修复 ts 错误 --- .../bidirectional-bar/demo/label.ts | 37 ++++++++++++++++ .../bidirectional-bar/demo/meta.json | 24 +++++++++-- .../bidirectional-bar/demo/vertical-label.ts | 34 +++++++++++++++ src/plots/bidirectional-bar/adaptor.ts | 42 +++++++++++++++---- src/plots/bidirectional-bar/index.ts | 3 ++ 5 files changed, 129 insertions(+), 11 deletions(-) create mode 100644 examples/more-plots/bidirectional-bar/demo/label.ts create mode 100644 examples/more-plots/bidirectional-bar/demo/vertical-label.ts diff --git a/examples/more-plots/bidirectional-bar/demo/label.ts b/examples/more-plots/bidirectional-bar/demo/label.ts new file mode 100644 index 0000000000..128ca56018 --- /dev/null +++ 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 index bb93b37b4e..9bcb212115 100644 --- 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 new file mode 100644 index 0000000000..e21292a3a5 --- /dev/null +++ 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 index ae4152718b..54d2cde9c0 100644 --- a/src/plots/bidirectional-bar/adaptor.ts +++ b/src/plots/bidirectional-bar/adaptor.ts @@ -76,10 +76,7 @@ function geometry(params: Params): Params): Params): Params { 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): Params 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 index b0409ff8ca..59180aa810 100644 --- a/src/plots/bidirectional-bar/index.ts +++ b/src/plots/bidirectional-bar/index.ts @@ -20,6 +20,9 @@ export class BidirectionalBar extends Plot { }); } + /** 对称条形图分类字段 */ + static SERIES_FIELD_KEY = SERIES_FIELD_KEY; + /** 图表类型 */ public type: string = 'bidirectional-bar';