diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js index bee46ae02d..5285b8d42d 100644 --- a/core/frontend/src/lang/en.js +++ b/core/frontend/src/lang/en.js @@ -1221,6 +1221,9 @@ export default { axis_width: 'Axis Width', axis_type: 'Axis Type', grid_show: 'Grid Show', + dash_show: 'Dash Show', + dash_width: 'Dash Width', + dash_offset: 'Dash Offset', grid_color: 'Grid Color', grid_width: 'Grid Width', grid_type: 'Grid Type', diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js index 73571a3e52..fdf817d615 100644 --- a/core/frontend/src/lang/tw.js +++ b/core/frontend/src/lang/tw.js @@ -1219,6 +1219,9 @@ export default { axis_width: '軸線寬度', axis_type: '軸線類型', grid_show: '網格線顯示', + dash_show: '虛線顯示', + dash_width: '虛線寬度', + dash_offset: '虛線間距', grid_color: '網格線顏色', grid_width: '網格線寬度', grid_type: '網格線類型', diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js index e0fe3bc8f9..5c6a995209 100644 --- a/core/frontend/src/lang/zh.js +++ b/core/frontend/src/lang/zh.js @@ -1219,6 +1219,9 @@ export default { axis_width: '轴线宽度', axis_type: '轴线类型', grid_show: '网格线显示', + dash_show: '虚线显示', + dash_width: '虚线宽度', + dash_offset: '虚线间距', grid_color: '网格线颜色', grid_width: '网格线宽度', grid_type: '网格线类型', diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js index e4bc954ec8..b16cdb9d97 100644 --- a/core/frontend/src/views/chart/chart/chart.js +++ b/core/frontend/src/views/chart/chart/chart.js @@ -328,6 +328,11 @@ export const DEFAULT_XAXIS_STYLE = { color: '#cccccc', width: 1, style: 'solid' + }, + enableDash: false, + dashStyle: { + width: 4, + offset: 5 } }, axisValue: { @@ -374,6 +379,11 @@ export const DEFAULT_YAXIS_STYLE = { color: '#cccccc', width: 1, style: 'solid' + }, + enableDash: false, + dashStyle: { + width: 4, + offset: 5 } }, axisValue: { @@ -420,6 +430,11 @@ export const DEFAULT_YAXIS_EXT_STYLE = { color: '#cccccc', width: 1, style: 'solid' + }, + enableDash: false, + dashStyle: { + width: 4, + offset: 5 } }, axisValue: { diff --git a/core/frontend/src/views/chart/chart/common/common_antv.js b/core/frontend/src/views/chart/chart/common/common_antv.js index 7cd5da6ff1..385bc2ef4c 100644 --- a/core/frontend/src/views/chart/chart/common/common_antv.js +++ b/core/frontend/src/views/chart/chart/common/common_antv.js @@ -656,11 +656,16 @@ export function getXAxis(chart) { }, spacing: 8 } : null + const gridCfg = a.splitLine ? a.splitLine : DEFAULT_XAXIS_STYLE.splitLine + if (!gridCfg.dashStyle) { + gridCfg.dashStyle = DEFAULT_XAXIS_STYLE.splitLine.dashStyle + } const grid = a.splitLine.show ? { line: { style: { stroke: a.splitLine.lineStyle.color, - lineWidth: parseInt(a.splitLine.lineStyle.width) + lineWidth: parseInt(a.splitLine.lineStyle.width), + lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined } } } : null @@ -771,11 +776,16 @@ export function getYAxis(chart) { }, spacing: 8 } : null + const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_STYLE.splitLine + if (!gridCfg.dashStyle) { + gridCfg.dashStyle = DEFAULT_YAXIS_STYLE.splitLine.dashStyle + } const grid = a.splitLine.show ? { line: { style: { stroke: a.splitLine.lineStyle.color, - lineWidth: parseInt(a.splitLine.lineStyle.width) + lineWidth: parseInt(a.splitLine.lineStyle.width), + lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined } } } : null @@ -883,11 +893,16 @@ export function getYAxisExt(chart) { }, spacing: 8 } : null + const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_EXT_STYLE.splitLine + if (!gridCfg.dashStyle) { + gridCfg.dashStyle = DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle + } const grid = a.splitLine.show ? { line: { style: { stroke: a.splitLine.lineStyle.color, - lineWidth: parseInt(a.splitLine.lineStyle.width) + lineWidth: parseInt(a.splitLine.lineStyle.width), + lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined } } } : null diff --git a/core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue index 8a20a91246..b658e8cc66 100644 --- a/core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue +++ b/core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue @@ -201,6 +201,46 @@ @change="changeXAxisStyle('splitLine')" /> + + + {{ $t('chart.dash_show') }} + + + + {{ $t('chart.dash_show') }} + + + + {{ $t('chart.dash_show') }} + + + + {{ $t('chart.dash_show') }} + + + + {{ $t('chart.dash_show') }} + +