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

Yangder 发布于2019-08-23 11:35 / 3508人阅读

摘要：写在前面阿里巴巴于去年开放了它的内部图表库初版，在这一年的时间里，新增了许多特性，并对渲染细节及渲染性能进行大幅度的调优。在阿里内部多个部门多条业务线里反复打磨了两年之久后，于去年年底对外开源。

写在前面

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

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

它的由来

适合什么业务场景？

如何使用？

未来的规划

它的由来？

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

Bizcharts 的语法设计非常贴切 React 的使用方式，图表的各个部分都拆分成了独立的 React 类，如：代表提示信息，代表坐标轴。所有图表的配置项皆为组件的 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((
  
    {/* X 轴 */}
    
    {/* Y 轴 */}
    
    
    
    
  
), document.getElementById("mountNode"));

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

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

未来的规划

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

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

写在最后

Bizcharts 目前处于快速发展中，非常欢迎给项目提 Pull Request。对于那些已经在项目中使用到 Bizcharts 或准备使用 Bizcharts 的同学，请扫描我们下面的官方群钉钉二维码，使用过程中碰到的问题我们会第一时间帮忙解决：

云服务器 GPU云服务器图表库 python 图表库数据可视化图表库 html5 图表开源

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97170.html

Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

gitmilk 2019-08-23 11:37 评论0 收藏0
Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

ymyang 2019-07-01 10:36 评论0 收藏0
三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

摘要：最近阿里正式开源的图表库基于技术栈，各个图表项皆采用了组件的形式，贴近的使用特点。相关文档组件化阿里的图表组件手拉手，用开发动态刷新组件文档地址一安装通过引入二引用成功安装完成之后，即可使用或进行引用。最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相...

draveness 2019-04-23 13:19 评论0 收藏0
[BizCharts学习笔记] --- 数据可视化

摘要：所以笔者选择了，为什么会选择一是因为它是阿里出品，经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制，不会像那样高度封装，所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。实际上，在数据可视化这一块笔者并没有很多的开发经历和经验，不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代，数据能给我们提供前所未有的便捷...

CoffeX 2019-08-23 11:56 评论0 收藏0