BizCharts调研
Nov 29, 2018
BizCharts
简单说下特性:
- 基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表
- 集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等
- 性能稳定且具有强大的扩展能力和高度自定义能力
和ECharts对比
- ECharts是一个基本库,不依赖其他框架,在React/Vue/Angular中都可以使用。 BizCharts是基于G2的封装,组件的解析依赖于React。
- ECharts是配置型,绝大部分展示交互通过配置options完成; BizCharts是编码型,提供了图表构成的各部分组件,引入组件来绘制图表
- ECharts由百度开源,从2013.6至今,版本从1.0到4.2,包含了24种平面图和10种基于webGL的3D图,实现了多渲染方案(canvas,svg,vml)、跨平台使用,各种功能十分丰富; Bizcharts由ali开源,从2017.12月直接发布3.0版本,至今版本3.2,包含了14种图例,支持canvas,svg渲染方案,仅针对PC端,平台端分离出BizGoblin,功能配置项较ECharts少。
- BizCharts部分功能不完备,例如resize,需要主动由window dispatch resize, 多Y轴需要用Dataset展开,排序没有默认转为数值,需要手动将字符串转为数值。
- 性能上,数据量不大的情况下,两者都可以接受。但ECharts有重构底层图形库ZRender,针对移动端优化,所以性能上更好。在图表中自定义一部分dom结构,同样的逻辑,ECharts流畅性能高。
体验改进
G2 会将打点监控,默认会将 URL 等信息发送回 AntV 服务器。1
2
3
4
5
6
7
8
9url: https://kcart.alipay.com/web/bi.do
param:{
BIProfile:merge,
d:[{"bizcharts":"3.2.5-beta.3","pg":"http://localhost:3000/#/app/2495489/performance/web","r":1541569473246,"g2":true,"version":"3.3.3","page_type":"syslog"
}]
}
设置track(false)可以关闭。
BizCharts.track(false);// orimport { track } from 'bizcharts';track(false)常用组件
Chart
图表最顶级的组件,控制着图表的创建、绘制、销毁等。
- renderer 图表渲染方式,默认为canvas,可设置为svg
- data 图表数据源,JSON对象数组或者DataSet.View对象
- scale 配置图表比例尺, 例如将Y轴设置为从0开始
- padding 默认为’auto’, 比如设置左侧和下面的padding, padding={[‘auto’, ‘auto’, 20, 20]}
- 事件支持
onPlotClick
点击,onTooltipChange
tooltip变化,onPlotEnter
鼠标进入绘图区域等
Axis
坐标轴组件,控制图表中坐标轴的样式等。
- name 坐标轴对应数据源的字段key
- label Object对象,{textStyle:{}, formatter(text,item,index){} …},可设置坐标轴格式及样式等
Geom
几何标记对象,决定创建图表的类型。
- type 几何标记类型,有line(线图) interval(柱状图、饼图) area(区域图) edge(树图、关系图等)等
- color 将数据值映射到图形的颜色, 可以是数据字段key,配合Legend组件显示,也可以是[field,[color1,color2]]的颜色映射
- position 位置属性的映射,格式为 “a*b”,a字段对应横轴,b字段对应纵轴
- tooltip 显示图标数据点的提示信息, 格式为
['a*b', (a,b)=>({name:xx, value:yyy})]
Legend
图例。
- position 图例位置,默认为 ‘buttom-center’
- layout 图例排列方式,vertical、horizontal
- itemFormatter 图例文本展示
Tooltip
tooltip显示信息层
- triggerOn 触发形式,mousemove click none
- crosshairs Object对象,tooltip辅助线样式,如{type:’line’, style:{}}
Slider
需要单独安装,npm install bizcharts-plugin-slider
,作用与 ECharts dataZoom
类似,可以局部展示图表信息
Dataset
Dataset需要单独安装 npm install @antv/data-set -save
Dataset Transform 包含很多数据转换,如sort, map, filter等静态处理,也有fold形变处理,还包括树hierarchy, 图diagram处理,可以利用 hierarchy 树形排列数据点,作用类似于包 d3-hierarchy
。
注意点Tips
- Geom中tooltip字段格式,’abc’ 符号为 ‘ *
- Geom中color可以为映射的字段名,也可以为颜色,如果颜色和字段名同名,将导致图表刷新切换,不稳定。
- 图表resize是监听的window resize事件,所以需要在区域联动变化时手动dispatch事件, window.dispatchEvent(new Event(‘resize’)); (https://github.com/alibaba/BizCharts/issues/75)
- Bizcharts中没有Geom指定Y轴的接口,所以需要用DataView合并使用同一Y轴的数据 (https://github.com/alibaba/BizCharts/issues/591)
- Y轴排序使用的js自动排序,所以 toFix 保留的字符串需要转化为数值。 (https://github.com/alibaba/BizCharts/issues/330)
- Bizcharts提供的图表组件,可以在Chart内部使用自定义的组件或者html dom
- Axis组件的横纵由Geom的position决定,跟组件顺序无关
1 | import DataSet from '@antv/data-set'; |