9102 年，蚂蚁金服前端是怎么写图表的?

相信不少开发者都有过被图表搞得很抓狂瞬间：业务压力大，想快速上个图表，折腾半天配出来却丑的不能看；Demo 里明明看着很美，换成真实数据马上变成买家秀了..... 很长一段时间里，这些问题也在困扰着蚂蚁的前端，写个轻量级图表，怎么就那么难？

为了让图表开发过程变得更加简单、愉悦，蚂蚁金服可视化团队结合阿里经济体内外 20000+ 业务系统和日均千万级 UV 产品中提炼出来的业务场景和图表需求，提炼出一套通用统计图表库— G2Plot。

有了它，蚂蚁金服前端使用图表的平常是这样的：

前端小K今天收到了一个时间比较紧的业务需求 — 在系统快速搭建一个面板，用图表展现某个产品的销售状况。小K跟 PD 过了一下，决定使用 G2Plot 比较经典的面积图、条形图、环图这三个图表类型。

美丽直观的面积图

面积图是小K要制做的第一个图表，他将使用 堆叠面积图 来展示多个指标的时间变化趋势。

Step1: 引入图表类型

import { StackArea } from '@antv/g2plot';复制代码

Step2: 准备数据

G2Plot 的数据源格式是 JSON 数组，数组的每一个元素是一个标准 JSON 对象。

下面这份数据描述了 2016年-2018 年，每一个地区每季度的销售额。展现空间有限，仅以一个季度为例展现数据样本。

const data = [
  { time: '2018季1', area: '东北', value: 190567 },
  { time: '2018季1', area: '华北', value: 80122 },
  { time: '2018季1', area: '华东', value: 223720 },
  { time: '2018季1', area: '西北', value: 157845 },
  { time: '2018季1', area: '中南', value: 60343 },
  { time: '2018季1', area: '西南', value: 98810 },
];复制代码

Step3: 生成图表   挂载数据源，使用数据中的 'time' 字段做为 X 轴，'value' 字段做为 Y 轴，以 'area' 字段将数据分组并堆叠。

const area = new StackArea(
  document.getElementById('area-container'), // 获取图表容器
  {
    data,
    xField: 'time',
    yField: 'value',
    stackField: 'area'
  } // 图表配置项
);
area.render();复制代码

Done!   只须要7行代码！AntV 强大的设计体系加持下，能够看到默认渲染出的图表质量已经至关高了。

不太小K是个精益求精的前端，他还要对图表的一些细节作进一步优化：

step4: 加个标题

为图表添加 标题和描述 可以帮助用户更直观的得到图表要表达的主题信息。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area'
});
area.render();复制代码

step5: 坐标轴优化

正待完工之际，PD 和设计师一齐表示他们还有话要说。两人都以为图表Y轴有优化空间：设计师认为 Y 轴的刻度太密，4 个刻度在视觉上比较美观，而 PD 以为 Y 轴的标签用千分位显示更标准。面对这些需求，小K表示本身情绪稳定。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area',
  yAxis: {
    tickCount: 4,
    label: {
      formatter: (v) => {
        return Math.floor(v / 1000) + 'k';
      },
    },
  },
});
area.render();复制代码

完工，只须要不到 20行 代码，轻松生成堆叠面积图。

言简意赅的条形图

接下来要制做的第二个图表是 堆叠条形图 ，它将用来展现各产品品类在地区间的销量对比。生成图表的前置步骤跟堆叠面积图同样，咱们直接来到核心环节：

引入图表类型：

import { StackBar } from '@antv/g2plot';复制代码

生成图表：挂载数据源，配置标题，指定数据中的 'count' 字段做为 X 轴，'area' 字段做为 Y 轴，以 'cat' 字段进行堆叠。一些影响体验的小细节已经默认作好： 图形标签显示空间不够时自动隐藏、根据底色自动调整字体颜色以保证可读性等等。

const bar = new StackBar(document.getElementById('bar-container'), {
  data,
  xField: 'count',
  yField: 'area',
  stackField: 'cat',
});
bar.render();复制代码

更换色板：

设计师认为这个图表比较的是品类数据，而不是地区数据，因此在色彩上不该该跟堆叠面积图使用一个色板。没有问题，换色板也很轻松：

color: ['#945fb9', '#1e9493', '#ff9845']复制代码

灵活生动的环图

环图 是本次小K要制做的最后一个图表，中心的镂空部分和可以与图形交互的指标卡是它的优点所在。

引入图表类型：

import { Ring } from '@antv/g2plot';复制代码

生成图表：指定数据中的 'bill' 字段决定环图的切片大小，'area' 字段决定切片的颜色。

const ring = new Ring(document.getElementById('ring-container'), {
  data,
  angleField: 'bill',
  colorField: 'area',
});复制代码

加入环图中心的指标卡：

triggerOn 配置项定义了指标卡与图形联动的方式。

statistic:{
  visible: true,
    triggerOn:'mouseenter'
  }
});复制代码

至此，小K的图表面板制做完成了，使用 G2Plot 只用了不到 50 行代码。省下的时间学点东西打个游戏撸撸猫很差吗？

G2Plot 一直以开源的方式持续迭代，除了服务蚂蚁金服众多业务以外，还但愿这套通过企业级场景打磨锤炼出的图表库可以帮助更多的人解决制做图表的痛点问题。

最后

关于 G2Plot 的更多技术细节、详细进展，请经过如下途径关注咱们👇。也欢迎你们来给点点 Star，让更多人看到这个开源项目：

• GitHub：github.com/antvis/g2pl…
• 官网：antv-g2plot.gitee.io/zh