diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index 7ae99dce75..50fd49a5d3 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -340,6 +340,14 @@ declare interface ChartTableHeaderAttr {
* 表头纵边框线
*/
showVerticalBorder: boolean
+ /**
+ * 斜体
+ */
+ isItalic: boolean
+ /**
+ * 加粗
+ */
+ isBolder: boolean
}
/**
* 单元格属性
@@ -386,6 +394,14 @@ declare interface ChartTableCellAttr {
* 单元格纵边框线
*/
showVerticalBorder: boolean
+ /**
+ * 斜体
+ */
+ isItalic: boolean
+ /**
+ * 加粗
+ */
+ isBolder: boolean
}
/**
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
index be9521021d..ed73c30a07 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@@ -161,13 +161,60 @@ onMounted(() => {
/>
+
+
+
+
+
+
+ {{ t('chart.bolder') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('chart.italic') }}
+
+
+
+
+
+
+
+
+
+
+
-
-
{
padding: 0;
}
}
+.position-divider {
+ width: 1px;
+ height: 18px;
+ margin-bottom: 8px;
+ background: rgba(31, 35, 41, 0.15);
+
+ &.position-divider--dark {
+ background: rgba(235, 235, 235, 0.15);
+ }
+}
+.icon-checkbox {
+ :deep(.ed-checkbox__input) {
+ display: none;
+ }
+ :deep(.ed-checkbox__label) {
+ padding: 0;
+ }
+}
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
index 518348d91f..c1b7cdfc4d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@@ -132,14 +132,60 @@ onMounted(() => {
/>
+
+
+
+
+
+
+ {{ t('chart.bolder') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('chart.italic') }}
+
+
+
+
+
+
+
+
+
+
+
-
-
{
-
{
padding: 0;
}
}
+.position-divider {
+ width: 1px;
+ height: 18px;
+ margin-bottom: 8px;
+ background: rgba(31, 35, 41, 0.15);
+
+ &.position-divider--dark {
+ background: rgba(235, 235, 235, 0.15);
+ }
+}
+.icon-checkbox {
+ :deep(.ed-checkbox__input) {
+ display: none;
+ }
+ :deep(.ed-checkbox__label) {
+ padding: 0;
+ }
+}
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 896f342781..71d49bda2a 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -389,7 +389,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
showRowTooltip: false,
showTableHeader: true,
showHorizonBorder: true,
- showVerticalBorder: true
+ showVerticalBorder: true,
+ isItalic: false,
+ isBolder: true
}
export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableFontColor: '#000000',
@@ -401,7 +403,9 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableItemSubBgColor: '#EEEEEE',
showTooltip: false,
showHorizonBorder: true,
- showVerticalBorder: true
+ showVerticalBorder: true,
+ isItalic: false,
+ isBolder: false
}
export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
show: true,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
index 95bcc38a7b..a61a3cba4a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
@@ -285,13 +285,15 @@ export class TablePivot extends S2ChartView {
}
protected configTheme(chart: Chart): S2Theme {
const theme = super.configTheme(chart)
- const { basicStyle, tableHeader, tableCell } = parseJson(chart.customAttr)
+ const { basicStyle, tableHeader } = parseJson(chart.customAttr)
let tableHeaderBgColor = tableHeader.tableHeaderBgColor
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
}
const tableBorderColor = hexColorToRGBA(basicStyle.tableBorderColor, basicStyle.alpha)
const tableHeaderFontColor = hexColorToRGBA(tableHeader.tableHeaderFontColor, basicStyle.alpha)
+ const fontStyle = tableHeader.isItalic ? 'italic' : 'normal'
+ const fontWeight = tableHeader.isBolder === false ? 'normal' : 'bold'
const pivotTheme = {
rowCell: {
cell: {
@@ -303,22 +305,30 @@ export class TablePivot extends S2ChartView {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
textAlign: tableHeader.tableHeaderAlign,
- textBaseline: 'top'
+ textBaseline: 'top',
+ fontStyle,
+ fontWeight
},
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
- textAlign: tableHeader.tableHeaderAlign
+ textAlign: tableHeader.tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
- textAlign: tableHeader.tableHeaderAlign
+ textAlign: tableHeader.tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
seriesText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
- textAlign: tableHeader.tableHeaderAlign
+ textAlign: tableHeader.tableHeaderAlign,
+ fontStyle,
+ fontWeight
}
}
}
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index 8aff7fee25..75b944ef64 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@@ -192,6 +192,8 @@ export function getCustomTheme(chart: Chart): S2Theme {
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
}
+ const fontStyle = tableHeader.isItalic ? 'italic' : 'normal'
+ const fontWeight = tableHeader.isBolder === false ? 'normal' : 'bold'
const { tableHeaderAlign, tableTitleFontSize } = tableHeader
const tmpTheme: S2Theme = {
cornerCell: {
@@ -201,17 +203,23 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
text: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
}
},
colCell: {
@@ -221,17 +229,23 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
text: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
- textAlign: tableHeaderAlign
+ textAlign: tableHeaderAlign,
+ fontStyle,
+ fontWeight
}
}
}
@@ -278,6 +292,8 @@ export function getCustomTheme(chart: Chart): S2Theme {
if (!isAlphaColor(tableItemSubBgColor)) {
tableItemSubBgColor = hexColorToRGBA(tableItemSubBgColor, basicStyle.alpha)
}
+ const fontStyle = tableCell.isItalic ? 'italic' : 'normal'
+ const fontWeight = tableCell.isBolder === false ? 'normal' : 'bold'
const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell
const tmpTheme: S2Theme = {
rowCell: {
@@ -315,22 +331,30 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableFontColor,
textAlign: tableItemAlign,
- fontSize: tableItemFontSize
+ fontSize: tableItemFontSize,
+ fontStyle,
+ fontWeight
},
text: {
fill: tableFontColor,
textAlign: tableItemAlign,
- fontSize: tableItemFontSize
+ fontSize: tableItemFontSize,
+ fontStyle,
+ fontWeight
},
measureText: {
fill: tableFontColor,
textAlign: tableItemAlign,
- fontSize: tableItemFontSize
+ fontSize: tableItemFontSize,
+ fontStyle,
+ fontWeight
},
seriesText: {
fill: tableFontColor,
textAlign: tableItemAlign,
- fontSize: tableItemFontSize
+ fontSize: tableItemFontSize,
+ fontStyle,
+ fontWeight
}
}
}