Skip to content

D
dataease
提交 5cff660c authored 作者: junjie's avatar junjie
浏览文件
操作

refactor: 视图样式配置项调整

上级 b59c33dd
隐藏空白字符变更
内嵌 并排
正在显示 包含 83 行增加 和 33 行删除
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
浏览文件 @ 5cff660c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<el-form-item :label="$t('chart.text_color')" class="form-item"> <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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item> </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-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-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select> </el-select>
...@@ -84,27 +84,35 @@ export default { ...@@ -84,27 +84,35 @@ export default {
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
fontSize: [], fontSize: [],
isSetting: false, isSetting: false,
labelPosition: [ labelPosition: [],
labelPositionPie: [
{ name: this.$t('chart.inside'), value: 'inside' }, { name: this.$t('chart.inside'), value: 'inside' },
{ name: this.$t('chart.outside'), value: 'outside' }, { name: this.$t('chart.outside'), value: 'outside' }
{ name: this.$t('chart.center'), value: 'center' }, ],
{ name: this.$t('chart.text_pos_top'), value: 'top' }, labelPositionH: [
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
{ name: this.$t('chart.text_pos_left'), value: 'left' }, { 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' } { 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 predefineColors: COLOR_PANEL
} }
}, },
watch: { watch: {
'chart': { 'chart': {
handler: function() { handler: function() {
this.initOptions()
this.initData() this.initData()
} }
} }
}, },
mounted() { mounted() {
this.init() this.init()
this.initOptions()
this.initData() this.initData()
}, },
methods: { methods: {
...@@ -140,6 +148,18 @@ export default { ...@@ -140,6 +148,18 @@ export default {
this.isSetting = false this.isSetting = false
} }
this.$emit('onLabelChange', this.labelForm) 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
}
}
} }
} }
} }
......
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
浏览文件 @ 5cff660c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<el-form-item :label="$t('chart.text_color')" class="form-item"> <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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item> </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-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-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select> </el-select>
...@@ -62,29 +62,35 @@ export default { ...@@ -62,29 +62,35 @@ export default {
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
fontSize: [], fontSize: [],
isSetting: false, isSetting: false,
labelPosition: [ labelPosition: [],
{ name: this.$t('chart.inside'), value: 'middle' }, labelPositionPie: [
{ name: this.$t('chart.outside'), value: 'outside' }, { name: this.$t('chart.inside'), value: 'inner' },
{ name: this.$t('chart.center'), value: 'center' }, { name: this.$t('chart.outside'), value: 'outer' }
{ name: this.$t('chart.text_pos_top'), value: 'top' }, ],
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' }, labelPositionH: [
{ name: this.$t('chart.text_pos_left'), value: 'left' }, { 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' } { 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 predefineColors: COLOR_PANEL
} }
}, },
watch: { watch: {
'chart': { 'chart': {
handler: function() { handler: function() {
this.initLabelPosition() this.initOptions()
this.initData() this.initData()
} }
} }
}, },
mounted() { mounted() {
this.init() this.init()
this.initLabelPosition() this.initOptions()
this.initData() this.initData()
}, },
methods: { methods: {
...@@ -121,22 +127,16 @@ export default { ...@@ -121,22 +127,16 @@ export default {
} }
this.$emit('onLabelChange', this.labelForm) this.$emit('onLabelChange', this.labelForm)
}, },
initLabelPosition() { initOptions() {
if (this.chart && this.chart.type && this.chart.type.includes('pie')) { const type = this.chart.type
this.labelPosition = [ if (type) {
{ name: this.$t('chart.inside'), value: 'inner' }, if (type.includes('horizontal')) {
{ name: this.$t('chart.outside'), value: 'outer' } this.labelPosition = this.labelPositionH
] } else if (type.includes('pie')) {
} else { this.labelPosition = this.labelPositionPie
this.labelPosition = [ } else {
{ name: this.$t('chart.inside'), value: 'middle' }, this.labelPosition = this.labelPositionV
{ 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' }
]
} }
} }
} }
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 5cff660c
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
class="render-select" class="render-select"
style="width: 100px" style="width: 100px"
size="mini" size="mini"
@change="calcData(true,'chart',true,true)" @change="changeChartType()"
> >
<el-option <el-option
v-for="item in renderOptions" v-for="item in renderOptions"
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
v-model="view.type" v-model="view.type"
style="width: 100%" style="width: 100%"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
@change="calcData(true,'chart',true,true)" @change="changeChartType()"
> >
<chart-type :chart="view" style="height: 480px" /> <chart-type :chart="view" style="height: 480px" />
</el-radio-group> </el-radio-group>
...@@ -2066,6 +2066,36 @@ export default { ...@@ -2066,6 +2066,36 @@ export default {
reset() { reset() {
this.getData(this.param.id) 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'
}
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论