VChart：能讲故事的图表库

VChart 在 GitHub 上拿到了 1,805 Star，是 VisActor 可视化体系中的图表组件库。

市面上图表库很多，ECharts、Chart.js、Recharts 各自占了一片地盘。VChart 选了一条不太一样的路，它把核心能力押在了"数据叙事"上。

1、跨端适配，一套规范通吃

VChart 能自动适配桌面端、H5 页面和各类小程序环境。同一份图表配置，在浏览器里能跑，在微信小程序、飞书小程序、Taro 应用中也能跑，不需要为每个平台单独适配。

架构上分了两层：上层图表逻辑基于 VGrammar 实现，底层渲染交给 VRender。抽象层做厚了，跨端就成了水到渠成的事。这种分层也让包体积控制更灵活，不同端的组件可以按需加载。

2、数据叙事：画完图之后呢

传统图表库把数据可视化做好就算交差了。VChart 多走了一步，它内置了标注系统、动画编排、叙事模板和流程控制四种能力。

标注系统可以在图表的关键节点上打标签，把"这里发生了什么"直接写进图里。动画编排不只是入场特效，还支持按叙事节奏控制播放，让读者跟着设计好的路径看数据。叙事模板把多个图表串成一个故事序列，适合做数据报告或分析演示。

这些功能瞄准的场景很明确：面向终端用户的数据产品。仪表盘、分析工具、数据看板，任何需要让非技术人员看懂数据的地方，都可以用这套叙事能力降低理解门槛。

3、安装和上手

npm install @visactor/vchart

一个简单的柱状图只需要声明式的配置：

import VChart from '@visactor/vchart';

const spec = {
  type: 'bar',
  data: [{
    id: 'barData',
    values: [
      { month: 'Monday', sales: 22 },
      { month: 'Tuesday', sales: 13 },
      { month: 'Wednesday', sales: 25 },
      { month: 'Thursday', sales: 29 },
      { month: 'Friday', sales: 38 }
    ]
  }],
  xField: 'month',
  yField: 'sales',
  crosshair: { xField: { visible: true } }
};

const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();

声明式的 DSL 写起来直观，跟 ECharts 的配置风格接近，迁移成本不高。

4、生态组件比较齐全

核心库之外，官方维护了 React、Taro、飞书小程序、微信小程序、飞书小组件等多个封装版本。还和 OMI Web Components 框架、Next.js 做了集成，Vercel 上有一个基于 VChart 和 Next.js 的仪表盘模板可以直接部署。

技术栈是 TypeScript，MIT 协议开源。npm 周下载量稳定，社区贡献者活跃。

做图的工具已经够多了，做数据故事的工具还很少。如果你在搭数据产品，需要的不只是图表渲染能力，还需要一层叙事逻辑来串联数据和分析，VChart 值得一试。

做数据故事的工具还很少。如果你在搭数据产品，需要的不只是图表渲染能力，还需要一层叙事逻辑来串联数据和分析，VChart 值得一试。