Bizcharts是什么?
基于蚂蚁金服开发的可视化工具G2的React版本封装,使用体验更符合 React 技术栈的习惯,并且与 AntV 有着紧密的协同。
Bizcharts 地址:alibaba.github.io/BizCharts/
如何使用Bizcharts?
- 安装BizCharts npm 包(建议使用淘宝镜像cnpm安装
npm install bizcharts --save
复制代码
常用API
- padding:当坐标轴、图例等绘图区域外的组件显示不全时,可以通过调整图表各个方向的 padding 来调整最终效果,例如
<Chart padding={[ 20, 34, 20, 34]} />
复制代码
- Axis: 坐标轴组件。当需要对坐标轴的value值做处理时,需要用到formatter属性,例如
<Axis
name="value"
label={{
formatter: val => `${val}°C`
}}
/>
复制代码
- Tooltip: 提示框组件。因为自己在项目中遇到name为时间戳且没有找到如何在Tooltip中更改,此时可添加该属性,让提示框只显示value属性
<Tooltip
containerTpl="<div class="g2-tooltip"><table class="g2-tooltip-list"></table></div>"
crosshairs={{
type: "y"
}}
/>
复制代码
g2-tooltip属性可以修改提示框样式,例如opacity、border、padding、transition
- Geom:几何标记组件,如点线面,可使用style属性更改样式,在组件中添加可以显示每个节点的值而不用鼠标hover时才会显示
结语
目前只是使用Bizcharts在项目中绘制了折线图,后续会继续发掘其他的可视化图型。
初次编写,谢谢阅读