diff --git a/frontend/src/icons/svg/pie-donut-rose.svg b/frontend/src/icons/svg/pie-donut-rose.svg new file mode 100644 index 0000000000..04f74dd263 --- /dev/null +++ b/frontend/src/icons/svg/pie-donut-rose.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/pie-donut.svg b/frontend/src/icons/svg/pie-donut.svg new file mode 100644 index 0000000000..a63244dae4 --- /dev/null +++ b/frontend/src/icons/svg/pie-donut.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/pie-rose.svg b/frontend/src/icons/svg/pie-rose.svg index 52e4ec778d..2820390ef6 100644 --- a/frontend/src/icons/svg/pie-rose.svg +++ b/frontend/src/icons/svg/pie-rose.svg @@ -1 +1 @@ - + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 6c7be35a1b..6dff994628 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1124,7 +1124,9 @@ export default { chart_line: 'Base Line', chart_line_stack: 'Stack Line', chart_pie: 'Pie', + chart_pie_donut: 'Donut Pie', chart_pie_rose: 'Rose Pie', + chart_pie_donut_rose: 'Rose Donut Pie', chart_funnel: 'Funnel', chart_radar: 'Radar', chart_gauge: 'Gauge', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 9851d0d087..f0b75217b6 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1124,7 +1124,9 @@ export default { chart_line: '基礎摺線圖', chart_line_stack: '堆疊摺線圖', chart_pie: '餅圖', + chart_pie_donut: '環形圖', chart_pie_rose: '南丁格爾玫瑰圖', + chart_pie_donut_rose: '南丁格爾玫瑰環形圖', chart_funnel: '漏鬥圖', chart_radar: '雷達圖', chart_gauge: '儀表盤', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index a5cdb8730d..f2f514e144 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1123,7 +1123,9 @@ export default { chart_line: '基础折线图', chart_line_stack: '堆叠折线图', chart_pie: '饼图', + chart_pie_donut: '环形图', chart_pie_rose: '南丁格尔玫瑰图', + chart_pie_donut_rose: '南丁格尔玫瑰环形图', chart_funnel: '漏斗图', chart_radar: '雷达图', chart_gauge: '仪表盘', diff --git a/frontend/src/utils/StringUtils.js b/frontend/src/utils/StringUtils.js index 6886395dc5..36d1011eeb 100644 --- a/frontend/src/utils/StringUtils.js +++ b/frontend/src/utils/StringUtils.js @@ -16,3 +16,12 @@ export function randomRange(min, max) { } return returnStr } + +export function equalsAny(target,...sources) { + for (let i = 0; i < sources.length; i++) { + if (target === sources[i]){ + return true + } + } + return false +} diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 2866578171..06aa6c2c29 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -1066,6 +1066,63 @@ export const TYPE_CONFIGS = [ 'title-selector-ant-v', 'legend-selector-ant-v' ], + propertyInner: { + 'color-selector': [ + 'value', + 'colorPanel', + 'customColor', + 'alpha' + ], + 'size-selector-ant-v': [ + 'pieOuterRadius' + ], + 'label-selector-ant-v': [ + 'show', + 'fontSize', + 'color', + 'position-pie' + ], + 'tooltip-selector-ant-v': [ + 'show', + 'textStyle' + ], + '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', + value: 'pie-donut', + title: 'chart.chart_pie_donut', + icon: 'pie-donut', + properties: [ + 'color-selector', + 'size-selector-ant-v', + 'label-selector-ant-v', + 'tooltip-selector-ant-v', + 'title-selector-ant-v', + 'legend-selector-ant-v' + ], propertyInner: { 'color-selector': [ 'value', @@ -1124,6 +1181,63 @@ export const TYPE_CONFIGS = [ 'title-selector-ant-v', 'legend-selector-ant-v' ], + propertyInner: { + 'color-selector': [ + 'value', + 'colorPanel', + 'customColor', + 'alpha' + ], + 'size-selector-ant-v': [ + 'pieOuterRadius' + ], + 'label-selector-ant-v': [ + 'show', + 'fontSize', + 'color', + 'position-pie' + ], + 'tooltip-selector-ant-v': [ + 'show', + 'textStyle' + ], + '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', + value: 'pie-donut-rose', + title: 'chart.chart_pie_donut_rose', + icon: 'pie-donut-rose', + properties: [ + 'color-selector', + 'size-selector-ant-v', + 'label-selector-ant-v', + 'tooltip-selector-ant-v', + 'title-selector-ant-v', + 'legend-selector-ant-v' + ], propertyInner: { 'color-selector': [ 'value', @@ -2378,6 +2492,64 @@ export const TYPE_CONFIGS = [ 'title-selector', 'legend-selector' ], + propertyInner: { + + 'color-selector': [ + 'value', + 'custom', + 'alpha' + ], + 'size-selector': [ + 'pieOuterRadius' + ], + 'label-selector': [ + 'show', + 'labelLine', + 'fontSize', + 'color', + 'position-pie', + 'formatter' + ], + 'tooltip-selector': [ + 'show', + 'trigger', + 'textStyle', + 'formatter' + ], + 'title-selector': [ + 'show', + 'title', + 'fontSize', + 'color', + 'hPosition', + 'vPosition', + 'isItalic', + 'isBolder' + ], + 'legend-selector': [ + 'show', + 'icon', + 'orient', + 'textStyle', + 'hPosition', + 'vPosition' + ] + } + }, + { + render: 'echarts', + category: 'chart.chart_type_distribute', + value: 'pie-donut', + title: 'chart.chart_pie_donut', + icon: 'pie-donut', + properties: [ + 'color-selector', + 'size-selector', + 'label-selector', + 'tooltip-selector', + 'title-selector', + 'legend-selector' + ], propertyInner: { 'color-selector': [ @@ -2437,6 +2609,65 @@ export const TYPE_CONFIGS = [ 'title-selector', 'legend-selector' ], + propertyInner: { + + 'color-selector': [ + 'value', + 'custom', + 'alpha' + ], + 'size-selector': [ + 'pieOuterRadius', + 'pieRoseType', + 'pieRoseRadius' + ], + 'label-selector': [ + 'show', + 'fontSize', + 'color', + 'position-pie', + 'formatter' + ], + 'tooltip-selector': [ + 'show', + 'trigger', + 'textStyle', + 'formatter' + ], + 'title-selector': [ + 'show', + 'title', + 'fontSize', + 'color', + 'hPosition', + 'vPosition', + 'isItalic', + 'isBolder' + ], + 'legend-selector': [ + 'show', + 'icon', + 'orient', + 'textStyle', + 'hPosition', + 'vPosition' + ] + } + }, + { + render: 'echarts', + category: 'chart.chart_type_distribute', + value: 'pie-donut-rose', + title: 'chart.chart_pie_donut_rose', + icon: 'pie-donut-rose', + properties: [ + 'color-selector', + 'size-selector', + 'label-selector', + 'tooltip-selector', + 'title-selector', + 'legend-selector' + ], propertyInner: { 'color-selector': [ diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 9194c4027e..ef6702181f 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -297,9 +297,9 @@ export default { chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart) } else if (chart.type === 'line-stack') { chart_option = stackLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart) - } else if (chart.type === 'pie') { + } else if (chart.type === 'pie' || chart.type === 'pie-donut') { chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart) - } else if (chart.type === 'pie-rose') { + } else if (chart.type === 'pie-rose' || chart.type === 'pie-donut-rose') { chart_option = rosePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart) } else if (chart.type === 'funnel') { chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart) diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index c3d14f7b5a..d6f43b9a2f 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/frontend/src/views/chart/components/ChartComponentG2.vue @@ -219,9 +219,7 @@ 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') { - this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true) - } else if (chart.type === 'percentage-bar-stack') { + } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') { this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true) } else if (chart.type === 'bar-horizontal') { this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false) @@ -239,9 +237,9 @@ export default { this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction) } else if (chart.type === 'gauge') { this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction, this.scale) - } else if (chart.type === 'pie') { + } else if (chart.type === 'pie' || chart.type === 'pie-donut') { this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction) - } else if (chart.type === 'pie-rose') { + } else if (chart.type === 'pie-rose' || chart.type === 'pie-donut-rose') { this.myChart = basePieRoseOptionAntV(this.myChart, this.chartId, chart, this.antVAction) } else if (chart.type === 'funnel') { this.myChart = baseFunnelOptionAntV(this.myChart, this.chartId, chart, this.antVAction) diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 4f29e87a33..f9ad1fe73d 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -1038,6 +1038,13 @@ export default { } else { attr.label.position = 'inner' } + // 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7 + if (type === 'pie-donut') { + attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.7) + } + if (type === 'pie-donut-rose') { + attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.5) + } } else if (type.includes('line')) { attr.label.position = 'top' } else if (type.includes('treemap')) { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 2901f048cd..61593dea7d 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -1588,6 +1588,7 @@ import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit' import ScrollCfg from '@/views/chart/components/senior/ScrollCfg' import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit' import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit' +import { equalsAny } from "@/utils/StringUtils"; export default { name: 'ChartEdit', @@ -1876,6 +1877,24 @@ export default { initFromPanel() { this.hasEdit = (this.panelViewEditInfo[this.param.id] || false) }, + // v1.16.0 需求，拆分环形图 + convertChart(chart) { + // v1.16.0，将有内径的饼图和玫瑰图转换成环形图和玫瑰环形图 + if (equalsAny(chart.type,'pie','pie-rose')) { + let customAttr = chart.customAttr; + if (typeof chart.customAttr === 'string'){ + customAttr = JSON.parse(customAttr) + } + if (customAttr.size.pieInnerRadius > 0) { + if (chart.type === 'pie') { + chart.type = 'pie-donut' + } + if (chart.type === 'pie-rose') { + chart.type = 'pie-donut-rose' + } + } + } + }, chartInit() { this.fieldShow = false this.resetDrill() @@ -2334,6 +2353,12 @@ export default { this.httpRequest.status = err.response.data.success this.httpRequest.msg = err.response.data.message return true + }).then(() => { + //视图为编辑状态才进行转换 + if (this.editStatue) { + this.convertChart(this.chart); + this.convertChart(this.view) + } }) } else { this.view = {}