9102 年,蚂蚁金服前端是怎么写图表的?
相信很多开发者都有过被图表搞得很抓狂瞬间:业务压力大,想快速上个图表,折腾半天配出来却丑的不能看;Demo 里明明看着很美,换成真实数据立刻变成买家秀了..... 很长一段时间里,这些问题也在困扰着蚂蚁的前端,写个轻量级图表,怎么就那么难? 为了让图表开发过程变得更加简单、愉悦,蚂蚁金服可视化团队结合阿里经济体内外 20000+ 业务系统和日均千万级 UV 产品中提炼出来的业务场景和图表需求,提炼出一套通用统计图表库—G2Plot。 有了它,蚂蚁金服前端使用图表的日常是这样的: 前端小K今天收到了一个时间比较紧的业务需求 — 在系统快速搭建一个面板,用图表展示某个产品的销售情况。小K跟 PD 过了一下,决定使用G2Plot比较经典的面积图、条形图、环图这三个图表类型。 美丽直观的面积图 面积图是小K要制作的第一个图表,他将使用堆叠面积图来展现多个指标的时间变化趋势。 Step1: 引入图表类型 import { StackArea } from '@antv/g2plot'; Step2: 准备数据 G2Plot 的数据源格式是 JSON 数组,数组的每个元素是一个标准 J...