自定义主题

阅读时间约 2 分钟

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

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

👉 可以尝试下在线主题构建工具:ThemeSet

定义全新的主题结构

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

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

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

主题属性

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

主题属性类型描述
defaultColor string主题色
paddingnumber | number[]chart padding 配置,默认为 'auto'
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
sequenceColorsstring[]单色连续色板
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber_玫瑰图占比,_0 - 1 范围数值
multiplePieWidthRationumber_多层饼图/环图占比,_0 - 1 范围数值
shapesobject配置每个 geometry 映射的 shape 类型
sizesnumber配置 geometry 映射 size 范围
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject 配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

关于以上每个属性的结构及内容,详见G2 主题配置项详解

自定义主题(传入样式表配置)

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

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

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

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string[]分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string[]分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
paletteSequencestring[]单色连续色板
fontFamilystring字体

内置暗黑主题

使用方式:

chart.theme('dark');