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

feat: 轴值格式化

Browse Source
This commit is contained in:
junjun 2022-06-07 15:24:49 +08:00
parent e51b0d766b
commit 555de25308
6 changed files with 198 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -88,6 +88,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle" />
</el-form-item>
</span>
</span>
<el-divider v-if="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
@ -101,6 +127,7 @@
<script>
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'XAxisSelector',
@ -126,7 +153,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -161,6 +190,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
}
}
}
},

34
frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
View File

@ -81,6 +81,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle" />
</el-form-item>
</span>
</span>
</div>
</el-form>
@ -90,6 +116,7 @@
<script>
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'XAxisSelectorAntV',
@ -115,7 +142,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -150,6 +179,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
}
}
}
},

34
frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
View File

@ -88,6 +88,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
</el-form-item>
</span>
</span>
<el-divider v-if="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
@ -101,6 +127,7 @@
<script>
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'YAxisExtSelector',
@ -126,7 +153,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -164,6 +193,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
}
}
}
},

34
frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
View File

@ -81,6 +81,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
</el-form-item>
</span>
</span>
</div>
</el-form>
@ -90,6 +116,7 @@
<script>
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'YAxisExtSelectorAntV',
@ -115,7 +142,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -153,6 +182,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
}
}
}
},

34
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -88,6 +88,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
</el-form-item>
</span>
</span>
<el-divider v-if="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
@ -101,6 +127,7 @@
<script>
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'YAxisSelector',
@ -126,7 +153,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -161,6 +190,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
}
}
}
},

34
frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
View File

@ -92,6 +92,32 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
<el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
</el-select>
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
<el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
<el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
<el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
<el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
</el-form-item>
</span>
</span>
</div>
</el-form>
@ -101,6 +127,7 @@
<script>
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { formatterType, unitList } from '@/views/chart/chart/formatter'
export default {
name: 'YAxisSelectorAntV',
@ -126,7 +153,9 @@ export default {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
@ -161,6 +190,9 @@ export default {
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
}
}
}
},