Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme): 主题 Token #3361

Merged
merged 6 commits into from
Apr 21, 2021
Merged

feat(theme): 主题 Token #3361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ae6ee40
feat(theme): 主题提供连续色板配置
visiky Apr 6, 2021
f48ba04
test(theme): add test cases about sequenceColors
visiky Apr 7, 2021
8689d0f
feat: 主题添加辅助色 & 透出语义色 & 添加辅助色 demo
visiky Apr 19, 2021
7ac0a0a
chore: 升级官网主题版本
visiky Apr 19, 2021
3ae7e89
feat(theme): 增加 slider 的主题设置
visiky Apr 19, 2021
365e6e7
fix: 修复 cr 问题
visiky Apr 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 1 addition & 94 deletions docs/api/advanced/register-theme.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,97 +3,4 @@ title: 自定义主题
order: 4
---

G2 提供了自定义主题机制以允许用户切换、定义图表主题。包括：

1. 定义全新的主题结构
2. 使用主题样式表，实现主题的快速定制

## 定义全新的主题结构

```typescript
import { registerTheme, Chart } from '@antv/g2';

// Step 1: 注册主题
registerTheme('newTheme', {
defaultColor: 'red',
});

// Step 2: 使用
chart.theme('newTheme');
chart.render();
```

### 主题属性

下表列出了组成主题的大配置项上的具体属性：

| **主题属性** | **类型** | **描述** |
| :---------------------: | :------: | :---------------------------------------------------------------------: |
| `defaultColor`  | string | 主题色 |
| `padding` | number | number[] | 'auto' | chart padding 配置，默认为 'auto' |
| `fontFamily` | string | 图表字体 |
| `colors10` | string[] | 分类颜色色板，分类个数小于 10 时使用 |
| `colors20` | string[] | 分类颜色色板，分类个数大于 10 时使用 |
| `columnWidthRatio` | number | 一般柱状图宽度占比，0 - 1 范围数值 |
| `maxColumnWidth` | number | 柱状图最大宽度，像素值 |
| `minColumnWidth` | number | 柱状图最小宽度，像素值 |
| `roseWidthRatio` | number | \_玫瑰图占比，\_0 - 1 范围数值 |
| `multiplePieWidthRatio` | number | \_多层饼图/环图占比，\_0 - 1 范围数值 |
| `shapes` | object | 配置每个 geometry 映射的 shape 类型 |
| `sizes` | number | 配置 geometry 映射 size 范围 |
| `geometries` | object | 配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式 |
| `components` | object | 配置坐标轴，图例，tooltip, annotation 的主题样式 |
| `labels` | object  | 配置 Geometry 下 label 的主题样式 |
| `innerLabels` | object | 配置 Geometry 下展示在图形内部的 labels 的主题样式 |
| `pieLabels` | object | 配置饼图 labels 的主题样式 |

关于以上每个属性的结构及内容，详见[G2 主题配置项详解](./dive-into-theme)。

## 自定义主题（传入样式表配置）

对于图表主题，很多时候只是想切换样式风格，比如更改颜色、字体大小、边框粗细等，并不需要更改主题结构，这个时候就可以通过传入样式表配置来自定义主题，然后应用于默认的主题结构即可。

主要用于主题色的快速切换，比如

```ts
// 使用
chart.theme({
styleSheet: {
paletteQualitative10: [
'#025DF4',
'#DB6BCF',
'#2498D1',
'#BBBDE6',
'#4045B2',
'#21A97A',
'#FF745A',
'#007E99',
'#FFA8A8',
'#2391FF',
],
},
});
```

支持的样式表属性：

| **属性** | **类型** | **描述** |
| ----------------------- | -------- | ------------- |
| `backgroundColor` | _string_ | 背景色 |
| `brandColor` | _string_ | 主题色，默认取 10 色分类颜色色板的第一个颜色 |
| `paletteQualitative10` | _string_ | 分类颜色色板，分类个数小于 10 时使用 |
| `paletteQualitative20` | _string_ | 分类颜色色板，分类个数大于 10 时使用 |
| `paletteSemanticRed` | _string_ | 语义红色 |
| `paletteSemanticGreen` | _string_ | 语义绿色 |
| `paletteSemanticYellow` | _string_ | 语义黄色 |
| `fontFamily` | _string_ | 字体 |

## 内置暗黑主题

**使用方式:**

```ts
chart.theme('dark');
```

<img src="https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*-xWWTaMWrGEAAAAAAAAAAABkARQnAQ" style="width:100%;">
`markdown:docs/api/advanced/register-theme.zh.md`
60 changes: 31 additions & 29 deletions docs/api/advanced/register-theme.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,26 @@ chart.render();

下表列出了组成主题的大配置项上的具体属性：

