dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: echarts雷达图自定义最大值最小值。

Browse Source
This commit is contained in:
wisonic-s 2023-11-16 16:03:28 +08:00
parent dd071d57e4
commit 0399b64304
10 changed files with 83 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/frontend/src/lang/en.js
View File

@ -1481,6 +1481,7 @@ export default {
dimension_letter_space: 'Name Letter Space',
font_family: 'Font Family',
font_family_tip: 'The font will only take effect if it is installed on the operating system',
radar_max_tip: 'If the maximum value of the actual data is greater than the custom maximum value, the maximum value of the actual data will prevail.',
letter_space: 'Letter Space',
font_shadow: 'Font Shadow',
chart_area: 'Area',

1
core/frontend/src/lang/tw.js
View File

@ -1478,6 +1478,7 @@ export default {
dimension_letter_space: '名稱字間距',
font_family: '字體',
font_family_tip: '只有操作系統上已安裝該字體才能生效',
radar_max_tip: '如果實際數據的最大值大於自定義的最大值，將以實際數據的最大值為準。',
letter_space: '字間距',
font_shadow: '字體陰影',
chart_area: '面積圖',

1
core/frontend/src/lang/zh.js
View File

@ -1478,6 +1478,7 @@ export default {
dimension_letter_space: '名称字间距',
font_family: '字体',
font_family_tip: '只有操作系统上已安装该字体才能生效',
radar_max_tip: '如果实际数据的最大值大于自定义的最大值，将以实际数据的最大值为准。',
letter_space: '字间距',
font_shadow: '字体阴影',
chart_area: '面积图',

10
core/frontend/src/views/chart/chart/radar/radar.js
View File

@ -64,9 +64,15 @@ export function baseRadarOption(chart_option, chart) {
maxValues.push(Math.max.apply(null, y.value))
}
const max = Math.max.apply(null, maxValues)
let max = Math.max.apply(null, maxValues)
let min
const customStyle = JSON.parse(chart.customStyle)
if (customStyle?.split?.axisValue?.auto === false) {
min = customStyle.split.axisValue.min
max = Math.max(customStyle.split.axisValue.max, max)
}
chart.data.x.forEach(function(ele) {
chart_option.radar.indicator.push({ name: ele, max: max })
chart_option.radar.indicator.push({ name: ele, min, max })
})
}
componentStyle(chart_option, chart)

3
core/frontend/src/views/chart/chart/radar/radar_antv.js
View File

@ -125,7 +125,8 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
}
if (s.axisValue?.auto === false) {
yAxis.min = yAxis.minLimit = s.axisValue.min
yAxis.max = yAxis.maxLimit = s.axisValue.max
const dataMax = _.maxBy(data, 'value')
yAxis.max = yAxis.maxLimit = Math.max(s.axisValue.max, dataMax.value)
}
}
}

3
core/frontend/src/views/chart/chart/util.js
View File

@ -3114,7 +3114,8 @@ export const TYPE_CONFIGS = [
'axisLine',
'axisLabel',
'splitLine',
'splitArea'
'splitArea',
'axisValue'
],
'title-selector': [
'show',

47
core/frontend/src/views/chart/components/componentStyle/SplitSelector.vue
View File

@ -141,6 +141,50 @@
@change="changeSplitStyle('splitArea')"
>{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-divider v-show="showProperty('axisValue')" />
<el-form-item
v-show="showProperty('axisValue')"
:label="$t('chart.axis_value')"
class="form-item"
>
<el-radio-group
v-model="splitForm.axisValue.auto"
@change="changeSplitStyle('axisValue')"
>
<el-radio :label="true">{{ $t('chart.axis_auto') }}</el-radio>
<el-radio :label="false">{{ $t('commons.custom') }}</el-radio>
</el-radio-group>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div
slot="content"
v-html="$t('chart.radar_max_tip')"
/>
<i
class="el-icon-info"
style="cursor: pointer;color: #606266;margin-left: 4px;"
/>
</el-tooltip>
</el-form-item>
<div v-show="showProperty('axisValue') && !splitForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')">
<el-input-number
v-model="splitForm.axisValue.min"
:max="splitForm.axisValue.max"
@change="changeSplitStyle('axisValue')"
/>
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')">
<el-input-number
v-model="splitForm.axisValue.max"
:min="splitForm.axisValue.min"
@change="changeSplitStyle('axisValue')"
/>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
@ -199,6 +243,9 @@ export default {
}
if (customStyle.split) {
this.splitForm = customStyle.split
if (this.splitForm.axisValue === undefined) {
this.splitForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_SPLIT.axisValue))
}
} else {
this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
}

22
core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
View File

