+ 
+
+
+数据色板是在图表中用于区分数据组的离散色板，也通常用于区分图例项。如以下两个图表中不同数据组的色板，在颜色队列中按顺序取色：
+
+
+
+
+
+如以上规则，数据组不超过 10 个时，采用 10 色的色板；数据组超过 10 个时，采用 20 色的色板。如果数据组超过 20 个，则会重复应用色板颜色，从第 1 个开始。
+
+### 语义色板
+
+VChart 默认主题定义了一套语义色板，用于描述可以复用的颜色。语义色板的形式为从 token 到色值的映射表。
+
+默认主题预设了一套 token，并根据这套 token 实现了亮色主题和暗色主题。下表以 1.6.3 版本为准：
+
+分类 |
+ 序号 |
+ token（默认主题的语义色板） |
+ 描述、应用范围和默认色值 |
+ 实际 case（截图来自默认主题真实图表） |
+
图表层级样式 |
+ 1 |
+
+
|
+
+ 背景色 +用于图表背景、图元描边。 ++ + light + + #ffffff + + + dark + + #202226 + + + |
+
+ 图表背景色 +
+ |
+
|
+ point 图元描边颜色 +
+ |
+ ||||
|
+ 数据标签描边颜色 +
+ |
+ ||||
|
+ 播放器滑块描边颜色 +
+ |
+ ||||
2 |
+
+
|
+
+ 图表边框色 +用于图表边框（图表内暂时没有实际应用，仅有指导意义）。 ++ + light + + #e3e5e8 + + + dark + + #404349 + + + |
+
+ 图表边框色 +
+ |
+ |
公共 |
+ 3 |
+
+
|
+
+ 默认阴影颜色 +用于浮层、滑块等带高度属性的图元阴影。 ++ + light + + rgba(33,37,44,0.1) + + + dark + + rgba(0,0,0,0.1) + + + |
+
+ 提示信息阴影颜色 +
+ |
+
|
+ poptip 阴影颜色 +
+ |
+ ||||
|
+ 颜色图例滑块阴影颜色 +
+ |
+ ||||
4 |
+
+
|
+
+ 鼠标 Hover 背景颜色 +用于元素在鼠标 hover 状态的背景颜色。 ++ + light + + #f1f2f5 + + + dark + + #404349 + + + |
+
+ 图例项 hover 背景色 +
+ |
+ |
5 |
+
+
|
+
+ 滑块类组件背景条填充颜色 +用于滑块类组件背景条的填充颜色。 ++ + light + + #f1f3f4 + + + dark + + #404349 + + + |
+
+ 缩略轴背景区域颜色 +
+ |
+ |
|
+ 播放器未播放轨道颜色 +
+ |
+ ||||
|
+ 颜色图例轨道颜色 +
+ |
+ ||||
|
+ 尺寸图例轨道颜色 +
+ |
+ ||||
6 |
+
+
|
+
+ 滑块类组件滑块填充颜色 +用于滑块类组件滑块的填充颜色。 ++ + light + + #ffffff + + + dark + + #202226 + + + |
+
+ 缩略轴滑块填充颜色 +
+ |
+ |
|
+ 尺寸图例滑块填充颜色 +
+ |
+ ||||
7 |
+
+
|
+
+ 滑块类组件已选范围填充颜色 +用于滑块类组件已选范围的填充颜色。 ++ + light + + #0040ff + + + dark + + #4284FF + + + |
+
+ 缩略轴选择区域颜色 +
+ |
+ |
|
+ 播放器已播放轨道颜色 +
+ |
+ ||||
|
+ 尺寸图例选中部分轨道颜色 +
+ |
+ ||||
8 |
+
+
|
+
+ 浮层背景区域颜色 +用于浮层的背景区域颜色。 ++ + light + + #ffffff + + + dark + + #404349 + + + |
+
+ 提示信息背景框颜色 +
+ |
+ |
|
+ poptip 背景框颜色 +
+ |
+ ||||
字体颜色 |
+ 9 |
+
+
|
+
+ 主要字色 +颜色和背景色差异最大的字色，用于最显要的信息展示。 ++ + light + + #21252c + + + dark + + #fdfdfd + + + |
+
+ 图表主标题字色 +
+ |
+
|
+ 指标卡主要字色 +
+ |
+ ||||
|
+ poptip 标题字色 +
+ |
+ ||||
|
+ poptip 内容字色 +
+ |
+ ||||
|
+ 提示信息标题字色 +
+ |
+ ||||
|
+ Mark-line 标签字色 +
+ |
+ ||||
|
+ Mark-area 标签字色 +
+ |
+ ||||
|
+ 图例标题字色 +
+ |
+ ||||
10 |
+
+
|
+
+ 次要字色 +颜色和背景色差异较小的字色，用于次要的信息展示。 ++ + light + + #606773 + + + dark + + #888c93 + + + |
+
+ 轴标题字色 +
+ |
+ |
|
+ 图例标签字色 +
+ |
+ ||||
|
+ 提示信息数据 key 字色 +
+ |
+ ||||
|
+ 缩略轴标签字色 +
+ |
+ ||||
11 |
+
+
|
+
+ 第三字色 +颜色和背景色差异更小的字色，用于更次要的信息展示。 ++ + light + + #89909d + + + dark + + #bbbdc3 + + + |
+
+ 图表副标题字色 +
+ |
+ |
|
+ 指标卡次要字色 +
+ |
+ ||||
12 |
+
+
|
+
+ 轴标签字色 +用于轴标签字色，默认与第三字色颜色相同。 ++ + light + + #89909d + + + dark + + #bbbdc3 + + + |
+
+ 轴标签字色 +
+ |
+ |
13 |
+
+
|
+
+ 禁用字色 +用于禁用状态字色或非激活态字色。 ++ + light + + #bcc1cb + + + dark + + #55595f + + + |
+
+ 非激活态图例标签字色 +
+ |
+ |
14 |
+
+
|
+
+ 轴高亮标记字色 +用于轴标签上的高亮标记字色。 ++ + light + + #ffffff + + + dark + + #202226 + + + |
+
+ 十字准星标签字色 +
+ |
+ |
轴样式 |
+ 15 |
+
+
|
+
+ 轴网格线颜色 +用于轴网格线颜色以及同级的颜色。 ++ + light + + #f1f2f5 + + + dark + + #404349 + + + |
+
+ 轴网格线颜色 +
+ |
+
|
+ 十字准星矩形颜色 +
+ |
+ ||||
16 |
+
+
|
+
+ 轴线颜色 +用于轴线颜色以及同级的颜色。 ++ + light + + #d9dde4 + + + dark + + #4b4f54 + + + |
+
+ 轴线颜色 +
+ |
+ |
缩略轴 |
+ 17 |
+
+
|
+
+ 缩略轴滑块描边颜色 +用于缩略轴滑块描边颜色以及同级的颜色。 ++ + light + + #aeb5be + + + dark + + #888c93 + + + |
+
+ 缩略轴滑块描边颜色 +
+ |
+
18 |
+
+
|
+
+ 缩略轴图表区域颜色 +用于缩略轴预览图表的颜色以及同级的颜色。 ++ + light + + #c9ced8 + + + dark + + #55595F + + + |
+
+ 缩略轴图表区域颜色 +
+ |
+ |
|
+ 尺寸图例尺寸标识颜色 +
+ |
+ ||||
播放器 |
+ 19 |
+
+
|
+
+ 播放器控制器填充颜色 +用于播放器控制器的填充颜色。 ++ + light + + #0040ff + + + dark + + #0040ff + + + |
+
+ 播放器按钮颜色 +
+ |
+
|
+ 播放器滑块颜色 +
+ |
+ ||||
滚动条 |
+ 20 |
+
+
|
+
+ 滚动条滑块颜色 +用于滚动条滑块的填充颜色。 ++ + light + + rgba(0,0,0,0.3) + + + dark + + rgba(255,255,255,0.3) + + + |
+
+ 滚动条滑块颜色 +
+ |
+
标注 |
+ 21 |
+
+
|
+
+ 轴高亮标记背景色 +用于轴标签上的高亮标记背景色。 ++ + light + + #21252c + + + dark + + #fdfdfd + + + |
+
+ 十字准星标签背景色 +
+ |
+
22 |
+
+
|
+
+ 标注标签背景颜色 +用于普通标注标签的背景颜色。 ++ + light + + #f1f2f5 + + + dark + + #404349 + + + |
+
+ Mark-line 标签背景色 +
+ |
+ |
|
+ Mark-area 标签背景色 +
+ |
+ ||||
23 |
+
+
|
+
+ 标注线颜色 +用于普通标注线的颜色。 ++ + light + + #606773 + + + dark + + #888c93 + + + |
+
+ Mark-line 线条颜色 +
+ |
+ |
|
+ 十字准星线形颜色 +
+ |
+ ||||
|
+ Mark-point 线条颜色 +
+ |
+ ||||
功能色 |
+ 24 |
+
+
|
+
+ 危险色 +危险、错误、失败、盈利、上升、女性。 ++ + light + + #e33232 + + + dark + + #eb4b4b + + + |
+ 无内置应用场景 |
+
25 |
+
+
|
+
+ 警告色 +预警、警示。 ++ + light + + #ffc528 + + + dark + + #f0bd30 + + + |
+ 无内置应用场景 |
+ |
26 |
+
+
|
+
+ 成功色 +安全、正确、成功、亏损、下降。 ++ + light + + #07a35a + + + dark + + #14b267 + + + |
+ 无内置应用场景 |
+ |
27 |
+
+
|
+
+ 信息色 +正常、寒冷、男性。 ++ + light + + #3073f2 + + + dark + + #4284ff + + + |
+ 无内置应用场景 |
+
+
+同时，字号和行间距在官方主题中分为以下 6 阶：
+
+字阶 |
+ 字重 |
+ 字号 |
+ 行高（仅作指导意义） |
+ 字间距（仅作指导意义） |
+ 应用范围（截图来自实际图表） |
+
|
+ 1 + |
+ Medium |
+ 32px |
+ 1.5 |
+ -0.5 |
+
+ 指标卡标题 +
+ |
+
|
+ 2 + |
+ Medium |
+ 20px |
+ 1.4 |
+ -0.4 |
+
+ 指标卡内容 +
+ |
+
|
+ 3 + |
+ Medium |
+ 16px |
+ 1.5 |
+ -0.2 |
+
+ 图表标题 +
+ |
+
|
+ 4（默认） + |
+ Medium |
+ 14px |
+ 1.5 |
+ 0 |
+
+ 数据标签 +
+ |
+
|
+ Mark-line 标签 +
+ |
+ |||||
|
+ Mark-area 标签 +
+ |
+ |||||
|
+ 提示信息 +
+ |
+ |||||
|
+ 图表副标题 +
+ |
+ |||||
|
+ 5 + |
+ Regular |
+ 12px |
+ 1.3 |
+ 0 |
+
+ poptip +
+ |
+
|
+ 图例标题 +
+ |
+ |||||
|
+ 图例标签 +
+ |
+ |||||
|
+ 颜色图例标签 +
+ |
+ |||||
|
+ 尺寸图例标签 +
+ |
+ |||||
|
+ 缩略轴标签 +
+ |
+ |||||
|
+ 十字准星标签 +
+ |
+ |||||
|
+ 轴标题 +
+ |
+ |||||
|
+ 轴标签 +
+ |
+ |||||
|
+ 一些其他系列的标签，如：时序图、旭日图、矩形树图、嵌套圆图系列等 + |
+ |||||
|
+ 6 + |
+ Regular |
+ 10px |
+ 1.2 |
+ 0 |
+
+ 地图标签 + |
+
+
+
+
+
+
+
+
+目前默认主题中高频组件的布局参数如下：
+
+|
+ 图表元素（组件） + |
+
+ 位置和对齐 + |
+
+ 边距（padding） + |
+
+ 示例 + |
+
|
+ 图表整体 + |
+
+ 无 + |
+
+
|
+
+
+ |
+
|
+ 标题 + |
+
+ top，左对齐 + |
+
+
|
+
+ |
|
+ 离散图例 + |
+
+ bottom，居中对齐 + |
+
+
|
+
+ |
|
+ 缩略轴 + |
+
+ 跟随轴 + |
+
+
|
+
+
+ |
+
|
+ 颜色图例 + |
+
+ right，竖直居中对齐 + |
+
+
|
+
+
+ |
+
|
+ 尺寸图例 + |
+
+ right，竖直居中对齐 + |
+
+
|
+
+
+ |
+
|
+ 播放器 + |
+
+ bottom，左对齐 + |
+
+
|
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+