阿里巴巴图表库 Bizcharts 正式开源

写在前面

阿里巴巴于去年开放了它的内部图表库 Bizcharts 第一版，在这一年的时间里，Bizcharts 新增了许多特性，并对渲染细节及渲染性能进行大幅度的调优。

本文将简单的介绍阿里开源图表库 Bizcharts，主要分为如下几个方面：

1. 它的由来

2. 适合什么业务场景？

3. 如何使用？

4. 将来的规划

它的由来？

目前阿里基本上绝大部分业务的前端用的都是 React 技术栈，而在业务场景中又常常会有图表绘制的需求，因此一个 基于 React 技术栈的图表库 就显得很是必要，而在阿里内部又有像 G2 这样很是强大的图表底层引擎，因此在该引擎之上作一层封装是一件很天然而然的事情，而 Bizcharts 就是基于 G2 引擎的 React 版本的封装。

Bizcharts 的语法设计很是贴切 React 的使用方式，图表的各个部分都拆分红了独立的 React 类，如：<Tooltip /> 表明提示信息， <Axis /> 表明坐标轴。 全部图表的配置项皆为组件的 props 。

Bizcharts 在最新的 3.x 版本中，支持 Canvas 及 SVG 两种模式的图表渲染。若是单就图表库的视角来看，选择 Canvas 和 SVG 各有千秋，Bizcharts 两种方式都支持，适用于各类复杂的业务场景。

Bizcharts 在阿里内部多个部门多条业务线里反复打磨了两年之久后，于去年年末对外开源。在开源的半年时间里，作了大量的迭代优化，如今功能及性能已经作了大量的优化，很是推荐在正式环境使用。

适合什么业务场景？

阿里内部的业务很是复杂：电商业务，后台系统，业务大屏等等，这些业务对图表都有大量定制化的需求，并不是简单的折线图柱状图就能知足，这也决定了 Bicharts 其中一个特性：支持自由定制化。同时，上文也介绍了阿里 95% 以上的业务前端用的都是 React 技术栈，因此总的来讲 Bizcharts 适用的业务场景是『使用React 技术栈并有图表绘制需求场景』，从这个角度来讲，Bizcharts 适用的业务场景是很是广的。相较于 Echarts 图表框架的高度封装，Bizcharts 能知足更多业务定制化需求。

如何使用？

Bizcharts 的 API 为 React 量身定制，使用起来就像搭积木的感受通常。下面咱们以画一个基础的柱状图为例讲解：

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';

// 数据源
const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];

// 定义度量
const cols = {
  sold: { alias: '销售量' }, // 数据字段别名映射
  genre: { alias: '游戏种类' }
};

// 渲染图表
ReactDOM.render((
  <Chart width={600} height={400} data={data} scale={cols}>
    {/* X 轴 */}
    <Axis name="genre" />
    {/* Y 轴 */}
    <Axis name="sold" />
    <Legend position="top" dy={-20} />
    <Tooltip />
    <Geom type="interval" position="genre*sold" color="genre" />
  </Chart>
), document.getElementById('mountNode'));

下图是上述代码片断的渲染结果：

图表的每一块都是一个组件，须要什么就加什么，使用起来很是方便，不再用担忧产品经理需求实现不了了。

将来的规划

Bizcharts 自己自带了大量的 Demo，能够知足绝大部分的通用使用场景，使用的时候，只须要把 Demo 中的数据替换成本身业务中的数据便可，但即使如此，也没法彻底覆盖到高度定制化的场景。固然，使用 Bizcharts 的用户能够经过查阅 官网 API 文档 来实现需求，但这样无形中加大了用户的学习成本。由于可能整个网站上只有一个简单的折现图，并且时间很是紧，须要快速实现，这个时候让用户去学习一个类库/框架的使用是很是蛋疼的。

根据上述状况，Bizcharts 接下来会推出一款产品：Chartmaker。简单来说，它可以帮助你可视化的配置出你想要的图表：所见即所得，同时还能输出代码。有了 Chartmaker 后，就可以帮助数据可视化小白用户快速的实现本身想要的图表，无任何学习成本。目前 Chartmaker 正在紧张的开发中，预计十月初对外开放。

写在最后

Bizcharts 目前处于快速发展中，很是欢迎给项目提 Pull Request。也能够去 咱们的官网 联系咱们。