定义
BizCharts是阿里巴巴集团前端领域通用图表组件库，沉淀多条业务线的可视化规范，基于G2的React封装的图表组件库，可在项目中实现常见图表和自定义图表。
适宜用户
多业务复杂场景，基于图形语法灵活绘制，满足你无限的创意。
特性
- 使用ES6语法
- 易于使用
- 强大的扩展能力
- 支持大多数数据可视化图表
详解G2数据处理流程
- 加载数据
- 分组数据
- 保存原始数据
- 数据数值化
- 调整数据
- 归一化处理
- 计算绘制图形需要的点
- 映射至图形属性
- 渲染绘制
组件举例
- 属性
- name?: string // 数据字段
- title?: boolean | config | null // 标题的配置项
- visible?: boolean // 是否显示
- label?: config | null | boolean //文本标签
- line?: config | null | boolean //坐标轴线的配置项
- tickLine?: config | null | boolean //坐标轴刻度线的配置项
- subTickLine?: config | null | boolean // 坐标轴子刻度线(坐标轴刻度线之间的子刻度线)的配置项
- position?: ’top’ | 'bottom' | 'right' | 'left' // 适用于直角坐标系，设置坐标的位置
- view?: Chart | View //来自父级的chart或者view实例
- grid?: config | null | boolean // 坐标轴网格线的配置项
- animate?: boolean // 动画开关
- animateOption?: config //动画参数配置
- verticalFactor?: number // 标记坐标轴label的方向，左侧、上侧为1，右侧、下侧为-1
- 内部实现
- BizCharts Axis组件实现时直接使用G2中 View实例的 axis方法(即new Chart().createView().axis())，内部使用canvas进行渲染绘制，其中GComponent中的Canvas、Group等组件兼容使用SVG渲染绘制。
- Coordinate 坐标系组件
在参照系中，为确定空间一点的位置，按规定方法选取的有次序的一组数据作为坐标，事物的一切概念都是参照于其所属的坐标系存在的，坐标系主要有
笛卡尔坐标系，平面极坐标系、柱面坐标系、球面坐标系等。BizCharts将坐标系抽象为组件，包含笛卡尔坐标系、平面极坐标系、平面螺旋坐标系。
- 笛卡尔坐标系：即平面直角坐标系，由x、y两个垂直的维度构成；
- 极坐标系：由半径、内部极坐标系的半径、起点弧度、终点弧度构成；
- 螺旋坐标系：由半径、起点弧度、终点弧度构成；
DataSet 数据处理模块
旨为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。首先我们把数据处理分为两个大的步骤：数据连接（Connector）和数据转换（Transform）。Connector 负责导入和归一化数据（譬如导入 CSV 数据，导入 GeoJSON 数据等），Transform 负责进行各种数据转换操作（譬如图布局、数据统计、数据补全等）。通过这样的分层，支持了前端社区非常全面的数据处理相关的算法和模块；其次，我们在单个数据视图（DataView）的基础上增加了数据集（DataSet）的概念，通过统一的 DataSet 管理，实现了各个数据视图之间的状态同步和交互。整个数据处理模块的架构如下图：
BizCharts与ECharts的区别：
- 两者均支持丰富的可视化类型，如折线图、柱状图、散点图、饼图、K线图、热力图、关系图等等，而且均不同程度上支持对视图的拓展；
- 两者均支持对多种数据源的处理，如二维表、kay-value等；
- BizCharts是基于G2使用React + TS封装的以React组件的形式使用，内置预设，具有简易和高度拓展性，而ECharts是基于zrender.js纯JS封装、纯JS使用；
- BizCharts使用Canvas、SVG渲染绘制，而ECharts使用Canvas、VML、SVG(V4.0提供)、WebGL渲染绘制；
- ECharts支持增量渲染(流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少)，能够展现千万级的数据量；
- BizCharts面向PC端（其兄弟产品BizGolin面向移动端），ECharts面向PC端和移动端；
