【可视化-柱形图】antv实现柱状图的相关记录

柱形图（基于 4.x 版本 g2）

简介

g2 文档较为简略，实现具体功能时花费了较多的时间，所以写一份相关的记录，记录一些常见的功能配置和 hack 配置

一、表配置-ChartConfig

const chart = new Chart(props: ChartCfg);

详细参数见官方文档，这里只举例说明可以配置滚动条的样式。

常规属性

宽度：chartConfig.width
高度：chartConfig.height
容器：chartConfig.container

自定义滚动条样式

通过自定义 theme，覆盖滚动条的样式，详细见下方滚动条配置

二、坐标轴配置-AxisConfig

chart.axis(field: string, axiosOption: AxiosOption);

详细参数见官方文档

各字段定义

坐标轴线-line

{
   
  "line": {
   
    "style": {
   
      "lineWidth": 1,
      "stroke": "#002171"
    }
  }
}

坐标轴刻度线-tickLine

一般不显示

tickLine: null,

坐标轴子刻度线-subTickLine

一般不显示

subTickLine: null,

网格线配置项-grid

虚线配置

{
   
  "grid": {
   
    "line": {
   
      "style": {
   
        "lineDash": [5],
        "stroke": "rgb(0,33,113)"
      }
    }
  }