08图例

这节讲述了图例的各种设置

图例样式

图例容器样式

图例容器是指整个图例容器的样式

参数名	解释	默认值
backgroundColor	背景颜色	null
borderColor	边框颜色	'#909090'
margin	外边距	15
padding	内边距	8
maxHeight	最大高度	null
navigation	导航，当设置了最大高度后，图例无法完整显示时，则会用导航的形式展示（分页），详见API文档
shadow	图例阴影效果，赋值可以是 boolean 或 Object，详见API文档	false
width	图例宽度	null
verticalAlign	垂直对齐方式，有 'top'， 'middle' 及'bottom' 可选	'bottom'
useHTML	是否以HTML形式渲染（默认是SVG渲染），当使用 HTML 模式渲染是，图例导航无效	false

图例项样式

图例里面的内容是通过图例项相关内容控制

参数名	解释	默认值
itemDistance	图例项间距	20
itemStyle	图例样式	itemStyle: { cursor: 'pointer', color: '#3E576F' }
itemHiddenStyle	图例隐藏时的样式	itemHiddenStyle: { color: '#CCC' }
itemHoverStyle	图例鼠标划过时样式	itemHoverStyle: { color: '#000' }
itemMarginBottom	图例项底边距	0
itemMarginTop	图例项顶部边距	0
itemWidth	图例项宽度	null
symbolHeight	图例项标示高度	12
symbolPadding	图例项标示内边距	5
symbolRadius	图例项标示圆角	2
symbolWidth	图例项标示宽度	16

图例内容及定位

图例内容

参数名	解释	默认值
labelFormat	图例文字格式化字符串	{name}
labelFormatter	图例内容格式化函数	function() { return this.name}
reversed	是否倒序	false
rtl	文字是否显示在符号前面，主要针对阅读习惯从右至左的用户	false
title	图例标题	title: { text: null, style: { fontWeight: "blod"}}

格式化函数，this代表当前的数据列对象，默认 return this.name

labelFormatter: function () {
    return this.name + '(click to hide or show)'
}

定位

|参数名 |解释| 默认值|
|align |图例在图表中的对齐方式，有 “left”, "center", "right" 可选| “center”|
|floating| 图例是否浮动，设置浮动后，图例将不占位置| false|
|layout| 图例内容布局方式，有水平布局及垂直布局可选，对应的配置值是： “horizontal”， “vertical”| "horizontal"|
|x |水平偏移 |0|
|y |竖直偏移| 0|

图例点击事件

图例默认的点击行为是显示或隐藏当前数据列。this在不同的事件或者方法中可以代表“数据列”也可以代表“数据点对象”

1. 在数据列配置中设置，也可以设置每个数据列的图例点击事件

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            /*
             * 默认实现是显示或隐藏当前数据列，e 代表事件， this 为当前数据列
             */
        }
    }
  }
} 

2. 使用return false即可阻止默认事件
3. 在plotOptions.series中的配置对饼图是无效的，因为饼图的扇区是数据点对象，对数据列的配置自然对饼图不起作用

plotOptions: {
  pie: {
    point: {
        events: {
            legendItemClick: function(e) {
                return false; // 直接 return false 即可禁用图例点击事件
            }
        }
    }
  }
}

4. 自定义图例点击事件，网站案例实现了，点击图例，图例对应的数据列显示，其他隐藏

关于图例的常见问题

1. 在单个数据列中设置showInLegend:false，则该图例不显示