fill

[TOC]
- ## fill
  - ### colors: Array of Color | Array of function
    填充 svg 路径的颜色。数组中的每个索引对应于系列索引。例子
	```javascript
fill: {
		colors: ['#1A73E8', '#B32824']
}
```
    或者，如果您正在渲染条形图/饼图/圆环图/径向条形图，您可以传递一个根据值返回颜色的函数。
	```javascript
fill: {
		colors: [function({ value, seriesIndex, w }) {
		  if(value < 55) {
		      return '#7E36AF'
		  } else if (value >= 55 && value < 80) {
		      return '#164666'
		  } else {
		      return '#D9534F'
		  }
		}]
}
```
  - ### opacity: Number
    填充属性的不透明度。
  - ### type: String || Array of String
    是否用纯色或渐变填充路径。
	
    可用选项
	- solid
	- gradient
	- pattern
	- image
	
	在多系列图表中，您可以传递一个数组以允许像这样组合填充类型
	```javascript
fill: {
		type: 'gradient' 
}
/* OR */
fill: {
		type: ['solid', 'gradient']
}
```
  - ### gradient
    [例子](https://codepen.io/apexcharts/pen/GQmoXP "例子")
    - #### shade: String
      渐变阴影的可用选项
	  - light
      - dark
    - #### type: String
      渐变类型的可用选项
	  - horizontal
      - vertical
      - diagonal1
      - diagonal2
    - #### shadeIntensity: Number
      渐变阴影的强度。
	  
	  接受从0到1
	  
    - #### gradientToColors: Array
      结束渐变的可选颜色。
	  
	  主[颜色](http://www.bixiaguangnian.com/manual/apexcharts/304.html "颜色")数组变成了 `gradientFromColors`，这个数组变成 `end` 了渐变的颜色。数组中的每个索引对应于系列索引。
    - #### inverseColors: Boolean
      反转渐变的开始和结束颜色。
    - #### opacityFrom: Number || Array of Numbers
      开始颜色的不透明度。如果你想要不同系列的不同不透明度，你可以传递一个数字数组。例如，`opacityFrom: [0.2, 0.8]`
    - #### opacityTo: Number || Array of Numbers
      结束颜色的不透明度
    - #### stops: Array
      停止定义要在渐变上使用的颜色渐变
    - #### colorStops: Array
      覆盖所有内容并使用无限的颜色停止定义您自己的停止。
	  ```javascript
[ 
		[
			{
				offset: 0,
				color: '#eee',
				opacity: 1
			},
			{
				offset: 0.6,
				color: 'green',
				opacity: 50
			},
			{
				offset: 100,
				color: 'red',
				opacity: 1
			}
		],
		[
			{
				offset: 0,
				color: '#999',
				opacity: 1
			},
			{
				offset: 50,
				color: 'blue',
				opacity: 0.75
			},
			{
				offset: 100,
				color: '#ddd',
				opacity: 1
			}
		]
]
```
      上面代码中的每个索引对应一个系列。
	
      [CodePen示例](https://codepen.io/apexcharts/pen/RvqdPb "CodePen示例")
  - ### image
    - #### src: Array
      src 接受一组与每个系列相对应的图像路径。
    - #### width: Number
      所有系列的每个图像的宽度
    - #### height: Number
      所有系列的每个图像的高度
  - ### Pattern
    - #### style: String
      可用的图案样式
	  - verticalLines
      - horizontalLines
      - slantedLines
      - squares
      - circles
    - #### width: Number
      将以此间隔重复的图案宽度
    - #### height: Number
      将以此间隔重复的图案高度
    - #### strokeWidth: Number
      图案线宽表示图案笔划的粗细。

```javascript
fill: {
  colors: undefined,
  opacity: 0.9,
  type: 'solid',
  gradient: {
      shade: 'dark',
      type: "horizontal",
      shadeIntensity: 0.5,
      gradientToColors: undefined,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [0, 50, 100],
      colorStops: []
  },
  image: {
      src: [],
      width: undefined,
      height: undefined
  },
  pattern: {
      style: 'verticalLines',
      width: 6,
      height: 6,
      strokeWidth: 2,
  },
}
```