From a40a9b07590c1088e9ada513ead02fd58c2aec76 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 24 Nov 2022 17:11:05 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=A8=AA=E5=90=91=E7=99=BE=E5=88=86=E6=AF=94=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 视图类型增加横向百分比柱状图 https://www.tapd.cn/55578866/prong/stories/view/1155578866001004512 --- .../svg/percentage-bar-stack-horizontal.svg | 1 + frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 1 + frontend/src/lang/zh.js | 1 + .../src/views/chart/chart/bar/bar_antv.js | 1 + .../views/chart/chart/common/common_antv.js | 30 +++---- frontend/src/views/chart/chart/util.js | 81 +++++++++++++++++++ .../chart/components/ChartComponentG2.vue | 5 +- 8 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 frontend/src/icons/svg/percentage-bar-stack-horizontal.svg diff --git a/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg b/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg new file mode 100644 index 0000000000..41e752aabf --- /dev/null +++ b/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 8be484db7e..23da51d3ac 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1135,6 +1135,7 @@ export default { chart_percentage_bar_stack: 'Percentage Stack Bar', chart_bar_horizontal: 'Horizontal Bar', chart_bar_stack_horizontal: 'Stack Horizontal Bar', + chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar', chart_line: 'Base Line', chart_line_stack: 'Stack Line', chart_pie: 'Pie', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 36d4a2d7b9..3e2eb08d24 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1135,6 +1135,7 @@ export default { chart_percentage_bar_stack: '百分比柱狀圖', chart_bar_horizontal: '橫嚮柱狀圖', chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖', + chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖', chart_line: '基礎摺線圖', chart_line_stack: '堆疊摺線圖', chart_pie: '餅圖', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 61be12d916..c77fcf9321 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1134,6 +1134,7 @@ export default { chart_percentage_bar_stack: '百分比柱状图', chart_bar_horizontal: '横向柱状图', chart_bar_stack_horizontal: '横向堆叠柱状图', + chart_percentage_bar_stack_horizontal: '横向百分比柱状图', chart_line: '基础折线图', chart_line_stack: '堆叠折线图', chart_pie: '饼图', diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index b799ec2517..191c9e3259 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/frontend/src/views/chart/chart/bar/bar_antv.js @@ -202,6 +202,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt } else { delete options.isStack } + options.isPercent = chart.type.includes('percentage') // custom color options.color = antVCustomColor(chart) if (customAttr.color.gradient) { diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 236d7da1b0..567d00abc3 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -1,7 +1,7 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart' -import { equalsAny } from '@/utils/StringUtils' +import { equalsAny, includesAny } from '@/utils/StringUtils' export function getPadding(chart) { if (chart.drill) { @@ -166,11 +166,8 @@ export function getLabel(chart) { extStack = JSON.parse(JSON.stringify(chart.extStack)) } - if (chart.type === 'bar-stack' || - chart.type === 'line-stack' || - chart.type === 'bar-stack-horizontal' || - chart.type === 'percentage-bar-stack' - ) { + if (equalsAny(chart.type, 'bar-stack', 'line-stack', + 'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) { let f if (extStack && extStack.length > 0) { f = yAxis[0] @@ -189,7 +186,10 @@ export function getLabel(chart) { f.formatterCfg = formatterItem } // 百分比堆叠柱状图保留小数处理 - if (chart.type === 'percentage-bar-stack') { + if (chart.type.includes('percentage')) { + if (!param.value) { + return + } f.formatterCfg.type = 'percent' f.formatterCfg.decimalCount = l.reserveDecimalCount f.formatterCfg.thousandSeparator = false @@ -278,10 +278,8 @@ export function getTooltip(chart) { } let obj - if (chart.type === 'bar-stack' || - chart.type === 'line-stack' || - chart.type === 'bar-stack-horizontal' || - chart.type === 'percentage-bar-stack') { + if (equalsAny(chart.type, 'bar-stack', 'line-stack', + 'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) { let f if (extStack && extStack.length > 0) { obj = { name: param.category, value: param.value } @@ -301,7 +299,11 @@ export function getTooltip(chart) { if (!f.formatterCfg) { f.formatterCfg = formatterItem } - if (chart.type === 'percentage-bar-stack') { + if (chart.type.includes('percentage')) { + if (!param.value) { + obj.value = 0 + return obj + } // 保留小数位数和标签保持一致，这边拿一下标签的配置 const l = JSON.parse(JSON.stringify(customAttr.label)) f.formatterCfg.type = 'percent' @@ -329,7 +331,7 @@ export function getTooltip(chart) { res = valueFormatter(param.value, formatterItem) } } - } else if (chart.type.includes('pie') || chart.type.includes('funnel')) { + } else if (includesAny(chart.type, 'pie', 'funnel')) { obj = { name: param.field, value: param.value } for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] @@ -339,7 +341,7 @@ export function getTooltip(chart) { res = valueFormatter(param.value, formatterItem) } } - } else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) { + } else if (includesAny(chart.type, 'bar', 'line', 'scatter', 'radar', 'area') && !chart.type.includes('group')) { obj = { name: param.category, value: param.value } for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 00084eace9..b7d01cc8ee 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -1149,6 +1149,87 @@ export const TYPE_CONFIGS = [ ] } }, + { + render: 'antv', + category: 'chart.chart_type_compare', + value: 'percentage-bar-stack-horizontal', + title: 'chart.chart_percentage_bar_stack_horizontal', + icon: 'percentage-bar-stack-horizontal', + properties: [ + 'color-selector', + 'size-selector-ant-v', + 'label-selector-ant-v', + 'tooltip-selector-ant-v', + 'x-axis-selector-ant-v', + 'y-axis-selector-ant-v', + 'title-selector-ant-v', + 'legend-selector-ant-v' + ], + propertyInner: { + 'color-selector': [ + 'value', + 'colorPanel', + 'customColor', + 'gradient', + 'alpha' + ], + 'size-selector-ant-v': [ + 'barDefault', + 'barGap' + ], + 'label-selector-ant-v': [ + 'show', + 'fontSize', + 'color', + 'position-h', + 'reserveDecimalCount' + ], + 'tooltip-selector-ant-v': [ + 'show', + 'textStyle' + ], + 'x-axis-selector-ant-v': [ + 'show', + 'position', + 'name', + 'nameTextStyle', + 'axisValue', + 'splitLine', + 'axisForm', + 'axisLabel' + ], + 'y-axis-selector-ant-v': [ + 'show', + 'position', + 'name', + 'nameTextStyle', + 'splitLine', + 'axisForm', + 'axisLabel' + ], + 'title-selector-ant-v': [ + 'show', + 'title', + 'fontSize', + 'color', + 'hPosition', + 'isItalic', + 'isBolder', + 'remarkShow', + 'fontFamily', + 'letterSpace', + 'fontShadow' + ], + 'legend-selector-ant-v': [ + 'show', + 'icon', + 'orient', + 'textStyle', + 'hPosition', + 'vPosition' + ] + } + }, { render: 'antv', category: 'chart.chart_type_distribute', diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index fe5998d8be..8a0c54f0f0 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/frontend/src/views/chart/components/ChartComponentG2.vue @@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark' import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart' import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv' import ChartTitleUpdate from './ChartTitleUpdate.vue' +import { equalsAny } from '@/utils/StringUtils' export default { name: 'ChartComponentG2', @@ -233,13 +234,13 @@ export default { this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false) } else if (chart.type === 'bar-group') { this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false) - } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') { + } else if (equalsAny(chart.type, 'bar-stack', 'percentage-bar-stack')) { this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true) } else if (chart.type === 'bar-group-stack') { this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true) } else if (chart.type === 'bar-horizontal') { this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false) - } else if (chart.type === 'bar-stack-horizontal') { + } else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) { this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true) } else if (chart.type === 'line') { this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)