diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts index ef17aa4e3b..1eb86691f3 100644 --- a/packages/s2-core/src/common/interface/theme.ts +++ b/packages/s2-core/src/common/interface/theme.ts @@ -97,7 +97,9 @@ export interface TextAlignCfg { textBaseline?: TextBaseline; } -export interface TextTheme extends TextAlignCfg { +export interface TextTheme + extends TextAlignCfg, + Pick { /* 字体 */ fontFamily?: string; /* 字体大小 */ diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md index 35d551fe8d..ae1df30d2b 100644 --- a/s2-site/docs/api/general/S2Theme.zh.md +++ b/s2-site/docs/api/general/S2Theme.zh.md @@ -149,6 +149,8 @@ s2.setTheme({ | fontFamily | 字体 | `string` | `Roboto, PingFangSC,`
`BlinkMacSystemFont,`
`Microsoft YaHei,`
`Arial, sans-serif` | | | fontSize | 字体大小 | `number` | - | | | fontWeight | number
string: `normal`
`bold`
`bolder`
`lighter` 字体粗细 | `number` \| `string` | 粗体文本:Mobile:`520` PC: `bold`
普通文本:`normal` | | +| fontStyle | 字体样式 | `normal \| italic \| oblique` | `normal` | +| fontVariant | 字体变体 | `normal \| small-caps \| string` | `normal` | | fill | 字体颜色 | `string` | - | | | linkTextFill | 链接文本颜色 | `string` | - | | | opacity | 字体透明度 | `number` | 1 | | diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md index 7c92aff545..8fb20a7e90 100644 --- a/s2-site/docs/api/graphic.zh.md +++ b/s2-site/docs/api/graphic.zh.md @@ -47,6 +47,8 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图 | fontSize | `number` | 文字大小 | | fontFamily | `string` | 文字字体 | | fontWeight | `number` | 字体粗细 | +| fontStyle | `normal \| italic \| oblique` | 字体样式 | +| fontVariant | `normal \| small-caps \| string` | 字体变体 | | lineHeight | `number` | 文字的行高 | | textAlign | `center` \| `left` \| `right` \| `start` \| `end` | 设置文本内容的对齐方式 | | textBaseline | `top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging` | 设置在绘制文本时使用的当前文本基线| diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts b/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts new file mode 100644 index 0000000000..b61659a5d8 --- /dev/null +++ b/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts @@ -0,0 +1,42 @@ +import { PivotSheet, CornerCell } from '@antv/s2'; + +fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', +) + .then((res) => res.json()) + .then((res) => { + const container = document.getElementById('container'); + const s2DataConfig = { + fields: { + rows: ['province', 'city'], + columns: ['type', 'sub_type'], + values: ['number'], + }, + meta: res.meta, + data: res.data.map((item, i) => { + return { + ...item, + number: i < 5 ? item.number : null, + }; + }), + }; + const s2Options = { + width: 600, + height: 480, + // 默认 "-" + // placeholder: '', + placeholder: (cell) => { + // 或者根据当前单元格动态设置 + console.log('cell: ', cell); + if (cell.cellType === 'dataCell') { + return '*****'; + } + + // 返回 null, 使用默认值 ("-") + return null; + }, + }; + const s2 = new PivotSheet(container, s2DataConfig, s2Options); + + s2.render(); + }); diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json index 05f3f82822..0da90cfb49 100644 --- a/s2-site/examples/custom/custom-cell/demo/meta.json +++ b/s2-site/examples/custom/custom-cell/demo/meta.json @@ -83,6 +83,14 @@ "en": "custom mini chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "data-cell-placeholder.ts", + "title": { + "zh": "自定义空数据单元格占位符", + "en": "custom cell placeholder" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original" } ] }