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

feat(视图-仪表盘): 刻度标签支持隐藏

Browse Source
This commit is contained in:
wisonic-s 2023-08-11 12:27:33 +08:00
parent 8aeb49a87f
commit 97db9276f1
9 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1545,7 +1545,23 @@ export default {
map_style_macaron: 'Macaron',
map_style_blue: 'Blue',
map_style_darkblue: 'Dark Blue',
map_style_wine: 'Wine'
map_style_wine: 'Wine',
map_line_type: 'Line Type',
map_line_width: 'Line Width',
map_line_height: 'Line Height',
map_line_linear: 'Gradient',
map_line_animate: 'Animation',
map_line_animate_duration: 'Animation Duration',
map_line_animate_interval: 'Animation Interval',
map_line_animate_trail_length: 'Animation Trail Length',
map_line_type_line: 'Straight Line',
map_line_type_arc: 'Arc Line',
map_line_type_arc_3d: 'Arc Line 3D',
map_line_type_great_circle: 'Circle',
map_line_color_source_color: 'Starting Color',
map_line_color_target_color: 'End Color',
map_line_theta_offset: 'Radian',
gauge_axis_label: 'Axis Label'
},
dataset: {
scope_edit: 'Effective only when editing',

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

@ -1539,7 +1539,23 @@ export default {
map_style_macaron: '馬卡龍',
map_style_blue: '靛青藍',
map_style_darkblue: '極夜藍',
map_style_wine: '醬籽'
map_style_wine: '醬籽',
map_line_type: '類型',
map_line_width: '線條寬度',
map_line_height: '線條高度',
map_line_linear: '漸變',
map_line_animate: '動畫',
map_line_animate_duration: '動畫間隔',
map_line_animate_interval: '軌跡間隔',
map_line_animate_trail_length: '軌跡長度',
map_line_type_line: '直線',
map_line_type_arc: '弧線',
map_line_type_arc_3d: '3D 弧線',
map_line_type_great_circle: '大圓弧',
map_line_color_source_color: '起始顏色',
map_line_color_target_color: '結束顏色',
map_line_theta_offset: '弧度',
gauge_axis_label: '刻度標籤'
},
dataset: {
scope_edit: '僅編輯時生效',

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

@ -1553,7 +1553,8 @@ export default {
map_line_type_great_circle: '大圆弧',
map_line_color_source_color: '起始颜色',
map_line_color_target_color: '结束颜色',
map_line_theta_offset: '弧度'
map_line_theta_offset: '弧度',
gauge_axis_label: '刻度标签'
},
dataset: {
scope_edit: '仅编辑时生效',

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

@ -100,6 +100,7 @@ export const DEFAULT_SIZE = {
gaugeMax: 100,
gaugeStartAngle: 225,
gaugeEndAngle: -45,
gaugeAxisLine: true,
gaugeTickCount: 5,
dimensionFontSize: 18,
quotaFontSize: 18,

5
frontend/src/views/chart/chart/gauge/gauge.js
View File

@ -67,7 +67,12 @@ export function baseGaugeOption(chart_option, chart, scale = 1) {
width: getScaleValue(2, scale) // 刻度线宽度
}
}
let showAxisLine = customAttr.size.gaugeAxisLine
if (showAxisLine === null || showAxisLine === undefined) {
showAxisLine = true
}
chart_option.series[0].axisLabel = {
show: showAxisLine,
distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// 刻度值字体大小
}

20
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -14,6 +14,14 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
const data = chart.data.series[0].data[0]
// size
let customAttr = {}
let axisLabel = {
style: {
fontSize: getScaleValue(14, scale) // 刻度值字体大小
},
formatter: function(v) {
return v === '0' ? v : (v * 100 + '%')
}
}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (customAttr.size) {
@ -33,6 +41,9 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
}
startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180
endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180
if (customAttr.size.gaugeAxisLine === false) {
axisLabel = false
}
}
}
const per = (parseFloat(data) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))
@ -101,14 +112,7 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
},
axis: {
tickInterval: 0.2,
label: {
style: {
fontSize: getScaleValue(14, scale) // 刻度值字体大小
},
formatter: function(v) {
return v === '0' ? v : (v * 100 + '%')
}
},
label: axisLabel,
tickLine: {
length: getScaleValue(12, scale) * -1, // 刻度线长度
style: {

6
frontend/src/views/chart/chart/util.js
View File

@ -296,7 +296,8 @@ export const TYPE_CONFIGS = [
'gaugeMax',
'gaugeStartAngle',
'gaugeEndAngle',
'gaugeTickCount'
'gaugeTickCount',
'gaugeAxisLabel'
],
'label-selector-ant-v': [
'labelGauge'
@ -2153,7 +2154,8 @@ export const TYPE_CONFIGS = [
'gaugeMin',
'gaugeMax',
'gaugeStartAngle',
'gaugeEndAngle'
'gaugeEndAngle',
'gaugeAxisLabel'
],
'label-selector': [
'show',

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

@ -476,6 +476,16 @@
@change="changeBarSizeCase('gaugeEndAngle')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('gaugeAxisLabel')"
:label="$t('chart.gauge_axis_label')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.gaugeAxisLine"
@change="changeBarSizeCase('gaugeAxisLabel')"
/>
</el-form-item>
<!--gauge-end-->
<!--text&label-start-->
<el-form-item
@ -1154,6 +1164,9 @@ export default {
this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
this.sizeForm.tableAutoBreakLine = this.sizeForm.tableAutoBreakLine ? this.sizeForm.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
if (this.sizeForm.gaugeAxisLine === null || this.sizeForm.gaugeAxisLine === undefined) {
this.sizeForm.gaugeAxisLine = DEFAULT_SIZE.gaugeAxisLine
}
}
}
},

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

@ -790,6 +790,16 @@
@change="changeBarSizeCase('gaugeEndAngle')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('gaugeAxisLabel')"
:label="$t('chart.gauge_axis_label')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.gaugeAxisLine"
@change="changeBarSizeCase('gaugeAxisLabel')"
/>
</el-form-item>
<!-- <el-form-item v-show="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">-->
<!-- <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase('gaugeTickCount')" />-->
<!-- </el-form-item>-->
@ -1563,6 +1573,9 @@ export default {
this.sizeForm.mapLineAnimateDuration = this.sizeForm.mapLineAnimateDuration !== undefined ? this.sizeForm.mapLineAnimateDuration : DEFAULT_SIZE.mapLineAnimateDuration
this.sizeForm.mapLineAnimateInterval = this.sizeForm.mapLineAnimateInterval !== undefined ? this.sizeForm.mapLineAnimateInterval : DEFAULT_SIZE.mapLineAnimateInterval
this.sizeForm.mapLineAnimateTrailLength = this.sizeForm.mapLineAnimateTrailLength !== undefined ? this.sizeForm.mapLineAnimateTrailLength : DEFAULT_SIZE.mapLineAnimateTrailLength
if (this.sizeForm.gaugeAxisLine === null || this.sizeForm.gaugeAxisLine === undefined) {
this.sizeForm.gaugeAxisLine = DEFAULT_SIZE.gaugeAxisLine
}
}
}
},