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

Merge pull request #758 from dataease/pr@dev@feat_axis_value

Browse Source 
feat(视图): 坐标轴轴值设置
This commit is contained in:
XiaJunjie2020 2021-09-03 11:21:46 +08:00 committed by GitHub
commit a90de21b1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 121 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lang/en.js
View File

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

7
frontend/src/lang/tw.js
View File

@ -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頁面，默認抽取第一個',

7
frontend/src/lang/zh.js
View File

@ -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 页，默认抽取第一个',

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

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

24
frontend/src/views/chart/chart/common/common.js
View File

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

2
frontend/src/views/chart/components/ChartComponent.vue
View File

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

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

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

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

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