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(() => { /> + + + + + + +
+ + + +
+
+
+
+ + + + + +
+ + + +
+
+
+
+ +
- - { 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(() => { /> +
+ + + + + +
+ + + +
+
+
+
+ + + + +
+ + + +
+
+
+
+ +
- - {
- { 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 } } }