From e5b59e409a917f86f32f8097d205962de91222c8 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 20 Oct 2022 18:12:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-=E6=B0=B4=E6=B3=A2?= =?UTF-8?q?=E5=9B=BE):=20=E6=B0=B4=E6=B3=A2=E5=9B=BE=E7=9B=AE=E6=A0=87?= =?UTF-8?q?=E5=80=BC=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 水波图目标值支持动态值 https://www.tapd.cn/55578866/prong/stories/view/1155578866001009735 --- .../service/chart/ChartViewService.java | 75 ++++--- frontend/src/views/chart/chart/chart.js | 9 +- .../views/chart/chart/common/common_antv.js | 3 + .../views/chart/chart/common/common_table.js | 14 +- .../src/views/chart/chart/liquid/liquid.js | 12 +- .../shape-attr/SizeSelectorAntV.vue | 199 +++++++++++++++--- frontend/src/views/chart/group/Group.vue | 1 - frontend/src/views/chart/view/ChartEdit.vue | 14 +- frontend/src/views/panel/edit/index.vue | 2 +- 9 files changed, 243 insertions(+), 86 deletions(-) diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java index f5a8c0945d..edaea269ff 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java @@ -580,7 +580,7 @@ public class ChartViewService { List yAxisExt = gson.fromJson(view.getYAxisExt(), tokenType); yAxis.addAll(yAxisExt); } - if (StringUtils.equalsIgnoreCase(view.getRender(), "antv") && StringUtils.equalsIgnoreCase(view.getType(), "gauge")) { + if (StringUtils.equalsIgnoreCase(view.getRender(), "antv") && StringUtils.equalsAnyIgnoreCase(view.getType(), "gauge","liquid")) { List sizeField = getSizeField(view); yAxis.addAll(sizeField); } @@ -1656,49 +1656,46 @@ public class ChartViewService { JSONObject jsonObject = JSONObject.parseObject(customAttr); JSONObject size = jsonObject.getJSONObject("size"); - String gaugeMinType = size.getString("gaugeMinType"); - if (StringUtils.equalsIgnoreCase("dynamic", gaugeMinType)) { - JSONObject gaugeMinField = size.getJSONObject("gaugeMinField"); - String id = gaugeMinField.getString("id"); - String summary = gaugeMinField.getString("summary"); - DatasetTableField datasetTableField = dataSetTableFieldsService.get(id); - if (ObjectUtils.isNotEmpty(datasetTableField)) { - if (datasetTableField.getDeType() == 0 || datasetTableField.getDeType() == 1 || datasetTableField.getDeType() == 5) { - if (!StringUtils.containsIgnoreCase(summary, "count")) { - DEException.throwException(Translator.get("i18n_gauge_field_change")); - } - } - ChartViewFieldDTO dto = new ChartViewFieldDTO(); - BeanUtils.copyBean(dto, datasetTableField); - dto.setSummary(summary); - list.add(dto); - } else { - DEException.throwException(Translator.get("i18n_gauge_field_delete")); - } + ChartViewFieldDTO gaugeMinViewField = getDynamicField(size, "gaugeMinType", "gaugeMinField"); + if (gaugeMinViewField != null) { + list.add(gaugeMinViewField); } - String gaugeMaxType = size.getString("gaugeMaxType"); - if (StringUtils.equalsIgnoreCase("dynamic", gaugeMaxType)) { - JSONObject gaugeMaxField = size.getJSONObject("gaugeMaxField"); - String id = gaugeMaxField.getString("id"); - String summary = gaugeMaxField.getString("summary"); - DatasetTableField datasetTableField = dataSetTableFieldsService.get(id); - if (ObjectUtils.isNotEmpty(datasetTableField)) { - if (datasetTableField.getDeType() == 0 || datasetTableField.getDeType() == 1 || datasetTableField.getDeType() == 5) { - if (!StringUtils.containsIgnoreCase(summary, "count")) { - DEException.throwException(Translator.get("i18n_gauge_field_change")); - } - } - ChartViewFieldDTO dto = new ChartViewFieldDTO(); - BeanUtils.copyBean(dto, datasetTableField); - dto.setSummary(summary); - list.add(dto); - } else { - DEException.throwException(Translator.get("i18n_gauge_field_delete")); - } + ChartViewFieldDTO gaugeMaxViewField = getDynamicField(size, "gaugeMaxType", "gaugeMaxField"); + if (gaugeMaxViewField != null) { + list.add(gaugeMaxViewField); } + ChartViewFieldDTO liquidMaxViewField = getDynamicField(size, "liquidMaxType", "liquidMaxField"); + if (liquidMaxViewField != null) { + list.add(liquidMaxViewField); + } + return list; } + private ChartViewFieldDTO getDynamicField(JSONObject sizeObj, String type, String field) { + String maxType = sizeObj.getString(type); + if (StringUtils.equalsIgnoreCase("dynamic", maxType)) { + JSONObject maxField = sizeObj.getJSONObject(field); + String id = maxField.getString("id"); + String summary = maxField.getString("summary"); + DatasetTableField datasetTableField = dataSetTableFieldsService.get(id); + if (ObjectUtils.isNotEmpty(datasetTableField)) { + if (datasetTableField.getDeType() == 0 || datasetTableField.getDeType() == 1 || datasetTableField.getDeType() == 5) { + if (!StringUtils.containsIgnoreCase(summary, "count")) { + DEException.throwException(Translator.get("i18n_gauge_field_change")); + } + } + ChartViewFieldDTO dto = new ChartViewFieldDTO(); + BeanUtils.copyBean(dto, datasetTableField); + dto.setSummary(summary); + return dto; + } else { + DEException.throwException(Translator.get("i18n_gauge_field_delete")); + } + } + return null; + } + private List getDynamicAssistFields(ChartViewDTO view) { String senior = view.getSenior(); JSONObject jsonObject = JSONObject.parseObject(senior); diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index a0eab96e4c..c79e0ae12d 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -103,6 +103,11 @@ export const DEFAULT_SIZE = { treemapWidth: 80, treemapHeight: 80, liquidMax: 100, + liquidMaxType: 'fix', // fix or dynamic + liquidMaxField: { + id: '', + summary: '' + }, liquidSize: 80, liquidOutlineBorder: 4, liquidOutlineDistance: 8, @@ -132,8 +137,8 @@ export const DEFAULT_LABEL = { decimalCount: 2, // 小数位数 thousandSeparator: true// 千分符 }, - reserveDecimalCount: 2, // 百分比堆叠柱状图,饼图，环形图保留小数位数 - labelContent: ['dimension', 'proportion'] // 饼图，环形图指标展示项 + 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 71fefbedc0..3f6093278c 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -126,6 +126,9 @@ export function getLabel(chart) { type: l.position, autoRotate: false } + if (l.position === 'outer') { + label.type = 'spider' + } } else if (chart.type.includes('line') || chart.type.includes('area')) { label = { position: l.position, diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js index 42f93da6a5..93cb2f0063 100644 --- a/frontend/src/views/chart/chart/common/common_table.js +++ b/frontend/src/views/chart/chart/common/common_table.js @@ -21,7 +21,7 @@ export function getCustomTheme(chart) { backgroundColor: headerColor, horizontalBorderColor: borderColor, verticalBorderColor: borderColor, - verticalBorderWidth: 0 // 左上角顶点单元格左右边缘宽度要设置为 0，不然序号列的数字部分会比表头多几个像素，视觉上会突出去 + verticalBorderWidth: 0 }, text: { fill: DEFAULT_COLOR_CASE.tableHeaderFontColor, @@ -130,9 +130,9 @@ export function getCustomTheme(chart) { theme.rowCell.cell.backgroundColor = i_c // 这个参数其实只对开启序号列的行头生效 theme.rowCell.cell.horizontalBorderColor = i_c theme.rowCell.cell.verticalBorderColor = i_c - theme.rowCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor - theme.rowCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor - theme.rowCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor + theme.rowCell.bolderText.fill = c.tableFontColor + theme.rowCell.text.fill = c.tableFontColor + theme.rowCell.measureText.fill = c.tableFontColor theme.colCell.cell.backgroundColor = h_c theme.colCell.cell.horizontalBorderColor = b_c @@ -162,11 +162,11 @@ export function getCustomTheme(chart) { theme.cornerCell.measureText.textAlign = h_a // 序号列的数字单元格内容样式使用指标的内容样式而不是表头的内容样式 - theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize) + theme.rowCell.bolderText.fontSize = parseInt(s.tableItemFontSize) theme.rowCell.bolderText.textAlign = i_a - theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize) + theme.rowCell.text.fontSize = parseInt(s.tableItemFontSize) theme.rowCell.text.textAlign = i_a - theme.rowCell.measureText.fontSize = parseInt(s.tableTitleFontSize) + theme.rowCell.measureText.fontSize = parseInt(s.tableItemFontSize) theme.rowCell.measureText.textAlign = i_a theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize) diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js index 2e228ca0f1..09b9dfe645 100644 --- a/frontend/src/views/chart/chart/liquid/liquid.js +++ b/frontend/src/views/chart/chart/liquid/liquid.js @@ -9,10 +9,8 @@ export function baseLiquid(plot, container, chart) { let value = 0 const colors = [] let max, radius, bgColor, shape, labelContent - if (chart.data) { - if (chart.data.series.length > 0) { - value = chart.data.series[0].data[0] - } + if (chart.data?.series.length > 0) { + value = chart.data.series[0].data[0] } let customAttr = {} if (chart.customAttr) { @@ -27,7 +25,11 @@ export function baseLiquid(plot, container, chart) { // size if (customAttr.size) { const size = JSON.parse(JSON.stringify(customAttr.size)) - max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax + if (size.liquidMaxType === 'dynamic') { + max = chart.data?.series[chart.data?.series.length - 1]?.data[0] + } else { + max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax + } radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100) shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape } diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index 23093b7bc8..7001b74d50 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -592,37 +592,37 @@ @change="changeQuotaField('min')" > + + {{ $t('chart.fix') }} + {{ $t('chart.dynamic') }} + + + + + + + + + + + + + {{ item.name }} + + + + + + + + + + + + + + { // 视图为编辑状态才进行转换 - if (this.editStatue) { + if (this.editStatus) { this.convertChart(this.chart) this.convertChart(this.view) } @@ -3088,13 +3086,15 @@ export default { 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) } + if (equalsAny(type, 'pie', 'pie-rose')) { + customAttr.size.pieInnerRadius = 0 + } } else if (type.includes('line')) { this.view.customAttr.label.position = 'top' } else if (type.includes('treemap')) { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index d278aa21da..dcb854ccb8 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -272,7 +272,7 @@