介绍 Semi DV

• Semi DV 是基于 字节跳动开源可视化解决方案 VChart 的底层能力，所封装的一套符合Semi Design风格的可视化解决方案。
• VChart 基于可视化语法库 VGrammar 和渲染引擎VRender 进行封装，在满足数据呈现的同时，还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格，简单易用的配置大大降低了用户的学习成本。

相关文档：

• DSM 链接：https://semi.design/dsm (字节跳动用户请替换域名为内网域名)
• VChart GitHub 链接：https://github.com/VisActor/VChart
• VChart 官网链接：https://visactor.io/vchart

安装和使用 VChart

在 React 工程中，可以使用以下命令安装 react-vchart：

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

绘制图表以及更详细的指引详见：https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react

定制主题

访问 Semi DSM, 左上角选中“数据可视化”, 并点击右上角 创建设计系统按钮

关于配置主题的更详细使用文档请参考【创建主题】

在 Figma 中使用主题

安装 Figma 插件 即可选中主题并在设计稿上绘制带有主题的图表

在研发项目使用主题

安装主题包

假设你的主题包名为@ies/semi-vchart-theme-test，主题包由设计师在 DSM 上配置完主题后发布，请向设计师询问主题包名称

npm install @ies/semi-vchart-theme-test
# 或
yarn add @ies/semi-vchart-theme-test

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

// 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 文档