diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 8d1f1a3634..35a3013b5f 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -720,7 +720,17 @@ export default {
chart_error_tips: 'Please contact admin ',
title_cannot_empty: 'Title can not be empty',
table_title_height: 'Table header height',
- table_item_height: 'Table row height'
+ table_item_height: 'Table row height',
+ axis_show: 'Axis Show',
+ axis_color: 'Axis Color',
+ axis_width: 'Axis Width',
+ axis_type: 'Axis Type',
+ axis_type_solid: 'Solid',
+ axis_type_dashed: 'Dashed',
+ axis_type_dotted: 'Dotted',
+ axis_label_show: 'Label Show',
+ axis_label_color: 'Label Color',
+ axis_label_fontsize: 'Label Fontsize'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 3a6d20f23d..e9efa24aa4 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -762,7 +762,17 @@ export default {
chart_error_tips: '如有疑問請聯系管理員',
title_cannot_empty: '標題不能為空',
table_title_height: '表頭行高',
- table_item_height: '表格行高'
+ table_item_height: '表格行高',
+ axis_show: '軸線顯示',
+ axis_color: '軸線顏色',
+ axis_width: '軸線寬度',
+ axis_type: '軸線類型',
+ axis_type_solid: '實線',
+ axis_type_dashed: '虛線',
+ axis_type_dotted: '點',
+ axis_label_show: '標簽顯示',
+ axis_label_color: '標簽顏色',
+ axis_label_fontsize: '標簽大小'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 3c24007e28..20ce1cabe3 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -720,7 +720,17 @@ export default {
chart_error_tips: '如有疑问请联系管理员',
title_cannot_empty: '标题不能为空',
table_title_height: '表头行高',
- table_item_height: '表格行高'
+ table_item_height: '表格行高',
+ axis_show: '轴线显示',
+ axis_color: '轴线颜色',
+ axis_width: '轴线宽度',
+ axis_type: '轴线类型',
+ axis_type_solid: '实线',
+ axis_type_dashed: '虚线',
+ axis_type_dotted: '点',
+ axis_label_show: '标签显示',
+ axis_label_color: '标签颜色',
+ axis_label_fontsize: '标签大小'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 96be52b959..8f87726180 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -81,8 +81,19 @@ export const DEFAULT_XAXIS_STYLE = {
position: 'bottom',
name: '',
axisLabel: {
+ show: true,
+ color: '#333333',
+ fontSize: '12',
rotate: 0,
formatter: '{value}'
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#cccccc',
+ width: 1,
+ style: 'solid'
+ }
}
}
export const DEFAULT_YAXIS_STYLE = {
@@ -90,8 +101,19 @@ export const DEFAULT_YAXIS_STYLE = {
position: 'left',
name: '',
axisLabel: {
+ show: true,
+ color: '#333333',
+ fontSize: '12',
rotate: 0,
formatter: '{value}'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#cccccc',
+ width: 1,
+ style: 'solid'
+ }
}
}
export const DEFAULT_BACKGROUND_COLOR = {
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index b47e0b9fe5..f4e1d15b01 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -26,12 +26,14 @@ export function componentStyle(chart_option, chart) {
chart_option.xAxis.position = customStyle.xAxis.position
chart_option.xAxis.name = customStyle.xAxis.name
chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
+ chart_option.xAxis.splitLine = customStyle.xAxis.splitLine
}
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
chart_option.yAxis.show = customStyle.yAxis.show
chart_option.yAxis.position = customStyle.yAxis.position
chart_option.yAxis.name = customStyle.yAxis.name
chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
+ chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
}
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 637f2355c6..d3b0e6c7ec 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -24,6 +24,40 @@
+
+
+ {{ $t('chart.axis_show') }}
+
+
+
+
+
+
+
+
+
+
+ {{ $t('chart.axis_type_solid') }}
+ {{ $t('chart.axis_type_dashed') }}
+ {{ $t('chart.axis_type_dotted') }}
+
+
+
+
+
+ {{ $t('chart.axis_label_show') }}
+
+
+
+
+
+
+
+
+
+
+
+
@@ -58,7 +92,8 @@ export default {
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
- isSetting: false
+ isSetting: false,
+ fontSize: []
}
},
watch: {
@@ -74,14 +109,28 @@ export default {
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
+ if (!this.axisForm.splitLine) {
+ this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+ }
}
}
}
}
},
mounted() {
+ this.init()
},
methods: {
+ init() {
+ const arr = []
+ for (let i = 10; i <= 40; i = i + 2) {
+ arr.push({
+ name: i + '',
+ value: i + ''
+ })
+ }
+ this.fontSize = arr
+ },
changeXAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
@@ -93,6 +142,9 @@ export default {