图表库G2的调研_专栏_易百纳技术社区

图表库G2的调研

最近要做一个监控的功能，设计到很多花里胡哨的图标，老大让调研一下用那些图表库。于是调研了一番主流的图表库，echart，G2，D3。。。
最后，身为打工人的我被大佬指定用G2，没办法。之前用的都是echart，学一下吧。

官方的介绍

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

该库的特征

💯 完善的图形语法：数据到图形的映射，能够绘制出所有的图表。
🤩 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。
🦍 强大的 View 模块：可支持开发个性化的数据多维分析图形。
👬 双引擎渲染：Canvas 或 SVG 任意切换。
💄 可视化组件体系：面向交互、体验优雅。
🛡 全面拥抱 TypeScript：提供完整的类型定义文件。

其中两个东西比较重要，一个是图形语言，一个是交互语法

图形语法

图形语法是个很复杂的东西，包含的面很多，如：数据 Data，图形属性 Attribute，几何标记 Geometry，度量 Scale，坐标系 Coordinate，可视化组件 Component，分面 Facet。用官方的话就是 G2 所构建出的图表是由一系列独立的图形语法元素组合而成的，包括数据、图形属性、几何标记、度量、坐标系、可视化组件、分面等

抛开那些复杂难以理解的术语，我们可将图形语法简单理解为，图形语法是把一个图表拆分成，点，线，面，角度，数据，坐标系等多个维度组成一个图形。我们要制作一个图表，只要将其中的点，线，面，确定了，分别设置出来，那么一个图表就完成了。这个思路和echart的配置大相径庭，差别很大。

交互语法

在 G2 中，一个交互行为是由一系列交互环节组成，而每一个交互环节又由以下两部分组成：

触发，交互环节的触发，包括触发对象和触发事件
反馈，交互环节的结果

先看一个例子

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>曲线折线图</title>
</head>

<body>
  <div id="container" />
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.1/dist/g2.min.js"></script>

  <script>
    const data = [
      { month: 'Jan', city: 'Tokyo', temperature: 7 },
      { month: 'Jan', city: 'London', temperature: 3.9 },
      { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
      { month: 'Feb', city: 'London', temperature: 4.2 },
      { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
      { month: 'Mar', city: 'London', temperature: 5.7 },
      { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
      { month: 'Apr', city: 'London', temperature: 8.5 },
      { month: 'May', city: 'Tokyo', temperature: 18.4 },
      { month: 'May', city: 'London', temperature: 11.9 },
      { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
      { month: 'Jun', city: 'London', temperature: 15.2 },
      { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
      { month: 'Jul', city: 'London', temperature: 17 },
      { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
      { month: 'Aug', city: 'London', temperature: 16.6 },
      { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
      { month: 'Sep', city: 'London', temperature: 14.2 },
      { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
      { month: 'Oct', city: 'London', temperature: 10.3 },
      { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
      { month: 'Nov', city: 'London', temperature: 6.6 },
      { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
      { month: 'Dec', city: 'London', temperature: 4.8 },
    ];

    const chart = new G2.Chart({
      container: 'container',
      autoFit: true,
      height: 500,
    });

    chart.data(data);
    chart.scale({
      month: {
        range: [0, 1],
      },
      temperature: {
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart.axis('temperature', {
      label: {
        formatter: (val) => {
          return val + ' °C';
        },
      },
    });

    chart
      .line()
      .position('month*temperature')
      .color('city')
      .shape('smooth');

    chart
      .point()
      .position('month*temperature')
      .color('city')
      .shape('circle');

    chart.render();
  </script>
</body>

</html>

这是一个很常规的折线图，效果图是这样的。

简单分析一下js的代码

在html中引入js<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.1/dist/g2.min.js"></script>后，使用G2类来创建图表

第一步创建 Chart 对象
```
const chart = new G2.Chart({
container: 'container',
autoFit: true,
height: 500,
});
```
使用构造函数，传入存放图表容器的id，铺满的模式，以及高度。在纯html中，是使用new G2.Chart()去构建一个G2图表，如果是用npm，则是import { Chart } from '@antv/g2'; .... new Chart()
第二步载入数据源
chart.data(data); 使用data方法，将数组data传入。
第三步创建图形语法，绘制柱状图
chart.interval() 区间
chart.scale() 度量
chart.line() 线
chart.point() 点
chart.axis() 坐标轴
chart.tooltip() 辅助信息
第四步渲染图表
chart.render()