From 5cfe6db94c1449810a44660b299dba8e7e98e5c5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 10 六月 2021 14:43:39 +0800 Subject: [PATCH] 2021-06-10 --- src/menu/components/chart/antv-bar/index.jsx | 144 +++++++++++++++++++++++++++++++++++++----------- 1 files changed, 111 insertions(+), 33 deletions(-) diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx index 547d9f4..60156f0 100644 --- a/src/menu/components/chart/antv-bar/index.jsx +++ b/src/menu/components/chart/antv-bar/index.jsx @@ -333,15 +333,20 @@ } else { _chart.color('key') } - if (plot.label === 'true') { - _chart.label('value', (value) => { + if (plot.label !== 'false') { + _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' + } + let _color = color + + if (plot.labelColor === 'custom' && colors.has(key)) { + _color = colors.get(key) } return { content: value, style: { - fill: color + fill: _color } } }) @@ -540,6 +545,27 @@ chart.scale({ nice: true }) + + let lablecfg = { + position: 'top', + offset: 2, + style: { + fill: '#fff' + } + } + + if (plot.label === 'top') { + lablecfg.offset = -5 + lablecfg.style.textBaseline = 'top' + } else if (plot.label === 'middle') { + lablecfg.position = 'middle' + lablecfg.offset = 0 + } else if (plot.label === 'bottom') { + lablecfg.position = 'bottom' + lablecfg.offset = 0 + } else if (plot.label === 'true') { + lablecfg.style.fill = color + } if (Bar_axis.length) { const view1 = chart.createView({ @@ -609,16 +635,18 @@ } else { _chart.color('key') } - if (plot.label === 'true') { - _chart.label('value', (value) => { + if (plot.label !== 'false') { + _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' } + + if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) { + lablecfg.style.fill = colors.get(key) + } return { content: value, - style: { - fill: color - } + ...lablecfg } }) } @@ -658,16 +686,19 @@ } else { _chart.color('key') } - if (plot.label === 'true') { - _chart.label('value', (value) => { + if (plot.label !== 'false') { + _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' } + + if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) { + lablecfg.style.fill = colors.get(key) + } + return { content: value, - style: { - fill: color - } + ...lablecfg } }) } @@ -720,16 +751,18 @@ if (plot.barSize) { _chart.size(plot.barSize || 35) } - if (item.label === 'true') { + if (item.label !== 'false') { _chart.label(item.name, (value) => { if (plot.show === 'percent') { value = value + '%' } + + if (plot.label === 'true' && plot.labelColor === 'custom') { + lablecfg.style.fill = item.color + } return { content: value, - style: { - fill: color - } + ...lablecfg } }) } @@ -761,15 +794,20 @@ } }) - if (item.label === 'true') { + if (item.label !== 'false') { _chart.label(item.name, (value) => { if (plot.show === 'percent') { value = value + '%' } + let _color = color + + if (plot.labelColor === 'custom') { + _color = item.color + } return { content: value, style: { - fill: color + fill: _color } } }) @@ -876,10 +914,6 @@ }) } - if (plot.transpose === 'true') { - chart.coordinate().transpose() - } - if (plot.coordinate === 'polar') { chart.coordinate('polar', { innerRadius: 0.1, @@ -889,6 +923,45 @@ let colors = new Map() let colorIndex = 0 + let lablecfg = { + position: 'top', + offset: 2, + style: { + fill: '#fff' + } + } + + if (plot.label === 'top') { + lablecfg.offset = -5 + lablecfg.style.textBaseline = 'top' + } else if (plot.label === 'middle') { + lablecfg.position = 'middle' + lablecfg.offset = 0 + } else if (plot.label === 'bottom') { + lablecfg.position = 'bottom' + lablecfg.offset = 0 + } else if (plot.label === 'true') { + lablecfg.style.fill = color + } + + if (plot.transpose === 'true') { + chart.coordinate().transpose() + if (plot.label === 'top') { + delete lablecfg.style.textBaseline + lablecfg.position = 'right' + lablecfg.offset = -3 + lablecfg.style.textAlign = 'end' + } else if (plot.label === 'middle') { + lablecfg.position = 'middle' + lablecfg.offset = 0 + } else if (plot.label === 'bottom') { + lablecfg.position = 'left' + lablecfg.offset = 2 + } else if (plot.label === 'true') { + lablecfg.position = 'right' + lablecfg.offset = 2 + } + } if (plot.colors && plot.colors.length > 0) { if (plot.ramp === 'true') { @@ -940,16 +1013,19 @@ } else { _chart.color('key') } - if (plot.label === 'true') { - _chart.label('value', (value) => { + if (plot.label !== 'false') { + _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' } + + if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) { + lablecfg.style.fill = colors.get(key) + } + return { content: value, - style: { - fill: color - } + ...lablecfg } }) } @@ -998,16 +1074,18 @@ } else { _chart.color('key') } - if (plot.label === 'true') { - _chart.label('value', (value) => { + if (plot.label !== 'false') { + _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' } + + if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) { + lablecfg.style.fill = colors.get(key) + } return { content: value, - style: { - fill: color - } + ...lablecfg } }) } -- Gitblit v1.8.0