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

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

它的由来？

目前阿里基本上绝大部分业务的前端用的都是 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 正式开源-LMLPHP

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

未来的规划

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

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

以上就是阿里巴巴图表库 Bizcharts 正式开源的详细内容，更多请关注Work网其它相关文章！