refactor(视图): 坐标轴格式化支持批量样式设置

This commit is contained in:
wangjiahao 2022-07-05 11:39:00 +08:00
parent 32857ec4f9
commit 0edfe4171d
6 changed files with 31 additions and 31 deletions

View File

@ -91,33 +91,33 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle('axisLabelFormatter')" />
</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">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('')" />
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('axisLabel')" />
</el-form-item>
</div>
</el-form>

View File

@ -84,27 +84,27 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle('axisLabelFormatter')" />
</el-form-item>
</span>
</span>

View File

@ -91,27 +91,27 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
</el-form-item>
</span>
</span>

View File

@ -84,27 +84,27 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
</el-form-item>
</span>
</span>

View File

@ -91,27 +91,27 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
</el-form-item>
</span>
</span>

View File

@ -95,27 +95,27 @@
<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-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
<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-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
</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-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
</el-form-item>
</span>
</span>