初识BizCharts

antV G2 官网 ，表示 在 React 环境下使用 G2，推荐 使用BizCharts 和 Viser-react！

• BizCharts 地址：https://bizcharts.net

• Viser 地址：https://viserjs.github.io/

Viser的文档虽然丰富，但是我这边 打开经常抽筋，所以，所以使用BizCharts 多。

BizCharts是迎合React习惯基于G2进行封装的图表库

Chart

图表组件，内部生产了一个F2 chart 实例，同时控制着其他子组件的加载和更新。

• <Coord/> 坐标系组件

• <Axis/> 坐标轴组件

• <Geom/> 几何标记组件

• <Guide/> 辅助标记组件

• <Legend/> 图例组件

• <Tooltip/> 提示框组件

实例：

<Chart width={320} height={240} data={data} defs={defs} >
  <Axis dataKey='time' label={{fontSize: 12}} />
  <Axis dataKey='tem' label={{fontSize: 12}}/>
  <Tooltip showCrosshairs />
  <Geom geom='area' position='time*tem' />
  <Geom geom='line' position='time*tem' />
</Chart>

这种模式，更好地组件化 颗粒化 配置图表

惊喜的是有这个：pixelRatio，屏幕画布的像素比，默认值1， 一般情况下这个值可以设置成 window.devicePixelRatio

其实文档和百度echart options 配置一样，根据文档，基本图表 管你操作猛如虎，基本没有啥问题

DataSet

DataSet 主要有两方面的功能，解析数据（Connector）&加工数据（Transform）。

转载本站文章《初识BizCharts》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/charts/8499.html