Console-Chart 所有类型的图表组件遵循React Component组件规范，且使用统一的props。

props 列表

属性 说明 类型 默认值
data highcharts 规范的数据格式 Array -
config 配置 Object -
padding 图表绘制区域的 padding Array -
width 图表的宽度 Number 父组件的宽度
height 图表的高度 Number 父组件的高度
className 自定义类名 String -
style 自定义样式 Object -
children 指定图表的子节点 ReactNode -
animate 是否开启动画 Boolean false
event G2 的 event 配置, 支持监听 chart 事件。 Object -
onGetG2Instance 获取G2实例 Function null

data

所有传入图表组件的 data 必须是复合Console-Chart数据规范的。
基本的格式如下：

  1. const data = [{ name: '分类1', data: [] }, { name: '分类2', data: [] }];

更详细的信息请参考：数据格式说明

config

Console-Chart会使用config 作为图表的配置入口， config 配置分为两类：配置+图表专属配置。

  • 公共配置：所有图表库公用的，配置方法相同
  • 专属配置：不同的图表能力各有不同，需要专属的配置
  1. // 无任何配置
  2. config = {};
  4. // 设置图表的padding
  5. config = {
  6.   padding: [20, 30, 20, 40],
  7. };
  9. // 设置图表的x轴的类型及展示格式
  10. config = {
  11.   xAxis: {
  12.     type: 'time',
  13.     mask: 'YYYYMMDD',
  14.   },
  15. };
  17. // 设置图表的Y轴
  18. config = {
  19.   yAxis: {
  20.     labelFormatter: val => `${val} 万`,
  21.   },
  22. };

width

Console-Chart会优先使用开发者传入的width作为图表的绘图宽度，并且不会随父节点的宽度影响。 如果不指定width, Console-Chart会自动计算父节点的宽度, 并使用该值作为图表的绘图宽度。

height

Console-Chart会优先使用开发者传入的 height 作为图表的绘图宽度，并且不会随父节点的宽度影响。 如果不指定width, Console-Chart会自动计算父节点的宽度, 并使用该值作为图表的绘图宽度。

padding

设置图表的内边距
图表的padding可通过props传入，也支持通过config.padding方式传入。

  1. padding: [ 20, 30, 20, 30] // CSS 盒模型（上右下左）
  3. padding: 20 // 四个边都是20px
  5. padding: { top: 20, right: 30, bottom: 20, left: 30 }
  7. padding: 'auto'
  9. padding: [20, 'auto', 30, 'auto']
  • 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。
  • padding 为数字以及数组类型时使用方法同 CSS 盒模型（上右下左）。
  • padding 中存在 ‘auto’，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框

event

G2 的 event 配置, 支持监听 chart 事件。

children

目前暂不需要使用该属性

onGetG2Instance

获取 chart 实例的回调。每当生成一个新 chart 时就会调用该函数，并以新生成的 chart 作为回调参数。

  1. onGetG2Instance = chart => {
  2.   chart.animate(false);
  3. }