适用于 Arco Design 的主题

Arco Design 介绍

基于 Byte Design 升级而来，能力全面的企业级产品设计系统。

ArcoDesign 的诞生

ArcoDesign 是一套设计系统的简称。

ArcoDesign 的目标, 即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题，同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。
ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由 UED 设计和开发同学共同构建及维护。

设计语言 - 务实的浪漫主义

ArcoDesign 试图建立一种工作模式

务实=同理心浪漫=想象力

首先在于务实能够通过设计系统去解决大部分需求极大提高效率解放双手。让设计师&开发能去做一些更"浪漫"即发挥创新&想象力的东西。
在产品侧我们不仅能够通过设计体系去务实的搭建基础功能，甚至可以通过它去配置一些能称得上浪漫的产品追求
浪漫与务实, 并非矛盾对立。通过对它们的定义得出设计语言的价值观, 这贯穿着整个设计语言。务实与浪漫相辅相成, 成为引导设计方向。

目前 VChart 针对 Arco Design 提供了专项适配。Arco Design 的更多信息可见 Arco 官网。

安装和使用 VChart

Arco Design 目前主要适配 React 工程。可以使用以下命令安装 react-vchart：

# 使用 npm 安装
npm install @visactor/react-vchart
# 使用 yarn 安装
yarn add @visactor/react-vchart

绘制图表以及更详细的指引详见这个教程。

适用于 Arco Design 的图表主题包

为了使 VChart 在 Arco 页面环境中获得更好的体验，VisActor 额外推出了 @visactor/vchart-arco-theme 主题包。这个包有以下特性：

开箱即用：经过简单的配置，就可以使 VChart 样式自动融入 Arco 设计语言，也会自动适配用户基于 Arco Design 自定义的主题包。
响应式：@visactor/vchart-arco-theme 支持监听页面上的亮暗模式变化以及 css 变量更新，自动对页面上的 VChart 图表的主题进行热更新。

DEMO

完整 demo 请访问此页面。

安装

https://www.npmjs.com/package/@visactor/vchart-arco-theme

# npm
npm install @visactor/vchart-arco-theme

# yarn
yarn add @visactor/vchart-arco-theme

使用

实现默认的功能，只需要在全局执行一次 initVChartArcoTheme 方法进行初始化。这个语句通常可以放在 React 项目的入口文件中。如以下示例：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './app.jsx';
import { initVChartArcoTheme } from '@visactor/vchart-arco-theme';

// initialization
initVChartArcoTheme();

const dom = document.querySelector('#root');
const root = createRoot(dom);
root.render(<App />);

initVChartArcoTheme 方法支持传入一个对象作为 option，其类型声明为：

interface IInitVChartArcoThemeOption {
  /** 初始亮暗色模式 */
  defaultMode?: 'light' | 'dark';
  /** 是否监听亮暗色模式自动更改图表主题，默认为 true */
  isWatchingMode?: boolean;
  /** arco css 变量前缀，例如：原始变量名为 --color-data-1，配置为 "arco" 后变为 --arco-color-data-1 */
  prefix?: string;
  /** 指定 ThemeManager，一般不用指定，如果遇到多版本 vchart 共存时需要指定 */
  themeManager?: typeof ThemeManager;
}

Token 映射

在图表主题的功能上，VChart 支持数据色板和语义色板的自定义配置。@visactor/vchart-arco-theme 基于这个特性实现了和 Arco Design 的结合。

数据色板

Arco Design 为 VChart 声明了数据色板对应的 token。用户可以在 DSM 自定义主题时配置以下 token，来自定义 VChart 的数据色板。VChart 图表的数据色板会自动应用这些变量，用户则不需要介入。这个功能由 @visactor/vchart-arco-theme 主题包实现。

序号	Arco Token	默认色值
1	`--color-data-1`	#4080FF
2	`--color-data-2`	#BEDAFF
3	`--color-data-3`	#55C5FD
4	`--color-data-4`	#9CDCFC
5	`--color-data-5`	#FF7D00
6	`--color-data-6`	#FFCF8B
7	`--color-data-7`	#4CD263
8	`--color-data-8`	#AFF0B5
9	`--color-data-9`	#A871E3
10	`--color-data-10`	#DDBEF6
11	`--color-data-11`	#F7BA1E
12	`--color-data-12`	#FADC6D
13	`--color-data-13`	#9FDB1D
14	`--color-data-14`	#C9E968
15	`--color-data-15`	#F979B7
16	`--color-data-16`	#FB9DC7
17	`--color-data-17`	#0FC6C2
18	`--color-data-18`	#86E8DD
19	`--color-data-19`	#E865DF
20	`--color-data-20`	#F7BAEF

这些 token 的对应颜色组成了 VChart 在 Arco 下默认的 20 色色板。

如文档 VChart 主题概念和设计规范所述，VChart 数据色板也可以是动态的、渐进式的。在一般情况下，色板会根据数据项数量的范围来动态调整。数据组不超过 10 个时，采用 10 色的色板；数据组超过 10 个时，采用 20 色的色板。如果数据组超过 20 个，则会重复应用色板颜色，从第 1 个开始。

@visactor/vchart-arco-theme 会自动从上文中的 20 色色板抽 10 个颜色形成小数据量下的 10 色色板。当前逻辑是取偶数索引的颜色，也就是说默认的 10 色色板由以下 token 对应的色值组成：

序号	Arco Token	默认色值
1	`--color-data-1`	#4080FF
3	`--color-data-3`	#55C5FD
5	`--color-data-5`	#FF7D00
7	`--color-data-7`	#4CD263
9	`--color-data-9`	#A871E3
11	`--color-data-11`	#F7BA1E
13	`--color-data-13`	#9FDB1D
15	`--color-data-15`	#F979B7
17	`--color-data-17`	#0FC6C2
19	`--color-data-19`	#E865DF