@ -60,7 +60,7 @@
@change="changeSplitStyle('axisLine')"
/>
</el-form-item>
<el-divider />
<el-divider v-show="showProperty('axisValue')" />
<el-form-item
v-show="showProperty('axisValue')"
:label="$t('chart.axis_value')"
@ -73,18 +73,34 @@
<el-radio :label="true">{{ $t('chart.axis_auto') }}</el-radio>
<el-radio :label="false">{{ $t('commons.custom') }}</el-radio>
</el-radio-group>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div
slot="content"
v-html="$t('chart.radar_max_tip')"
/>
<i
class="el-icon-info"
style="cursor: pointer;color: #606266;margin-left: 4px;"
/>
</el-tooltip>
</el-form-item>
<div v-show="showProperty('axisValue') && !splitForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')">
<el-input-number
v-model="splitForm.axisValue.min"
@blur="changeSplitStyle('axisValue')"
:max="splitForm.axisValue.max"
@change="changeSplitStyle('axisValue')"
/>
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')">
<el-input-number
v-model="splitForm.axisValue.max"
@blur="changeSplitStyle('axisValue')"
:min="splitForm.axisValue.min"
@change="changeSplitStyle('axisValue')"
/>
</el-form-item>
</div>

11
core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
View File

@ -244,7 +244,6 @@
<!--table-begin-->
<el-form-item
v-if="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
@ -263,7 +262,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
@ -280,7 +278,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tablePageMode')"
label-width="100px"
:label="$t('chart.table_page_mode')"
class="form-item"
>
@ -301,7 +298,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'"
label-width="100px"
:label="$t('chart.table_page_size')"
class="form-item"
>
@ -320,7 +316,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableColumnWidth')"
label-width="100px"
:label="$t('chart.table_column_width_config')"
class="form-item form-item-slider"
>
@ -336,7 +331,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableAutoBreakLine')"
label-width="100px"
:label="$t('chart.table_auto_break_line')"
class="form-item"
>
@ -360,7 +354,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('showIndex')"
label-width="100px"
:label="$t('chart.table_show_index')"
class="form-item"
>
@ -375,7 +368,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('indexLabel') && sizeForm.showIndex"
label-width="100px"
:label="$t('chart.table_index_desc')"
class="form-item"
>
@ -388,7 +380,6 @@
<el-divider v-if="includesAny(chart.type ,'table')" />
<el-form-item
v-if="showProperty('showTableHeader')"
label-width="100px"
:label="$t('chart.table_show_table_header')"
class="form-item"
>
@ -403,7 +394,6 @@
<div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
<el-form-item
v-if="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
@ -423,7 +413,6 @@
<el-form-item
v-if="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>

19
core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
View File

@ -164,7 +164,6 @@
<!--table-begin-->
<el-form-item
v-if="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
@ -183,7 +182,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableItemAlign')"
label-width="100px"
:label="$t('chart.table_item_align')"
class="form-item"
>
@ -202,7 +200,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
@ -218,7 +215,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tablePageMode')"
label-width="100px"
:label="$t('chart.table_page_mode')"
class="form-item"
>
@ -239,7 +235,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
label-width="100px"
:label="$t('chart.table_page_size')"
class="form-item"
>
@ -258,7 +253,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableColumnMode')"
label-width="100px"
:label="$t('chart.table_column_width_config')"
class="form-item"
>
@ -289,7 +283,6 @@
<el-form-item
v-if="showProperty('tableColumnMode') && sizeForm.tableColumnMode === 'custom'"
label=""
label-width="100px"
class="form-item form-item-slider"
>
<el-slider
@ -304,7 +297,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('showIndex')"
label-width="100px"
:label="$t('chart.table_show_index')"
class="form-item"
>
@ -319,7 +311,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('indexLabel') && sizeForm.showIndex"
label-width="100px"
:label="$t('chart.table_index_desc')"
class="form-item"
>
@ -332,7 +323,6 @@
<el-divider v-if="equalsAny(chart.type, 'table-info', 'table-normal')" />
<el-form-item
v-if="showProperty('showTableHeader')"
label-width="100px"
:label="$t('chart.table_show_table_header')"
class="form-item"
>
@ -347,7 +337,6 @@
<div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
<el-form-item
v-if="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
@ -366,7 +355,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableHeaderAlign')"
label-width="100px"
:label="$t('chart.table_header_align')"
class="form-item"
>
@ -385,7 +373,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
@ -401,7 +388,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableRowTooltip')"
label-width="100px"
:label="$t('chart.table_row_tooltip')"
class="form-item"
>
@ -412,7 +398,6 @@
</el-form-item>
<el-form-item
v-if="showProperty('tableColTooltip')"
label-width="100px"
:label="$t('chart.table_col_tooltip')"
class="form-item"
>
@ -557,7 +542,7 @@
<el-form
ref="sizeFormGauge"
:model="sizeForm"
label-width="100px"
label-width="80px"
size="mini"
>
<div v-if="!batchOptStatus">
@ -849,7 +834,7 @@
<el-form
ref="sizeFormPie"
:model="sizeForm"
label-width="100px"
label-width="80px"
size="mini"
>
<!--text&label-start-->