当前位置: 首页 > 工具软件 > BizCharts > 使用案例 >

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

祁远
2023-12-01

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=&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在项目中绘制了折线图,后续会继续发掘其他的可视化图型。
初次编写,谢谢阅读

 类似资料: