BizCharts调研

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 服务器。

url: 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显示信息层

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决定，跟组件顺序无关

import DataSet from '@antv/data-set';
// ...
render() { 
    const ds = new DataSet(); 
    const dv = ds.createView().source(this.bchart || []); 
    dv.transform({  // fold展开字段 
        type: 'fold', 
        fields: ['count4xx', 'count5xx'], 
        key: 'count', 
        value: 'errCount', // value字段 
    }); 
    dv.transform({ 
        type: 'fold', 
        fields: ['count4xx_percent', 'count5xx_percent'], 
        key: 'percent', 
        value: 'errPercent', // value字段 
    }); 
    return 
    ( 
        <Chart 
          height={300} 
          data={dv} 
          forceFit 
          padding={['auto', 60, 'auto', 'auto']} 
          scale={{ name: { alias: '时间', type: 'time', mask: 'YYYY-MM-DD HH:mm:ss' } }} //name存储时间戳，设置name字段的展示格式 
          onPlotClick={this.errClick} // 事件处理 
          onTooltipChange={this.toolShow} 
        > 
          <Axis name="name" /> 
          <Axis name="errCount" /> // fold 展开的两个字段共用一个Y轴 
          <Axis name="errPercent" label={{ formatter(percent) { return `${(+percent * 100).toFixed(1)} %`; } }} /> 
          <Legend 
            position="top-center" 
            itemFormatter={v => ({ // legend 文本格式 count4xx: '4xx错误数',      count5xx: '5xx错误数', count4xx_percent: '4xx错误率',                count5xx_percent: '5xx错误率', }[v])} 
          /> 
          <Tooltip crosshairs={{ type: 'line', }} /> 
          <Geom type="interval" // interval可展示bar图 color="count" // 颜色对应fold处理后的key:count 
            position="name*errCount" 
            tooltip={['name*count*errCount', (name, count, val) => ({ name: { count4xx: '4xx错误数', count5xx: '5xx错误数' }[count], value: val })]} 
          /> 
          <Geom 
            type="line" // line图 color="percent" 
            position="name*errPercent" // position确定横纵坐标轴展示的数据字段 tooltip={['name*percent*errPercent', (name, key, val) => ({ 
              name: { count4xx_percent: '4xx错误率', count5xx_percent: '5xx错误率' }[key], 
              value: `${(val * 100).toFixed(2)}%` })
            ]} 
          /> 
          // 自定义组件，可以直接在Chart中，此处模仿实现，抓取错误趋势数据 
          <div //eslint-disable-line 
            onMouseLeave={() => { this.setState({ confirmShow: false, errList: null }); }} 
            style={{ display: (this.state.confirmShow ? 'block' : 'none') }
          <div style={{ 
                position: 'absolute', 
                background: '#fff', 
                border: '1px solid #ccc', 
                width: 300, 
                height: 80, 
                zIndex: 2, 
                top: this.state.position ? this.state.position[1] + 20 : 0, left: this.state.position ? this.state.position[0] - 150 : 0, 
                }} 
          > 
          {!this.state.errList ? 
            <div> 
              <h4>是否确认获取错误数</h4> 
              <Button onClick={this.confirmList}>确认</Button> 
              <Button onClick={() => this.setState({ confirmShow: false })}>取消</Button> 
            </div> 
            : 
            <div>{this.state.errList}</div> } </div> 
          </div> 
      </Chart> 
      )
    }