Semi DV 图表主题定制与接入指南为 VChart 数据可视化注入 Semi Design 设计语言【免费下载链接】semi-designA modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.Provide 3000 Design Tokens, easy to build your design system. Make Semi Design to Any Design. Design to Code in one click项目地址: https://gitcode.com/gh_mirrors/se/semi-designSemi DVSemi Data Visualization是 Semi Design 设计体系中的图表主题定制与数据可视化解决方案它以字节跳动开源的 VChart 为底层能力将其封装为符合 Semi Design 风格的图表体系。通过本文你将掌握在 Semi DV 的两种配置模式简易模式 / 高级模式下创建并发布图表主题、在 React 项目中安装与注册 VChart 主题以及在 Figma 设计稿中直接使用主题图表的完整实战流程。Semi DV 是什么Semi DV 是一套建立在 VChart 之上的数据可视化解决方案其核心价值在于让图表能力与 Semi Design 的设计语言保持一致。官方文档将其定位为“built on top of ByteDances open-source library VChart, packaged with styles that match the Semi Design system”见 content/show/chart/index-en-US.md。这意味着开发者不需要从零搭建图表样式体系而是在 Semi 既定的视觉规范之上通过主题配置快速获得风格统一、又可个性化调整的图表。Semi DV 支持图表主题配置帮助用户在保障页面 UI 整体性的同时灵活实现个性化视觉表达。技术底座VChart、VGrammar 与 VRenderSemi DV 并非重新发明轮子其底层技术栈清晰透明依据 content/show/chart/index-en-US.mdVChart字节跳动开源的声明式可视化库负责图表整体能力包括数据呈现、面向叙事场景的动画编排、丰富的交互能力与定制化的图表风格VGrammar可视化语法库为 VChart 提供底层图表描述与语法能力VRender渲染引擎负责最终绘制与渲染。在这个技术栈之上Semi DV 的定位是“主题层”不改变 VChart 的语法与能力边界而是通过主题Theme机制将 Semi Design 的视觉 Token颜色、字体、圆角、间距、线条、动画等注入图表使图表与页面 UI 浑然一体。两种配置模式简易模式与高级模式Semi DV 提供两种递进式的主题配置模式覆盖从“快速上手”到“像素级精细控制”的全部需求简易模式Simple Mode面向大多数常规场景只需调整少量视觉开关即可生成一套图表主题主题色theme colors设定图表的主色基调色板palette选择预置的配色方案决定系列数据的默认配色圆角corner radius控制柱状图、卡片等元素的圆角风格间距spacing控制图表内部元素之间的距离节奏线条粗细line thickness控制坐标轴、折线等线型元素的视觉重量。高级模式Advanced Mode面向对视觉有精细要求的场景支持从底层向上逐层定制官方文档将其划分为三个层级基础 Token颜色、字体、圆角、间距、线段、动画元素elements标题、坐标轴、图例、交互元素图表charts柱状图、折线图、面积图、饼图、漏斗图等具体图表类型。这种“Token → 元素 → 图表”的三层架构意味着你可以先定义全局基础令牌再针对某类元素或某个图表单独覆写实现“全局统一、局部精调”的配置体验满足精细化配置需求。创建并发布图表主题创建主题的入口在 Semi 的创建设计系统Design System Creation页面进入设计系统列表后点击“创建图表设计系统”Create a chart design system按钮即可开始。完成配置后一键发布即可将主题推送到 npm。也就是说主题包的生产者通常是设计师设计师在 Semi DV 上完成视觉配置发布后开发者只需像安装普通 npm 包一样接入即可。这一流程将设计与研发通过 npm 包这一标准载体打通是 Semi DV“Design to Code”链路在数据可视化方向的具体落地。在项目中接入主题从开发者的角度看接入一套由设计师发布的 Semi DV 主题只需要三步安装 VChart、安装主题包、注册并启用主题。第一步安装 VChartSemi DV 面向 React 场景推荐使用官方 React 封装# 使用 npm 安装 npm install visactor/react-vchart # 使用 yarn 安装 yarn add visactor/react-vchart第二步安装主题包主题包由设计师在 Semi DV 上配置完主题后发布到 npm具体包名需向设计师确认。假设主题包名为ies/semi-vchart-theme-test安装命令如下npm install ies/semi-vchart-theme-test # 或 yarn add ies/semi-vchart-theme-test第三步引入主题主题包内通常同时包含亮色与暗色两套主题的 JSON 定义文件分别对应 VChart 的 light 与 dark 体系// VChart light theme亮色主题 import vchartLight from ies/semi-vchart-theme-test/light.json; // VChart dark theme暗色主题 import vchartDark from ies/semi-vchart-theme-test/dark.json;第四步注册并启用主题通过 VChart 的ThemeManager完成注册与切换import VChart from visactor/vchart; VChart.ThemeManager.registerTheme(myLightTheme, vchartLight); // 启用主题 VChart.ThemeManager.setCurrentTheme(myLightTheme);这里有两个关键 API 语义值得说明ThemeManager.registerTheme(name, theme)将导入的 JSON 主题对象注册到 VChart 的主题管理器中name是自定义的主题标识如myLightThemeThemeManager.setCurrentTheme(name)将已注册的主题设为当前生效主题。如果需要暗色模式可以按同样的方式注册vchartDark再根据应用的实际明暗状态调用setCurrentTheme进行切换从而实现图表与页面整体明暗模式的联动。从仓库源码看 Semi 与 VChart 的生态衔接在本仓库中Semi 官网自身即示范了 Semi DV 主题体系的代码级用法。在 src/templates/scope.js 中可以找到如下导出export { VChart } from visactor/react-vchart; export { initVChartSemiTheme } from visactor/vchart-semi-theme;这从侧面印证了两点visactor/react-vchart是官方推荐的 React 接入方式与文档中的安装命令一致visactor/vchart-semi-theme提供了initVChartSemiTheme这一编程式初始化入口说明除了“设计师发布 JSON 主题包”这一流程外还存在通过visactor/vchart-semi-theme包在代码中初始化 Semi 风格 VChart 主题的路径。对于希望直接以代码方式获得 Semi 风格默认主题、而不依赖设计系统发布流程的团队这是一个值得关注的补充方案。此外在 content/ecosystem/changelog/index.md 的更新记录中可以看到“新增 VChart 图表介绍”的演进轨迹说明数据可视化主题能力是 Semi 官网持续跟进维护的方向。在 Figma 中使用图表主题除了代码接入Semi DV 还打通了设计侧的工作流。设计师可以安装 Semi 的 Figma 插件详见 content/advanced/design-source/index-en-US.md在插件中选择已配置好的图表主题直接在设计稿上绘制带有主题样式的图表。这样一来同一套主题资产可以在“设计稿预览”与“线上代码渲染”两个环节复用避免设计与最终效果之间的视觉偏差进一步压缩设计与研发之间的沟通成本。总结Semi DV 的完整工作流可以概括为一条清晰的链路设计师在 Semi DV 中配置主题简易/高级模式→ 一键发布 npm 主题包 → 开发者安装 VChart 与主题包 → 引入 light/dark JSON 并注册启用 → 设计侧通过 Figma 插件同步预览主题图表。对于希望保持图表与整体 UI 风格一致的团队这套方案提供了一条低成本、标准化的路径底层能力由 VChart、VGrammar、VRender 保障主题由 Semi 设计 Token 体系驱动而发布与接入则完全复用 npm 生态。需要说明的是主题包的生成依赖设计师通过 Semi DV 在线完成配置其确切的包名与 JSON 结构以设计师发布的结果为准本文给出的ies/semi-vchart-theme-test与light.json/dark.json为官方文档中的示例约定实际接入时请以真实主题包为准。【免费下载链接】semi-designA modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.Provide 3000 Design Tokens, easy to build your design system. Make Semi Design to Any Design. Design to Code in one click项目地址: https://gitcode.com/gh_mirrors/se/semi-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
clean-code-guard 注释与排版规范：基于 Clean Code 第 4、5 章的代码质量守则实战 clean-code-guard 注释与排版规范：基于 Clean Code 第 4、5 章的代码质量守则实战 【免费下载链接】agentic-awesome-skills AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and pla… · 2026/9/24 13:44:23
Eventyay 支持文档项目教程 Eventyay 支持文档项目教程 【免费下载链接】open-event-documentation Archived documentation 项目地址: https://gitcode.com/gh_mirrors/su/open-event-documentation
1. 项目的目录结构及介绍
Eventyay 支持文档项目的目录结构如下：
support.eventyay… · 2026/9/24 13:44:23
embassy-boot-stm32：为 STM32 构建断电安全的 A/B 分区固件引导加载器 嵌入式物联网异步编程 【免费下载链接】embassy Modern embedded framework, using Rust and async. 项目地址： https://gitcode.com/gh_mirrors/em/embassy 点击查看 免费下载 embassy-boot-stm32 是 Embassy 异步嵌入式框架中面向 STM32 微控制器的引导加载器适配… · 2026/9/24 13:44:23
RISC-V电视主控Hi3731V110：系统架构与整机方案设计实践 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 15:10:27
OOMWOO 驱动轮逆向标定：Roborock S5 单通道霍尔编码器、190:1 减速箱与里程计参数的实证推导 智能硬件机器人嵌入式物联网 【免费下载链接】oomwoo Open-source vacuum robot cleaner 项目地址： https://gitcode.com/gh_mirrors/oo/oomwoo 点击查看 免费下载 本文是 OOMWOO 开源扫地机器人项目中 contributions/part-specs/OsakaTX/vacuumtiger-verified-spe… · 2026/9/24 15:10:27
Objective-C 2.0 ANTLR 4 文法：单步与双步预处理解析架构实战指南 编程语言编译器开发工具 【免费下载链接】grammars-v4 Grammars written for ANTLR v4; expectation that the grammars are free of actions. 项目地址： https://gitcode.com/gh_mirrors/gr/grammars-v4 点击查看 免费下载 导读
本指南围绕 grammars-v4 仓库中的… · 2026/9/24 15:10:08
cleos validate signatures 命令详解：EOS 交易签名验证与公钥恢复实战 区块链 【免费下载链接】eos An open source smart contract platform 项目地址： https://gitcode.com/gh_mirrors/eo/eos 点击查看 免费下载 本指南完整讲解 EOS 节点工具 cleos 中 validate signatures 子命令的用法、参数与底层实现。该命令不依赖钱包、不上链… · 2026/9/24 15:10:08
Yii 2 框架设计决策指南：路径别名、消息翻译、异常处理等 8 项核心约定及其源码依据 后端Web框架 【免费下载链接】yii2 Yii 2: The Fast, Secure and Professional PHP Framework 项目地址： https://gitcode.com/gh_mirrors/yi/yii2 点击查看 免费下载 导读：本文基于 Yii 2 框架内部文档 design-decisions.md（波兰语版&#… · 2026/9/24 15:10:08
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