| **主题属性** | **类型** | **描述** |
| :---------------------: | :------: | :---------------------------------------------------------------------: |
| `defaultColor`  | string | 主题色 |
| `padding` | number | number[] | 'auto' | chart padding 配置，默认为 'auto' |
| `fontFamily` | string | 图表字体 |
| `colors10` | string[] | 分类颜色色板，分类个数小于 10 时使用 |
| `colors20` | string[] | 分类颜色色板，分类个数大于 10 时使用 |
| `columnWidthRatio` | number | 一般柱状图宽度占比，0 - 1 范围数值 |
| `maxColumnWidth` | number | 柱状图最大宽度，像素值 |
| `minColumnWidth` | number | 柱状图最小宽度，像素值 |
| `roseWidthRatio` | number | \_玫瑰图占比，\_0 - 1 范围数值 |
| `multiplePieWidthRatio` | number | \_多层饼图/环图占比，\_0 - 1 范围数值 |
| `shapes` | object | 配置每个 geometry 映射的 shape 类型 |
| `sizes` | number | 配置 geometry 映射 size 范围 |
| `geometries` | object | 配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式 |
| `components` | object | 配置坐标轴，图例，tooltip, annotation 的主题样式 |
| `labels` | object  | 配置 Geometry 下 label 的主题样式 |
| `innerLabels` | object | 配置 Geometry 下展示在图形内部的 labels 的主题样式 |
| `pieLabels` | object | 配置饼图 labels 的主题样式 |
| **主题属性** | **类型** | **描述** |
| :---------------------: | :----------------: | :---------------------------------------------------------------------: |
| `defaultColor`  | string | 主题色 |
| `padding` | number \| number[] | chart padding 配置，默认为 'auto' |
| `fontFamily` | string | 图表字体 |
| `colors10` | string[] | 分类颜色色板，分类个数小于 10 时使用 |
| `colors20` | string[] | 分类颜色色板，分类个数大于 10 时使用 |
| `sequenceColors` | string[] | 单色连续色板 |
| `columnWidthRatio` | number | 一般柱状图宽度占比，0 - 1 范围数值 |
| `maxColumnWidth` | number | 柱状图最大宽度，像素值 |
| `minColumnWidth` | number | 柱状图最小宽度，像素值 |
| `roseWidthRatio` | number | \_玫瑰图占比，\_0 - 1 范围数值 |
| `multiplePieWidthRatio` | number | \_多层饼图/环图占比，\_0 - 1 范围数值 |
| `shapes` | object | 配置每个 geometry 映射的 shape 类型 |
| `sizes` | number | 配置 geometry 映射 size 范围 |
| `geometries` | object | 配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式 |
| `components` | object | 配置坐标轴，图例，tooltip, annotation 的主题样式 |
| `labels` | object  | 配置 Geometry 下 label 的主题样式 |
| `innerLabels` | object | 配置 Geometry 下展示在图形内部的 labels 的主题样式 |
| `pieLabels` | object | 配置饼图 labels 的主题样式 |

关于以上每个属性的结构及内容，详见[G2 主题配置项详解](./dive-into-theme)。

Expand Down Expand Up @@ -77,16 +78,17 @@ chart.theme({

支持的样式表属性：

| **属性** | **类型** | **描述** |
| ----------------------- | -------- | ------------- |
| `backgroundColor` | _string_ | 背景色 |
| `brandColor` | _string_ | 主题色，默认取 10 色分类颜色色板的第一个颜色 |
| `paletteQualitative10` | _string_ | 分类颜色色板，分类个数小于 10 时使用 |
| `paletteQualitative20` | _string_ | 分类颜色色板，分类个数大于 10 时使用 |
| `paletteSemanticRed` | _string_ | 语义红色 |
| `paletteSemanticGreen` | _string_ | 语义绿色 |
| `paletteSemanticYellow` | _string_ | 语义黄色 |
| `fontFamily` | _string_ | 字体 |
| **属性** | **类型** | **描述** |
| ----------------------- | ---------- | -------------------------------------------- |
| `backgroundColor` | _string_ | 背景色 |
| `brandColor` | _string_ | 主题色，默认取 10 色分类颜色色板的第一个颜色 |
| `paletteQualitative10` | _string[]_ | 分类颜色色板，分类个数小于 10 时使用 |
| `paletteQualitative20` | _string[]_ | 分类颜色色板，分类个数大于 10 时使用 |
| `paletteSemanticRed` | _string_ | 语义红色 |
| `paletteSemanticGreen` | _string_ | 语义绿色 |
| `paletteSemanticYellow` | _string_ | 语义黄色 |
| `paletteSequence` | _string[]_ | 单色连续色板 |
| `fontFamily` | _string_ | 字体 |

## 内置暗黑主题

Expand Down
22 changes: 10 additions & 12 deletions examples/bar/basic/demo/radial-bar-with-background.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,40 @@ const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
theme: 'dark',
});
chart.data(data);

