diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index eec352dc43..5b0dee7a33 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1024,7 +1024,12 @@ export default {
chart_table_pivot: 'Pivot Table',
table_pivot_row: 'Data Row',
field_error_tips: 'This field is changed(Include dimension、quota,field type,deleted),please edit again.',
- table_border_color: 'Border Color'
+ table_border_color: 'Border Color',
+ table_header_align: 'Header Align',
+ table_item_align: 'Body Align',
+ table_align_left: 'Left',
+ table_align_center: 'Center',
+ table_align_right: 'Right'
},
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 5326010421..9a027ee2a9 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1024,7 +1024,12 @@ export default {
chart_table_pivot: '透視表',
table_pivot_row: '數據行',
field_error_tips: '該字段所對應的數據集原始字段發生變更(包括維度、指標,字段類型,字段被刪除等),建議重新編輯',
- table_border_color: '邊框顏色'
+ table_border_color: '邊框顏色',
+ table_header_align: '表頭對齊方式',
+ table_item_align: '表格對齊方式',
+ table_align_left: '左對齊',
+ table_align_center: '居中',
+ table_align_right: '右對齊'
},
dataset: {
sheet_warn: '有多個 Sheet 頁,默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 457e03810f..6c56cafdc1 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1026,7 +1026,12 @@ export default {
chart_table_pivot: '透视表',
table_pivot_row: '数据行',
field_error_tips: '该字段所对应的数据集原始字段发生变更(包括维度、指标,字段类型,字段被删除等),建议重新编辑',
- table_border_color: '边框颜色'
+ table_border_color: '边框颜色',
+ table_header_align: '表头对齐方式',
+ table_item_align: '表格对齐方式',
+ table_align_left: '左对齐',
+ table_align_center: '居中',
+ table_align_right: '右对齐'
},
dataset: {
sheet_warn: '有多个 Sheet 页,默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 0da2d37248..df770bd6e8 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -34,6 +34,8 @@ export const DEFAULT_SIZE = {
tablePageSize: '20',
tableColumnMode: 'custom',
tableColumnWidth: 100,
+ tableHeaderAlign: 'left',
+ tableItemAlign: 'right',
gaugeMin: 0,
gaugeMax: 100,
gaugeStartAngle: 225,
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 4f5fed19ca..4ffed26eeb 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -5,6 +5,9 @@ export function getCustomTheme(chart) {
const headerColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
const itemColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
+ const headerAlign = DEFAULT_SIZE.tableHeaderAlign
+ const itemAlign = DEFAULT_SIZE.tableItemAlign
+
const theme = {
background: {
color: '#00000000'
@@ -21,11 +24,13 @@ export function getCustomTheme(chart) {
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
}
},
rowCell: {
@@ -36,11 +41,13 @@ export function getCustomTheme(chart) {
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
}
},
colCell: {
@@ -51,11 +58,13 @@ export function getCustomTheme(chart) {
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableTitleFontSize
+ fontSize: DEFAULT_SIZE.tableTitleFontSize,
+ textAlign: headerAlign
}
},
dataCell: {
@@ -66,7 +75,8 @@ export function getCustomTheme(chart) {
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
- fontSize: DEFAULT_SIZE.tableItemFontSize
+ fontSize: DEFAULT_SIZE.tableItemFontSize,
+ textAlign: itemAlign
}
}
}
@@ -109,14 +119,26 @@ export function getCustomTheme(chart) {
// size
if (customAttr.size) {
const s = JSON.parse(JSON.stringify(customAttr.size))
+ const h_a = s.tableHeaderAlign ? s.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
+ const i_a = s.tableItemAlign ? s.tableItemAlign : DEFAULT_SIZE.tableItemAlign
+
theme.cornerCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+ theme.cornerCell.bolderText.textAlign = h_a
theme.cornerCell.text.fontSize = parseInt(s.tableTitleFontSize)
+ theme.cornerCell.text.textAlign = h_a
+
theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+ theme.rowCell.bolderText.textAlign = h_a
theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
+ theme.rowCell.text.textAlign = h_a
+
theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+ theme.colCell.bolderText.textAlign = h_a
theme.colCell.text.fontSize = parseInt(s.tableTitleFontSize)
+ theme.colCell.text.textAlign = h_a
theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+ theme.dataCell.text.textAlign = i_a
}
}
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index ccc4dbd7d1..07330a78f6 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -101,6 +101,16 @@
+
+
+
+
+
+
+
+
+
+
@@ -302,7 +312,12 @@ export default {
{ name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
{ name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
],
- fontSize: []
+ fontSize: [],
+ alignOptions: [
+ { name: this.$t('chart.table_align_left'), value: 'left' },
+ { name: this.$t('chart.table_align_center'), value: 'center' },
+ { name: this.$t('chart.table_align_right'), value: 'right' }
+ ]
}
},
watch: {
@@ -344,6 +359,9 @@ export default {
this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
+
+ this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
+ this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
}
}
},