《GitHub精选》是我们分享Github中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是阿里基于商业场景下的数据可视化解决方案——BizCharts。
BizCharts是阿里基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,目前已经在阿里云、天猫、淘宝、钉钉、飞猪等多个复杂业务场景中应用,在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现。
特点:
- 基于 G2、React
- 集成大量统计工具
- 强大的扩展能力
- 高自定义能力

快速开始:
1、安装:
npm install bizcharts --save
2、使用:
创建容器
使用组件生成图表
- 引入图表需要的组件
- 用组件组装成需要的图表
- 把图表渲染到 mountNode 节点上
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((
), document.getElementById('mountNode'));
3、生成图表

其他样式:
- 柱状图

- 折线图

- 条形图

- 饼图

- 点图

- 面积图

- 雷达图

- 箱形图

- 烛形图

- 热力图

- 仪表盘

- 漏斗图

- 分面图

- 关系图

- 地图

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 ZLME@ZLME.COM 举报,一经查实,立刻删除。