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

Merge pull request #1624 from dataease/pr@dev@refactor_chart_style

Browse Source 
refactor: 视图样式配置项调整
This commit is contained in:
Junjie 2022-01-11 17:17:53 +08:00 committed by GitHub
commit 6bcd70444b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 87 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/views/chart/chart/chart.js
View File

@ -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,

14
frontend/src/views/chart/chart/liquid/liquid.js
View File

@ -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

2
frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -6,7 +6,7 @@
id="label-content"
:style="content_class"
>
<span v-if="quotaShow" :style="label_class">
<span :style="label_class">
<p v-for="item in chart.data.series" :key="item.name" :style="label_content_class">
{{ item.data[0] }}
</p>

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
}
}
}
}
}

50
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' }
]
} 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
}
}
}
}

3
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -128,9 +128,6 @@
</el-form>
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.quota_show')" class="form-item">
<el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />

15
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
View File

@ -125,9 +125,6 @@
</el-form>
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.quota_show')" class="form-item">
<el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -244,18 +241,6 @@
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
</el-col>
</div>

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'
}
}
}
}
}