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），仅供参考 Semi DV 图表主题定制与接入指南：为 VChart 数据可视化注入 Semi Design 设计语言
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），仅供参考