定制你的可视化设计系统

Semi DV 提供完整的主题配置流程，既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯，又能满足业务和品牌多样化的视觉需求。通过灵活的配置选项，用户可以创建与产品定位和品牌风格一致的可视化图表。

你可以前往 Semi 设计系统管理站点 （又称DSM） 创造一套符合你的需求的图表主题风格。需要额外注意的是，Semi DV的DSM系统独立于Semi基础组件DSM之外。两个子系统各自独立运行。主要的功能亮点如下：

• 定制化 用户可以根据产品需求和品牌风格在规范框架下自定义主题
• 个性化 通过配置项，用户可以调整颜色、字体、细节等元素
• 灵活性 提供多样化的配置选项，满足不同用户对主题的需求，使界面设计更具灵活性和可扩展性。

创建主题

开始创建

访问 Semi DSM, 左上角选中“数据可视化”

并点击右上角 创建设计系统按钮

初始化主题

输入主题名称和描述

本平台设计系统的使用和消费的形式为公网 NPM 包，公开可检索，在自定义配置项（主题名称、主题描述等）中请勿携带个人隐私信息。

选择主题默认模式

可选择亮色模式或暗色模式作为主题的主要模式，这个选项可以在配置面板中随时更改

关联 Semi 主题

关联后，数据可视化样式（主题色、圆角等）会和已有UI样式保持一致。后续可以单独编辑数据可视化样式

简易模式通过只配置主题色、圆角、间距、粗细等核心配置，快捷定制图表大部分元素外观。

简易模式

配置主题色

点击拾色器配置主题色，DSM 会根据主题色自动生成两套色板，一套分类色板，一套顺序色板。其中，分类色板又有两种方案。

切换色板

点击在色板之间进行切换。

分类色板：用于描述不同类别的数据，这些数据通常不需要用颜色表示其关联性，例如不同产品的售卖数量。
顺序色板：用于描述数据的连续性或顺序性，通常根据颜色的亮度、色调或两者的组合，来表示数据的大小或顺序，例如地图上的人口密度。

高级模式

高级模式允许精确对图表的特定元素和颜色进行调整，适合高度定制化的图表主题需求。

全局

颜色

点击左侧一级菜单中的 Token，并点击二级菜单切换到 颜色

设置主色与模式

色板分为分类色板和顺序色板，使用场景与简单模式中的分类色板与顺序色板相同。点击设为默认来切换分类色板与顺序色板。

切换主色

点击拾色器设置主色，所有的色板都会重新计算颜色，谨慎操作

切换分类色板模式

点击下拉框，切换分类色板方案

设置功能色板

高级模式允许按照功能区定义颜色，定义的颜色不会直接作用于表格，但可在元素定制面板中选中定义的颜色，当该颜色修改时，所有用到该颜色的地方均会自动同步。

字体

点击二级菜单的字体面板，进入全局字体配置页。配置的字体可在元素和图表一级页面在精确修改图元属性时进行消费

点击右侧字体设置属性

圆角

点击二级菜单的圆角面板，进入全局圆角配置页。配置的圆角可在元素和图表一级页面在精确修改图元属性时进行消费

点击右侧圆角设置属性

间距

点击二级菜单的间距面板，进入全局间距配置页。配置的间距可在元素和图表一级页面在精确修改图元属性时进行消费

点击右侧间距设置属性

线段

点击二级菜单的线段面板，进入全局线段配置页。配置的线段可在元素和图表一级页面在精确修改图元属性时进行消费

点击右侧线段设置属性，可设置线段粗细与线段虚线间距

• 粗细

• 虚线间距

动画

点击二级菜单的动画面板，进入全局动画配置页。配置的动画可在元素和图表一级页面在精确修改图元属性时进行消费

点击右侧动画设置属性，可设置动画时长与动画延迟

• 时长

• 延迟

元素配置

可配置的元素包括图表的标题、直角坐标系（ X 轴及 Y 轴）、极坐标系（半径轴及角度轴）、分散图例、提示信息、十字准星。

图表标题

支持配置标题及副标题的可见性、字体以及颜色。

直角坐标系

支持配置 X 轴及 Y 轴的标题、标签、线、轴刻度、网格线。

• 标题：字体、颜色、位置、间距
• 标签：字体、颜色、间距
• 轴线：宽度、颜色、线样式、端点样式
• 轴刻度/子刻度：宽度、颜色、线样式
• 网格线/子网格线: 宽度、颜色、线样式

极坐标系

支持引用直角坐标系设置，开启引用后，半径轴将使用 X 轴的配置，角度轴将使用 Y 轴的配置。

也支持单独设置半径轴及角度轴设置。具体配置项同直角坐标系。

分散图例

