数据可视化学习之旅（一） React项目中初步使用Bizcharts

Bizcharts是什么？

基于蚂蚁金服开发的可视化工具G2的React版本封装，使用体验更符合 React 技术栈的习惯，并且与 AntV 有着紧密的协同。
Bizcharts 地址：alibaba.github.io/BizCharts/

如何使用Bizcharts？

• 安装BizCharts npm 包（建议使用淘宝镜像cnpm安装

 npm install bizcharts --save
复制代码

• 图表案例 地址： bizcharts.net/products/bi…

常用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=&quot;g2-tooltip&quot;><table class=&quot;g2-tooltip-list&quot;></table></div>"
    crosshairs={{
      type: "y"
    }}
/>
复制代码

g2-tooltip属性可以修改提示框样式，例如opacity、border、padding、transition

• Geom：几何标记组件，如点线面，可使用style属性更改样式,在组件中添加可以显示每个节点的值而不用鼠标hover时才会显示

结语

目前只是使用Bizcharts在项目中绘制了折线图，后续会继续发掘其他的可视化图型。
初次编写，谢谢阅读