antvis / theme-set

💄 Customize theme for G2, G2Plot of AntV（孵化中）

简体中文 | English

ThemeSet

📺 网站地址 • G2 • G2Plot

AntV ThemeSet 是一款在线主题构建工具，致力于帮助使用者（工程师或设计师）快速直观定制自己的主题配置文件

💡 如何使用

G2 提供了自定义主题机制以允许用户切换、定义图表主题。利用 ThemeSet 工具，工程师或者设计师可以在线设计图表通用主题规范，然后导出或复制主题配置，直接使用 registerTheme API 进行主题定制。

G2 中使用。详见：自定义主题 | G2

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

// 方式 1:
registerTheme('newTheme', {
  // 导出或复制出来的主题配置
});
chart.theme('newTheme');

// 方式 2:
chart.theme({
  // 导出或复制出来的主题配置
});

G2Plot 中使用。详见：图表主题 | G2Plot

import { G2 } from '@antv/g2plot';

// 方式 1:
G2.registerTheme('newTheme', {
  // 导出或复制出来的主题配置
});
const plot = new Line({
  // ... 折线图的其他配置
  theme: 'newTheme',
});
// 或者
plot.update({ theme: 'newTheme' });

// 方式 2:
const plot = new Line({
  // ... 折线图的其他配置
  theme: {
    // 导出或复制出来的主题配置
  },
});
// 或者
plot.update({
  theme: {
    // 导出或复制出来的主题配置
  },
});

⌨️ 参与贡献

# 克隆仓库
git clone [email protected]:antvis/theme-set.git

# 进入文件目录
cd theme-set

# 安装依赖和开始
npm install && npm start

# Open website: http://localhost:8000

📧 联系我们

钉钉群：30233731

theme-set's Issues

G2 配置 showMarkers 不生效

https://github.com/visiky/g2plot-theme-builder/blob/ab40e854022c5b1c7a43dc4710cc7c29c88d7e91/src/components/config-panel/index.tsx#L1115-L1120

---

This issue was generated by todo based on a todo comment in ab40e85 when #4 was merged. cc @visiky.

类型定义

https://github.com/visiky/g2plot-theme-builder/blob/aceb61de6fba49a4062a83a3ae6e4967af70436b/src/pages/index.tsx#L56-L61

---

This issue was generated by todo based on a todo comment in aceb61d. It's been assigned to @undefined because they committed the code.

添加主题下载区 */}

https://github.com/visiky/g2plot-theme-builder/blob/aceb61de6fba49a4062a83a3ae6e4967af70436b/src/components/config-panel.tsx#L33-L38

---

This issue was generated by todo based on a todo comment in aceb61d. It's been assigned to @undefined because they committed the code.

增加 “辅助线虚线间隔”, lineDash

https://github.com/visiky/g2plot-theme-builder/blob/ab40e854022c5b1c7a43dc4710cc7c29c88d7e91/src/components/config-panel/index.tsx#L1111-L1116

---

This issue was generated by todo based on a todo comment in ab40e85 when #4 was merged. cc @visiky.

新增 grid.line.lineDash

https://github.com/visiky/g2plot-theme-builder/blob/ab40e854022c5b1c7a43dc4710cc7c29c88d7e91/src/components/config-panel/index.tsx#L386-L391

---

This issue was generated by todo based on a todo comment in ab40e85 when #4 was merged. cc @visiky.

执行 yarn start 报错，提示无法使用装饰器

报错内容：
experimental syntax 'decorators-legacy' isn't currently enabled

怀疑是没有锁依赖版本导致的。

解决方案：

yarn add @babel/plugin-proposal-decorators -D

在项目根目录新建配置文件 .babelrc, 然后使用下面的配置：

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [
            ">0.25%",
            "not dead"
          ]
        }
      }
    ]
  ]
}