forked from github/dataease
Merge pull request #758 from dataease/pr@dev@feat_axis_value
feat(视图): 坐标轴轴值设置
This commit is contained in:
XiaJunjie2020
GitHub
commit
a90de21b1f
@ -849,7 +849,12 @@ export default {
|
||||
custom_case: 'Custom',
|
||||
last_layer: 'This Is The Last Layer',
|
||||
radar_size: 'Size',
|
||||
chart_mix: 'Mix'
|
||||
chart_mix: 'Mix',
|
||||
axis_value: 'Axis Value',
|
||||
axis_value_min: 'Min',
|
||||
axis_value_max: 'Max',
|
||||
axis_value_split: 'Split',
|
||||
axis_auto: 'Auto'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -848,7 +848,12 @@ export default {
|
||||
custom_case: '自定義',
|
||||
last_layer: '當前已經是最後一級',
|
||||
radar_size: '大小',
|
||||
chart_mix: '組合圖'
|
||||
chart_mix: '組合圖',
|
||||
axis_value: '軸值',
|
||||
axis_value_min: '最小值',
|
||||
axis_value_max: '最大值',
|
||||
axis_value_split: '間隔',
|
||||
axis_auto: '自動'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
|
||||
@ -848,7 +848,12 @@ export default {
|
||||
custom_case: '自定义',
|
||||
last_layer: '当前已经是最后一级',
|
||||
radar_size: '大小',
|
||||
chart_mix: '组合图'
|
||||
chart_mix: '组合图',
|
||||
axis_value: '轴值',
|
||||
axis_value_min: '最小值',
|
||||
axis_value_max: '最大值',
|
||||
axis_value_split: '间隔',
|
||||
axis_auto: '自动'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -107,6 +107,12 @@ export const DEFAULT_XAXIS_STYLE = {
|
||||
width: 1,
|
||||
style: 'solid'
|
||||
}
|
||||
},
|
||||
axisValue: {
|
||||
auto: true,
|
||||
min: null,
|
||||
max: null,
|
||||
split: null
|
||||
}
|
||||
}
|
||||
export const DEFAULT_YAXIS_STYLE = {
|
||||
@ -131,6 +137,12 @@ export const DEFAULT_YAXIS_STYLE = {
|
||||
width: 1,
|
||||
style: 'solid'
|
||||
}
|
||||
},
|
||||
axisValue: {
|
||||
auto: true,
|
||||
min: null,
|
||||
max: null,
|
||||
split: null
|
||||
}
|
||||
}
|
||||
export const DEFAULT_BACKGROUND_COLOR = {
|
||||
|
||||
@ -65,6 +65,18 @@ export function componentStyle(chart_option, chart) {
|
||||
if (!customStyle.xAxis.show) {
|
||||
chart_option.xAxis.axisLabel.show = false
|
||||
}
|
||||
|
||||
// 轴值设置
|
||||
delete chart_option.xAxis.min
|
||||
delete chart_option.xAxis.max
|
||||
delete chart_option.xAxis.split
|
||||
if (chart.type.includes('horizontal')) {
|
||||
if (customStyle.xAxis.axisValue && !customStyle.xAxis.axisValue.auto) {
|
||||
customStyle.xAxis.axisValue.min && (chart_option.xAxis.min = parseFloat(customStyle.xAxis.axisValue.min))
|
||||
customStyle.xAxis.axisValue.max && (chart_option.xAxis.max = parseFloat(customStyle.xAxis.axisValue.max))
|
||||
customStyle.xAxis.axisValue.split && (chart_option.xAxis.interval = parseFloat(customStyle.xAxis.axisValue.split))
|
||||
}
|
||||
}
|
||||
}
|
||||
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type === 'chart-mix')) {
|
||||
chart_option.yAxis.show = customStyle.yAxis.show
|
||||
@ -80,6 +92,18 @@ export function componentStyle(chart_option, chart) {
|
||||
if (!customStyle.yAxis.show) {
|
||||
chart_option.yAxis.axisLabel.show = false
|
||||
}
|
||||
|
||||
// 轴值设置
|
||||
delete chart_option.yAxis.min
|
||||
delete chart_option.yAxis.max
|
||||
delete chart_option.yAxis.split
|
||||
if (!chart.type.includes('horizontal')) {
|
||||
if (customStyle.yAxis.axisValue && !customStyle.yAxis.axisValue.auto) {
|
||||
customStyle.yAxis.axisValue.min && (chart_option.yAxis.min = parseFloat(customStyle.yAxis.axisValue.min))
|
||||
customStyle.yAxis.axisValue.max && (chart_option.yAxis.max = parseFloat(customStyle.yAxis.axisValue.max))
|
||||
customStyle.yAxis.axisValue.split && (chart_option.yAxis.interval = parseFloat(customStyle.yAxis.axisValue.split))
|
||||
}
|
||||
}
|
||||
}
|
||||
if (customStyle.split && chart.type.includes('radar')) {
|
||||
chart_option.radar.name = customStyle.split.name
|
||||
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
} else if (chart.type === 'chart-mix') {
|
||||
chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_MIX)), chart)
|
||||
}
|
||||
console.log(JSON.stringify(chart_option))
|
||||
// console.log(JSON.stringify(chart_option))
|
||||
|
||||
if (chart.type === 'map') {
|
||||
const customAttr = JSON.parse(chart.customAttr)
|
||||
|
||||
@ -23,6 +23,36 @@
|
||||
<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-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.axis_value') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
|
||||
<br>
|
||||
请确保填写数值能正确计算，否则将无法正常显示轴值。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
@ -120,6 +150,9 @@ export default {
|
||||
if (!this.axisForm.nameTextStyle) {
|
||||
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
|
||||
}
|
||||
if (!this.axisForm.axisValue) {
|
||||
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -23,6 +23,36 @@
|
||||
<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-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.axis_value') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
|
||||
<br>
|
||||
请确保填写数值能正确计算，否则将无法正常显示轴值。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
@ -120,6 +150,9 @@ export default {
|
||||
if (!this.axisForm.nameTextStyle) {
|
||||
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
|
||||
}
|
||||
if (!this.axisForm.axisValue) {
|
||||
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user