网格

网格是不包括图例、标题、副标题、x 轴和 y 轴的绘图区域。网格坐标广泛用于图表中的计算，以确定在何处绘制实际图表元素。

![](/uploads/images/20221227/85de0cb03f4f1a5c24d81ac71fea9efa.png)

### 自定义网格
#### 将网格线置于图表区域上方
`grid.position` 通过将网格线设置为，可以在图表区域上方绘制网格线 `front`

```javascript
grid: {
  position: 'front'
}
```

![](/uploads/images/20221227/d5b67ab80a27a06d8d27ad0cc700377e.png)

#### 显示/隐藏线条
控制 x 轴/y 轴网格线的可见性

```javascript
xaxis: {
  lines: {
    show: false,
  }
},
yaxis: {
  lines: {
    show: true,
  }
},
```

### 网格样式
#### 更改网格边框颜色并呈现虚线外观
您可以自定义网格的线条颜色并通过设置给出虚线边框

```javascript
grid: {
  borderColor: '#111',
  strokeDashArray: 7,
}
```

![](/uploads/images/20221227/f2c84019d2d8cc625e3e75b10095828f.png)

#### 填充网格行和列
您可以通过设置填充网格行和列的背景

```javascript
grid: {
  row: {
      colors: ['#e5e5e5', 'transparent'],
      opacity: 0.5
  }, 
  column: {
      colors: ['#f8f8f8', 'transparent'],
  }, 
  xaxis: {
    lines: {
      show: true
    }
  }
},
```

![](/uploads/images/20221227/1f3668a8812957d3dccce3033ccb1943.png)

更多关于Grid的信息，请参考 [Grid配置](http://www.bixiaguangnian.com/manual/apexcharts/308.html)