From 36bf4206a9e0b0082628b6c5939a12eaeecc5b98 Mon Sep 17 00:00:00 2001 From: junjie Date: Tue, 11 Jan 2022 15:29:28 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE=E9=A1=B9=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/components/normal/LabelNormal.vue | 2 +- .../src/views/chart/components/shape-attr/SizeSelector.vue | 3 --- .../src/views/chart/components/shape-attr/SizeSelectorAntV.vue | 3 --- 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue index 27f728943c..616692f810 100644 --- a/frontend/src/views/chart/components/normal/LabelNormal.vue +++ b/frontend/src/views/chart/components/normal/LabelNormal.vue @@ -6,7 +6,7 @@ id="label-content" :style="content_class" > - +

{{ item.data[0] }}

diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue index 362b8d15ab..892ea3bd90 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue @@ -128,9 +128,6 @@ - - {{ $t('chart.show') }} - diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index bedb4a527d..d7995ec282 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -125,9 +125,6 @@ - - {{ $t('chart.show') }} - From 792ad211c744444e2a1d8d889a346d0deabeb816 Mon Sep 17 00:00:00 2001 From: junjie Date: Tue, 11 Jan 2022 15:34:13 +0800 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE=E9=A1=B9=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/chart/liquid/liquid.js | 14 +------------- .../components/shape-attr/SizeSelectorAntV.vue | 12 ------------ 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js index d317e06232..2d61bc2066 100644 --- a/frontend/src/views/chart/chart/liquid/liquid.js +++ b/frontend/src/views/chart/chart/liquid/liquid.js @@ -5,7 +5,7 @@ import { DEFAULT_SIZE } from '@/views/chart/chart/chart' export function baseLiquid(plot, container, chart) { let value = 0 const colors = [] - let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title + let max, radius, bgColor, shape, labelContent, title if (chart.data) { if (chart.data.series.length > 0) { value = chart.data.series[0].data[0] @@ -26,10 +26,6 @@ export function baseLiquid(plot, container, chart) { const size = JSON.parse(JSON.stringify(customAttr.size)) max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100) - outlineBorder = parseInt(size.liquidOutlineBorder ? size.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder) - outlineDistance = parseInt((size.liquidOutlineDistance || size.liquidOutlineDistance === 0) ? size.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance) - waveLength = parseInt(size.liquidWaveLength ? size.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength) - waveCount = parseInt(size.liquidWaveCount ? size.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount) shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape } // label @@ -86,14 +82,6 @@ export function baseLiquid(plot, container, chart) { percent: (parseFloat(value) / parseFloat(max)), radius: radius, shape: shape, - outline: { - border: outlineBorder, - distance: outlineDistance - }, - wave: { - length: waveLength, - count: waveCount - }, statistic: { // title: title, content: labelContent diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index d7995ec282..ad36ad6972 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -241,18 +241,6 @@ - - - - - - - - - - - - From b59c33ddd6e9ebd636674a8eceddfb84c712ae41 Mon Sep 17 00:00:00 2001 From: junjie Date: Tue, 11 Jan 2022 15:57:29 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE=E9=A1=B9=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/chart/chart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 2db3f6c550..e0f36d1f81 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -13,11 +13,11 @@ export const DEFAULT_SIZE = { barDefault: true, barWidth: 40, barGap: 0.4, - lineWidth: 1, + lineWidth: 2, lineType: 'solid', lineSymbol: 'circle', lineSymbolSize: 4, - lineSmooth: false, + lineSmooth: true, lineArea: false, pieInnerRadius: 0, pieOuterRadius: 80, From 5cff660ceacaa6c0c5308617232597aac63843c7 Mon Sep 17 00:00:00 2001 From: junjie Date: Tue, 11 Jan 2022 17:16:22 +0800 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE=E9=A1=B9=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shape-attr/LabelSelector.vue | 32 +++++++++--- .../shape-attr/LabelSelectorAntV.vue | 50 +++++++++---------- frontend/src/views/chart/view/ChartEdit.vue | 34 ++++++++++++- 3 files changed, 83 insertions(+), 33 deletions(-) diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue index e94542193d..c5059bc83e 100644 --- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue @@ -17,7 +17,7 @@ - + @@ -84,27 +84,35 @@ export default { labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), fontSize: [], isSetting: false, - labelPosition: [ + labelPosition: [], + labelPositionPie: [ { name: this.$t('chart.inside'), value: 'inside' }, - { name: this.$t('chart.outside'), value: 'outside' }, - { name: this.$t('chart.center'), value: 'center' }, - { name: this.$t('chart.text_pos_top'), value: 'top' }, - { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }, + { name: this.$t('chart.outside'), value: 'outside' } + ], + labelPositionH: [ { name: this.$t('chart.text_pos_left'), value: 'left' }, + { name: this.$t('chart.center'), value: 'inside' }, { name: this.$t('chart.text_pos_right'), value: 'right' } ], + labelPositionV: [ + { name: this.$t('chart.text_pos_top'), value: 'top' }, + { name: this.$t('chart.center'), value: 'inside' }, + { name: this.$t('chart.text_pos_bottom'), value: 'bottom' } + ], predefineColors: COLOR_PANEL } }, watch: { 'chart': { handler: function() { + this.initOptions() this.initData() } } }, mounted() { this.init() + this.initOptions() this.initData() }, methods: { @@ -140,6 +148,18 @@ export default { this.isSetting = false } this.$emit('onLabelChange', this.labelForm) + }, + initOptions() { + const type = this.chart.type + if (type) { + if (type.includes('horizontal')) { + this.labelPosition = this.labelPositionH + } else if (type.includes('pie')) { + this.labelPosition = this.labelPositionPie + } else { + this.labelPosition = this.labelPositionV + } + } } } } diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue index 52c90ecdf3..50d23e7abc 100644 --- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue @@ -17,7 +17,7 @@ - + @@ -62,29 +62,35 @@ export default { labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), fontSize: [], isSetting: false, - labelPosition: [ - { name: this.$t('chart.inside'), value: 'middle' }, - { name: this.$t('chart.outside'), value: 'outside' }, - { name: this.$t('chart.center'), value: 'center' }, - { name: this.$t('chart.text_pos_top'), value: 'top' }, - { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }, + labelPosition: [], + labelPositionPie: [ + { name: this.$t('chart.inside'), value: 'inner' }, + { name: this.$t('chart.outside'), value: 'outer' } + ], + labelPositionH: [ { name: this.$t('chart.text_pos_left'), value: 'left' }, + { name: this.$t('chart.center'), value: 'middle' }, { name: this.$t('chart.text_pos_right'), value: 'right' } ], + labelPositionV: [ + { name: this.$t('chart.text_pos_top'), value: 'top' }, + { name: this.$t('chart.center'), value: 'middle' }, + { name: this.$t('chart.text_pos_bottom'), value: 'bottom' } + ], predefineColors: COLOR_PANEL } }, watch: { 'chart': { handler: function() { - this.initLabelPosition() + this.initOptions() this.initData() } } }, mounted() { this.init() - this.initLabelPosition() + this.initOptions() this.initData() }, methods: { @@ -121,22 +127,16 @@ export default { } this.$emit('onLabelChange', this.labelForm) }, - initLabelPosition() { - if (this.chart && this.chart.type && this.chart.type.includes('pie')) { - this.labelPosition = [ - { name: this.$t('chart.inside'), value: 'inner' }, - { name: this.$t('chart.outside'), value: 'outer' } - ] - } else { - this.labelPosition = [ - { name: this.$t('chart.inside'), value: 'middle' }, - { name: this.$t('chart.outside'), value: 'outside' }, - { name: this.$t('chart.center'), value: 'center' }, - { name: this.$t('chart.text_pos_top'), value: 'top' }, - { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }, - { name: this.$t('chart.text_pos_left'), value: 'left' }, - { name: this.$t('chart.text_pos_right'), value: 'right' } - ] + initOptions() { + const type = this.chart.type + if (type) { + if (type.includes('horizontal')) { + this.labelPosition = this.labelPositionH + } else if (type.includes('pie')) { + this.labelPosition = this.labelPositionPie + } else { + this.labelPosition = this.labelPositionV + } } } } diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index e1e89fb7a5..e76b1c5fd5 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -141,7 +141,7 @@ class="render-select" style="width: 100px" size="mini" - @change="calcData(true,'chart',true,true)" + @change="changeChartType()" > @@ -2066,6 +2066,36 @@ export default { reset() { this.getData(this.param.id) + }, + + changeChartType() { + this.setChartDefaultOptions() + this.calcData(true, 'chart', true, true) + }, + + setChartDefaultOptions() { + const type = this.view.type + if (type.includes('pie')) { + if (this.view.render === 'echarts') { + this.view.customAttr.label.position = 'inside' + } else { + this.view.customAttr.label.position = 'inner' + } + } else if (type.includes('line')) { + this.view.customAttr.label.position = 'top' + } else if (type.includes('treemap')) { + if (this.view.render === 'echarts') { + this.view.customAttr.label.position = 'inside' + } else { + this.view.customAttr.label.position = 'middle' + } + } else { + if (this.view.render === 'echarts') { + this.view.customAttr.label.position = 'inside' + } else { + this.view.customAttr.label.position = 'middle' + } + } } } }