From 1054ca029923b8a3f7ed61793cefd5fd18a1786b Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Tue, 18 Oct 2022 18:27:21 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E8=A7=86=E5=9B=BE):=20=E7=8E=AB?= =?UTF-8?q?=E7=91=B0=E5=9B=BE=EF=BC=8C=E9=A5=BC=E5=9B=BE=EF=BC=8C=E7=8E=AF?= =?UTF-8?q?=E5=BD=A2=E5=9B=BE=EF=BC=8C=E7=8E=AB=E7=91=B0=E7=8E=AF=E5=BD=A2?= =?UTF-8?q?=E5=9B=BE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 优化默认样式，默认样式修改为：显示标签: 分类+占比，不显示图例，饼图和环形图可设置占比保留小数 https://www.tapd.cn/55578866/prong/stories/view/1155578866001009362 https://www.tapd.cn/55578866/prong/stories/view/1155578866001010169 --- frontend/babel.config.js | 5 ++- frontend/package.json | 1 + frontend/src/lang/en.js | 7 +++- frontend/src/lang/tw.js | 7 +++- frontend/src/lang/zh.js | 7 +++- frontend/src/views/chart/chart/chart.js | 3 +- .../views/chart/chart/common/common_antv.js | 36 ++++++++++++++++-- frontend/src/views/chart/chart/util.js | 8 +++- .../shape-attr/LabelSelectorAntV.vue | 38 +++++++++++++++++-- frontend/src/views/chart/group/Group.vue | 6 ++- frontend/src/views/chart/view/ChartEdit.vue | 15 +++++++- 11 files changed, 116 insertions(+), 17 deletions(-) diff --git a/frontend/babel.config.js b/frontend/babel.config.js index 119f81f9ee..f9a04b2454 100644 --- a/frontend/babel.config.js +++ b/frontend/babel.config.js @@ -2,5 +2,8 @@ module.exports = { presets: [ '@vue/app' ], - plugins: ['@babel/plugin-proposal-optional-chaining'] + plugins: [ + '@babel/plugin-proposal-optional-chaining', + '@babel/plugin-proposal-nullish-coalescing-operator' + ] } diff --git a/frontend/package.json b/frontend/package.json index e028ed0a97..36c385ebe5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -83,6 +83,7 @@ "devDependencies": { "@babel/core": "^7.4.0-0", "@babel/plugin-proposal-optional-chaining": "^7.18.6", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/register": "7.0.0", "@vue/cli-plugin-babel": "3.6.0", "@vue/cli-plugin-eslint": "^5.0.4", diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 6d88c7c4ea..4ef7292ff1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1424,7 +1424,12 @@ export default { aggregation: 'Aggregation', filter_between: 'Between', field_not_empty: 'Field can not be empty', - summary_not_empty: 'Summary can not be empty' + summary_not_empty: 'Summary can not be empty', + reserve_zero: '0', + reserve_one: '1', + reserve_two: '2', + proportion: 'Proportion', + label_content: 'Label Content' }, dataset: { parse_filed: 'Parse Field', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index e55d9b37fe..6922f34f1a 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1424,7 +1424,12 @@ export default { aggregation: '聚合方式', filter_between: '介於', field_not_empty: '字段不能為空', - summary_not_empty: '聚合方式不能為空' + summary_not_empty: '聚合方式不能為空', + reserve_zero: '取整', + reserve_one: '一位', + reserve_two: '两位', + proportion: '佔比', + label_content: '標籤展示' }, dataset: { parse_filed: '解析字段', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 98f7ae8299..e5394e61a1 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1423,7 +1423,12 @@ export default { aggregation: '聚合方式', filter_between: '介于', field_not_empty: '字段不能为空', - summary_not_empty: '聚合方式不能为空' + summary_not_empty: '聚合方式不能为空', + reserve_zero: '取整', + reserve_one: '一位', + reserve_two: '两位', + proportion: '占比', + label_content: '标签展示' }, dataset: { parse_filed: '解析字段', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 85e48f131c..a0eab96e4c 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -132,7 +132,8 @@ export const DEFAULT_LABEL = { decimalCount: 2, // 小数位数 thousandSeparator: true// 千分符 }, - reserveDecimalCount: 2 // 百分比堆叠柱状图保留小数位数 + reserveDecimalCount: 2, // 百分比堆叠柱状图,饼图，环形图保留小数位数 + labelContent: ['dimension', 'proportion'] // 饼图，环形图指标展示项 } export const DEFAULT_TOOLTIP = { show: true, diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 2281547631..71fefbedc0 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -1,6 +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' export function getPadding(chart) { if (chart.drill) { @@ -120,7 +121,7 @@ export function getLabel(chart) { if (customAttr.label) { const l = JSON.parse(JSON.stringify(customAttr.label)) if (l.show) { - if (chart.type === 'pie') { + if (equalsAny(chart.type, 'pie', 'pie-donut')) { label = { type: l.position, autoRotate: false @@ -130,6 +131,13 @@ export function getLabel(chart) { position: l.position, offsetY: -8 } + } else if (equalsAny(chart.type, 'pie-rose', 'pie-donut-rose')) { + label = { + autoRotate: true + } + if (l.position === 'inner') { + label.offset = -10 + } } else { label = { position: l.position @@ -195,10 +203,32 @@ export function getLabel(chart) { for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] if (f.name === param.category) { + let formatterCfg = formatterItem if (f.formatterCfg) { - res = valueFormatter(param.value, f.formatterCfg) + formatterCfg = f.formatterCfg + } + // 饼图和环形图格式优化 + if (equalsAny(chart.type, 'pie', 'pie-donut')) { + // 这边默认值取指标是为了兼容存量的视图 + const labelContent = l.labelContent ?? ['quota'] + const contentItems = [] + if (labelContent.includes('dimension')) { + contentItems.push(param.field) + } + if (labelContent.includes('quota')) { + contentItems.push(valueFormatter(param.value, formatterCfg)) + } + if (labelContent.includes('proportion')) { + const percentage = `${(Math.round(param.percent * 10000) / 100).toFixed(l.reserveDecimalCount)}%` + if (labelContent.length === 3) { + contentItems.push(`(${percentage})`) + } else { + contentItems.push(percentage) + } + } + res = contentItems.join(' ') } else { - res = valueFormatter(param.value, formatterItem) + res = valueFormatter(param.value, formatterCfg) } break } diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 466671ad35..2fbc508a8d 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -1083,7 +1083,9 @@ export const TYPE_CONFIGS = [ 'show', 'fontSize', 'color', - 'position-pie' + 'position-pie', + 'label-content', + 'reserve-decimal-count' ], 'tooltip-selector-ant-v': [ 'show', @@ -1141,7 +1143,9 @@ export const TYPE_CONFIGS = [ 'show', 'fontSize', 'color', - 'position-pie' + 'position-pie', + 'label-content', + 'reserve-decimal-count' ], 'tooltip-selector-ant-v': [ 'show', diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue index a59b80c5ef..b67e740662 100644 --- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue @@ -18,6 +18,25 @@ >{{ $t('chart.show') }}
+ + + {{ option.name }} + + @@ -292,9 +311,14 @@ export default { typeList: formatterType, unitList: unitList, reserveDecimalCountOptions: [ - { name: '取整', value: 0 }, - { name: '一位', value: 1 }, - { name: '两位', value: 2 } + { name: this.$t('chart.reserve_zero'), value: 0 }, + { name: this.$t('chart.reserve_one'), value: 1 }, + { name: this.$t('chart.reserve_two'), value: 2 } + ], + labelContentOptions: [ + { name: this.$t('chart.dimension'), value: 'dimension' }, + { name: this.$t('chart.quota'), value: 'quota' }, + { name: this.$t('chart.proportion'), value: 'proportion' } ] } }, @@ -332,6 +356,12 @@ export default { if (!this.labelForm.gaugeLabelFormatter) { this.labelForm.gaugeLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_LABEL.gaugeLabelFormatter)) } + if ((this.labelForm.reserveDecimalCount ?? '') === '') { + this.labelForm.reserveDecimalCount = 2 + } + if (!this.labelForm.labelContent) { + this.labelForm.labelContent = ['quota'] + } } } }, diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index f9ad1fe73d..ef7fda73be 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -1036,7 +1036,11 @@ export default { if (view.render === 'echarts') { attr.label.position = 'inside' } else { - attr.label.position = 'inner' + const customStyle = JSON.parse(view.customStyle) + customStyle.legend.show = false + view.customStyle = JSON.stringify(customStyle) + attr.label.show = true + attr.label.position = 'outer' } // 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7 if (type === 'pie-donut') { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 03e8d6613c..31f4f04227 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -3078,11 +3078,22 @@ export default { setChartDefaultOptions() { const type = this.view.type + const customAttr = this.view.customAttr + const customStyle = this.view.customStyle if (type.includes('pie')) { if (this.view.render === 'echarts') { - this.view.customAttr.label.position = 'inside' + customAttr.label.position = 'inside' } else { - this.view.customAttr.label.position = 'inner' + customStyle.legend.show = false + customAttr.label.show = true + customAttr.label.position = 'outer' + } + // 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7 + if (type === 'pie-donut') { + customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.7) + } + if (type === 'pie-donut-rose') { + customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.5) } } else if (type.includes('line')) { this.view.customAttr.label.position = 'top'