From 97db9276f10673fe6f92837c83e28c881765ad6c Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Fri, 11 Aug 2023 12:27:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98):=20=E5=88=BB=E5=BA=A6=E6=A0=87=E7=AD=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=9A=90=E8=97=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 18 ++++++++++++++++- frontend/src/lang/tw.js | 18 ++++++++++++++++- frontend/src/lang/zh.js | 3 ++- frontend/src/views/chart/chart/chart.js | 1 + frontend/src/views/chart/chart/gauge/gauge.js | 5 +++++ .../src/views/chart/chart/gauge/gauge_antv.js | 20 +++++++++++-------- frontend/src/views/chart/chart/util.js | 6 ++++-- .../components/shapeAttr/SizeSelector.vue | 13 ++++++++++++ .../components/shapeAttr/SizeSelectorAntV.vue | 13 ++++++++++++ 9 files changed, 84 insertions(+), 13 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 1d11528945..058f07f054 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 2bf2e5c31e..ee66998048 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -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: '僅編輯時生效', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index b5b49c6a93..d885907d3f 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -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: '仅编辑时生效', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 83f6f1e9f6..de0a6870f9 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -100,6 +100,7 @@ export const DEFAULT_SIZE = { gaugeMax: 100, gaugeStartAngle: 225, gaugeEndAngle: -45, + gaugeAxisLine: true, gaugeTickCount: 5, dimensionFontSize: 18, quotaFontSize: 18, diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js index dcaa374fb3..166d9738d3 100644 --- a/frontend/src/views/chart/chart/gauge/gauge.js +++ b/frontend/src/views/chart/chart/gauge/gauge.js @@ -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)// 刻度值字体大小 } diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js index 5070f6f2c1..a41bff3807 100644 --- a/frontend/src/views/chart/chart/gauge/gauge_antv.js +++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js @@ -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: { diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 7e24fd5c36..16f1792aea 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -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', diff --git a/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue index 3041b71192..eb83468cec 100644 --- a/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue +++ b/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue @@ -476,6 +476,16 @@ @change="changeBarSizeCase('gaugeEndAngle')" /> + + + + + + @@ -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 + } } } },