G2 怎么设置暗色主题样式

Question

G2 官方网站的绝大多数在线 DEMO 都是白色背景的样式，而在一些例如大屏等炫酷的场景，我们可能需要使用暗色主题。如下图所示：

做法非常简单，G2 官网内置有两套主题，一套是默认的亮色，一套是上图的暗色。有两种方式可以设置主题：

实例化图表传入

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

const chart = new Chart({
  container: 'container',
  /* ... */
  theme: 'dark', // 使用暗色主题
});

使用 API 去设置主题

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

const chart = new Chart({/* ... */});

chart.theme('dark');

以上两种方式均可，任意使用，效果是一模一样的。

总结一下

对于第二种，使用 API 的方式，还可以传入一个 theme object 做自定义。更多的信息，可以去 官网看 Theme 教程 。如果需要自定义业务主题样式，可以看下一个问题 如何自定义业务主题样式.md 。