数据可视化：在 React 项目中使用 Vega 图表 (一)

相关包

打开搜索引擎，一搜 Vega，发现相关的包有好几个，Vega, Vega-Lite, Vega-Embed，React-Vega 等等，不免让人头晕。

别急，它们之间的关系三四句话就能说明白，以下是极简介绍：

• Vega：一套数据可视化的语法。它强大、灵活。用 JSON 描述配置，以 Canvas 或者 SVG 出图。
• Vega-Lite：一套描述 Vega 配置的语法。它简易、快速。同样使用 JSON，其结果可以编译为 Vega 版本的配置。
• Vega-Embed：一个可以让你在 web 项目中使用 Vega、 Vega-Lite 的工具。
• React-Vega: 顾名思义，可以让你在 React 项目中使用 Vega、 Vega-Lite 的工具。

Vega-Lite 是描述 Vega 语法的高阶语法（有点类似 React 高阶组件的概念），它短平快的风格可以让你迅速上手，但与 Vega 相比有一些功能上的限制。

在实际使用中，可以先通过 Vega-Lite 快速把想法实现为图表，再在其编译的 Vega 版配置结果上进一步修改，增加复杂功能。

项目案例

现在网上已经有一些用 Vega 实现柱状图（bar chart）的文章，本文将主要介绍如何在 React 项目中用 Vega-Lite 语法实现一个 area chart。

图表

基本图表

制作一个 area chart，表现国庆七天假期内的用户数量变化。

(可以粘贴到 Vega editor 中)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "mark": {"type": "area", "color": "#0084FF", "interpolate": "monotone"},
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "timeUnit": "yearmonthdate",
      "axis": {"title": "Date"}
    },
    "y": {
      "field": "active_users",
      "type": "quantitative",
      "axis": {"title": "Active Users"}
    },
    "opacity": {"value": 1}
  },
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {"active_users": 0, "date": "2019-10-01"},
      {"active_users": 2, "date": "2019-10-02"},
      {"active_users": 0, "date": "2019-10-03"},
      {"active_users": 1, "date": "2019-10-04"},
      {"active_users": 0, "date": "2019-10-05"},
      {"active_users": 0, "date": "2019-10-06"},
      {"active_users": 1, "date": "2019-10-07"}
    ]
  },
  "config": {}
}

Y 轴显示整数

看到这里，有人会问了，这什么产品这么惨，才这么点活跃用户数？
这里数据量写小是为了凸显 y 轴显示的问