center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 视图样式配置项调整

Browse Source
This commit is contained in:
junjie 2022-01-11 17:16:22 +08:00
parent b59c33ddd6
commit 5cff660cea
3 changed files with 83 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -17,7 +17,7 @@
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
<el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
@ -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
}
}
}
}
}

48
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
View File

@ -17,7 +17,7 @@
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
@ -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' }
]
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 = [
{ 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' }
]
this.labelPosition = this.labelPositionV
}
}
}
}

34
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -141,7 +141,7 @@
class="render-select"
style="width: 100px"
size="mini"
@change="calcData(true,'chart',true,true)"
@change="changeChartType()"
>
<el-option
v-for="item in renderOptions"
@ -158,7 +158,7 @@
v-model="view.type"
style="width: 100%"
:disabled="!hasDataPermission('manage',param.privileges)"
@change="calcData(true,'chart',true,true)"
@change="changeChartType()"
>
<chart-type :chart="view" style="height: 480px" />
</el-radio-group>
@ -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'
}
}
}
}
}