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') }}
+
+
+
+
+
+
+
+
+