这节讲述了图例的各种设置
图例样式
图例容器样式
图例容器是指整个图例容器的样式
| 参数名 | 解释 | 默认值 |
|---|---|---|
| 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在不同的事件或者方法中可以代表“数据列”也可以代表“数据点对象”
- 在数据列配置中设置，也可以设置每个数据列的图例点击事件
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
/*
* 默认实现是显示或隐藏当前数据列，e 代表事件， this 为当前数据列
*/
}
}
}
}
- 使用
return false即可阻止默认事件 - 在
plotOptions.series中的配置对饼图是无效的，因为饼图的扇区是数据点对象，对数据列的配置自然对饼图不起作用
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
}
}
- 自定义图例点击事件，网站案例实现了，点击图例，图例对应的数据列显示，其他隐藏
关于图例的常见问题
- 在单个数据列中设置
showInLegend:false，则该图例不显示