chart.axis(false);
chart.tooltip({
showMarkers: false,
});
chart.coordinate('theta', { innerRadius: 0.35 });
chart.coordinate('theta', { innerRadius: 0.35, radius: 0.75 });
chart.legend(false);
const { colors10, subColor } = chart.getTheme();

chart
.interval({
background: { style: { fill: '#F0F0F0', fillOpacity: 1 }},
background: { style: { fill: subColor, fillOpacity: 1 } },
})
.position('type*value')
.color('type', (val) => {
const { colors10 } = chart.getTheme();
if (val === '10-30分' || val === '30+分') {
return '#ff4d4f';
}
return colors10[0];
})
.style({
lineCap: 'round',

});
chart.theme({
maxColumnWidth: 12,
minColumnWidth: 12,
})
chart.interaction('element-active')

chart.interaction('element-active');
chart.annotation().html({
position: ['50%', '50%'],
html: () => {
return `<div style="transform:translate(-50%,-50%)">
<img alt="" width="100" height="80" src="https://gw.alipayobjects.com/mdn/rms_ef85c6/afts/img/A*0DYiQKP08cQAAAAAAAAAAAAAARQnAQ">
</div>`
}
})
</div>`;
},
});
chart.render();
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
},
"devDependencies": {
"@antv/data-set": "^0.11.2",
"@antv/gatsby-theme-antv": "^1.0.4",
"@antv/gatsby-theme-antv": "^1.1.2",
"@babel/core": "^7.13.1",
"@babel/preset-env": "^7.13.0",
"@commitlint/cli": "^8.2.0",
Expand Down
52 changes: 52 additions & 0 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1797,6 +1797,8 @@ export interface StyleSheet {
backgroundColor?: string;
/** 主题色 */
brandColor?: string;
/** 辅助色 */
subColor?: string;
/** 分类色板 1，在数据量小于等于 10 时使用 */
paletteQualitative10?: string[];
/** 分类色板 2，在数据量大于 10 时使用 */
Expand All @@ -1807,6 +1809,8 @@ export interface StyleSheet {
paletteSemanticGreen?: string;
/** 语义色 */
paletteSemanticYellow?: string;
/** (单色)顺序色板 */
paletteSequence?: string[];
/** 字体 */
fontFamily?: string;

Expand Down Expand Up @@ -2067,6 +2071,52 @@ export interface StyleSheet {
/** Geometry label 文本连接线颜色 */
labelLineBorderColor?: string;

// -------------------- Slider 组件样式--------------------
/** slider 滑道高度 */
cSliderRailHieght?: number;
/** slider 滑道背景色 */
cSliderBackgroundFillColor?: string;
/** slider 滑道背景色透明度 */
cSliderBackgroundFillOpacity?: number;
/** slider 滑道前景色 */
cSliderForegroundFillColor?: string;
/** slider 滑道前景色透明度 */
cSliderForegroundFillOpacity?: number;

// slider handlerStyle 手柄样式
/** slider 手柄高度 */
cSliderHandlerHeight?: number;
/** Slider 手柄宽度 */
cSliderHandlerWidth?: number;
/** Slider 手柄背景色 */
cSliderHandlerFillColor?: string;
/** Slider 手柄背景色透明度 */
cSliderHandlerFillOpacity?: number;
/** Slider 手柄高亮背景色 */
cSliderHandlerHighlightFillColor?: string;
/** Slider 手柄边框色 */
cSliderHandlerBorderColor?: string;
/** Slider 手柄边框粗细 */
cSliderHandlerBorder?: number;
/** Slider 手柄边框圆角 */
cSliderHandlerBorderRadius?: number;

// slider textStyle 字体标签样式
/** Slider 字体标签颜色 */
cSliderTextFillColor?: string;
/** Slider 字体标签透明度 */
cSliderTextFillOpacity?: number;
/** Slider 字体标签大小 */
cSliderTextFontSize?: number;
/** Slider 字体标签行高 */
cSliderTextLineHeight?: number;
/** Slider 字体标签字重 */
cSliderTextFontWeight?: number | string;
/** Slider 字体标签描边色 */
cSliderTextBorderColor?: string;
/** Slider 字体标签描边粗细 */
cSliderTextBorder?: number;

// -------------------- Geometry 图形样式--------------------
/** 点图的大小范围 */
pointSizeRange?: [number, number];
Expand Down Expand Up @@ -2342,12 +2392,14 @@ export interface StyleSheet {
export type StyleSheetCfg = Pick<
StyleSheet,
| 'backgroundColor'
| 'subColor'
| 'brandColor'
| 'paletteQualitative10'
| 'paletteQualitative20'
| 'paletteSemanticRed'
| 'paletteSemanticGreen'
| 'paletteSemanticYellow'
| 'paletteSequence'
| 'fontFamily'
>;

Expand Down
Loading