legend

[TOC]
- ## legend
 - ### show: Boolean
 是否显示或隐藏图例容器。
 - ### showForSingleSeries: Boolean
 即使只有 1 个系列也显示图例。
 - ### showForNullSeries: Boolean
 如果系列包含所有空值，则允许您隐藏特定图例。
 - ### showForZeroSeries: Boolean
 如果系列包含所有 0 值，则允许您隐藏特定图例。
 - ### position: String
 图例的可用位置选项
	
 - top
 - right
 - bottom
 - left
 - ### horizontalAlign: String
 水平对齐的可用选项
	
 - left
 - center
 - right
 - ### floating: Boolean
	浮动选项将从图表区域中取出图例并使其浮动在图表上方。
 - ### fontSize: String
	设置图例文本元素的字体大小
 - ### fontFamily: String
	设置图例文本元素的字体系列
 - ### fontWeight: String | Number
	设置图例文本元素的字体粗细
 - ### formatter: function
	自定义格式化程序函数，用于将附加文本附加到图例系列名称
	```javascript
 legend: {
		/*
		 * @param {string} seriesName - The name of the series corresponding to the legend
		 * @param {object} opts - Contains additional information as below
		 * opts: {
		 * seriesIndex
		 * w: {
		 * config,
		 * globals 
		 * },
		 * }
		*/
		formatter: function(seriesName, opts) {
			return [seriesName, " - ", opts.w.globals.series[opts.seriesIndex]]
		}
 },
```
 - ### inverseOrder: Boolean
	反转图例项的放置顺序。
 - ### width: Number
	设置图例容器的宽度
 - ### height: Number
	设置图例容器的高度
 - ### tooltipHoverFormatter: function
	一个格式化程序函数，允许在将鼠标悬停在图表上时在图例中显示数据值。当您有多个系列并且您不想同时显示每个系列的工具提示时，这会很有用。
	```javascript
 legend: {
		/*
		 * @param {string} seriesName - The name of the series corresponding to the legend
		 * @param {object} opts - Contains additional information as below
		 * opts: {
		 * seriesIndex,
		 * dataPointIndex
		 * w: {
		 * config,
		 * globals 
		 * },
		 * }
		*/
		tooltipHoverFormatter: function(seriesName, opts) {
			return seriesName + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
		}
 },
```
 > 注意：此功能仅在共享工具提示中可用（当您有 `tooltip.shared: true`）。
 - ### customLegendItems: Array
	允许您使用这组自定义标签覆盖默认图例项。请注意，`click/hover` 如果您提供这些自定义图例标签，图例事件将停止工作。
 - ### offsetX: Number
	设置图例容器的左偏移量
 - ### offsetY: Number
	设置图例容器的顶部偏移量
 - ### labels
 - #### colors: Array of Colors
	 图例标签的自定义文本颜色。接受一个颜色数组，其中每个索引对应于系列索引
 - #### useSeriesColors: Boolean
	 是否使用 primary [颜色](http://www.bixiaguangnian.com/manual/apexcharts/262.html "原色")。
 - ### markers
 - #### width: Number
	 出现在系列名称之前的标记的宽度。
 - #### height: Number
	 标记的高度。
 - #### strokeWidth: Number
	 标记点的笔划大小。
 - #### strokeColor: String
	 标记点的描边颜色。
 - #### fillColors: Array of Colors
	 标记点的填充颜色。
 - #### radius: Number
	 标记的边界半径
 - #### customHTML: function
	 用于代替标记的自定义 HTML 元素
	 ```javascript
 markers: 
		customHTML: function() {
			return ''
		}
 },
```
 - #### onClick: function
	 单击图例的标记时触发事件
	 ```javascript
 markers: 
		onClick: function(chart, seriesIndex, opts) {
			console.log("series- " seriesIndex + "'s marker was clicked")
		}
 },
```
 - #### offsetX: Number
	 设置标记的左偏移量
 - #### offsetY: Number
	 设置标记的顶部偏移量
 - ### itemMargin
 - #### horizontal: Number
	 单个图例项的水平边距。
 - #### vertical: Number
	 单个图例项的垂直边距。
 - ### onItemClick
 - #### toggleDataSeries: Boolean
	 单击图例项时，它将切换图表中系列的可见性。
 - ### onItemHover
 - #### highlightDataSeries: Boolean
	 当悬停在图例项上时，它将突出显示悬停系列在图表中的路径。

```javascript
  legend: {
      show: true,
      showForSingleSeries: false,
      showForNullSeries: true,
      showForZeroSeries: true,
      position: 'bottom',
      horizontalAlign: 'center', 
      floating: false,
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      formatter: undefined,
      inverseOrder: false,
      width: undefined,
      height: undefined,
      tooltipHoverFormatter: undefined,
      customLegendItems: [],
      offsetX: 0,
      offsetY: 0,
      labels: {
          colors: undefined,
          useSeriesColors: false
      },
      markers: {
          width: 12,
          height: 12,
          strokeWidth: 0,
          strokeColor: '#fff',
          fillColors: undefined,
          radius: 12,
          customHTML: undefined,
          onClick: undefined,
          offsetX: 0,
          offsetY: 0
      },
      itemMargin: {
          horizontal: 5,
          vertical: 0
      },
      onItemClick: {
          toggleDataSeries: true
      },
      onItemHover: {
          highlightDataSeries: true
      },
  }
```