支持配置分散图例的标题，图例项的文本、数值、间距、以及图例位置，鼠标悬停态，未选中图例的透明度。

• 标题：字体、颜色、位置、间距
• 图例项的文本及数值：字体、颜色
• 间距：不同图例项间距（横向/纵向）、图形和文本间距、文本和数值间距
• 图例位置：位置、间距
• 鼠标悬停态：图例背景色
• 未选中态：图形、文本、数值透明度

提示信息

支持配置背景面板、标题、数据项（文本/数值）、各项间距以及交互动画。

• 背景面板：背景色、面板内边距、边框宽度、边框颜色
• 标题：字体、颜色
• 数据项（文本/数值）：字体、颜色
• 间距：不同数据项间距、图形和文本间距、文本和数值间距

十字准星

支持配置十字准星的线形辅助线、矩形辅助线的线、矩形及标签。

• 线： 线宽、颜色、样式
• 标签：字体、颜色、背景色、背景圆角、内边距

图表配置

支持不同图表的配置。包括柱状图、折线图、面积图、饼图、漏斗图。

对于不同类型图表，显示区域展示该类型图表的多种形态，实时显示配置效果。

柱状图

支持配置柱状图的柱样式、标签、图例及动效。

• 柱：宽度、最大最小宽度、间距、圆角、柱组间距、组内柱间距、柱边框宽度
• 标签：字体、颜色、背景色、背景圆角、内边距
• 图例：图例位置、间距
• 动效：入场更新动效、数据更新动效。包含延迟时间、过渡曲线、持续时间

折线图

支持配置线、数据点、标签、图例以及动效

• 线：线宽、曲线类型
• 数据点：形状、大小、颜色、描边
• 图例，动效：同柱状图

面积图

支持配置线、面积、数据点、标签、图例以及动效

• 线: 线宽、曲线类型
• 面积：透明度、渐变色、描边宽度、描边颜色
• 数据点：形状、大小、颜色、描边
• 标签：字体、颜色、描边颜色、位置
• 图例，动效：同柱状图

饼图

支持配置扇形、标签、图例和动效

• 扇形：内外半径、圆角、起始角度、边框宽度
• 标签：字体、颜色、描边颜色、位置
• 图例，动效：同柱状图

漏斗图

支持配置漏斗图的漏斗层、转化层、漏斗层内标签、转化层内标签、外标签、图例及动效。

• 漏斗层：最大/最小宽度、圆角、层间距、描边宽度
• 转化层：颜色、描边宽度、描边颜色、描边样式
• 漏斗层内标签/转化层内标签：字体、颜色、描边
• 外标签：字体、颜色、描边、引导线（宽度、颜色，样式）
• 图例，动效：同柱状图

发布主题

当我们完成了所有 Token 样式配置后，就可以通过 Semi DSM 将配置的主题进行发布了。 主题将会被发布至 npm 上，发布后，前端项目可下载接入并应用，Figma Plugin 可以进行下发同步配置。

在发布之前，我们需要填写以下信息

• 主题包名
  • 在 npm 上发布的具体包名，默认均以 @semi-bot/semi-theme-vchart- 前缀开头，你可以定制后面的名称（不允许与已有主题重复）
• 主题 npm 版本号
  • 前端 npm 包的版本号，一般为 x.y.z （均为数字）格式，建议遵循 Semver 规范
  • 若你是设计角色，对 Web 前端的 npm 包规范不了解，此处可不填，将由系统自动生成。每次发版时，自动递归生成（默认会递增 minor 版本）
• 支持的 Semi 版本号
  • 支持该主题包的最低 Semi 版本，默认会基于当前操作时刻 Semi 的最新稳定版本。Semi 组件库仍在频繁迭代，根据实际需求，我们可能会增加或删除某些 Token，因此主题包需要与 Semi 组件版本进行对应。
• Release Note
  • 本次发布的变更说明。建议填入你本次修改的主要内容。例如：'修改 primary 色阶；定制了 Select的样式'

完成上述信息填写后，我们可以正式进行发布主题包，发布完成后，就可以直接在项目中一键接入使用了。

在项目中引入主题包内主题

// vchart 亮色
import vchartLight from "@ies/semi-vchart-theme-test/light.json"
// vchart 暗色
import vchartDark from "@ies/semi-vchart-theme-test/dark.json"

主题包也内置了 导出的 Echarts 主题，但 Echarts 不能完全支持主题中的所有配置，不推荐使用。

注册主题

在 vcharts 项目中注册你需要的主题

import VChart from '@visactor/vchart';

VChart.ThemeManager.registerTheme("myLightTheme", vchartLight);

// apply a theme
VChart.ThemeManager.setCurrentTheme('myLightTheme');

其它问题可以参考 Vcharts 主题消费文档

关于 Echarts 使用主题请参考 Echarts 文档