這節(jié)講述了圖例的各種設(shè)置
圖例樣式
圖例容器樣式
圖例容器是指整個圖例容器的樣式
| 參數(shù)名 | 解釋 | 默認值 |
|---|---|---|
| backgroundColor | 背景顏色 | null |
| borderColor | 邊框顏色 | '#909090' |
| margin | 外邊距 | 15 |
| padding | 內(nèi)邊距 | 8 |
| maxHeight | 最大高度 | null |
| navigation | 導航，當設(shè)置了最大高度后棒厘，圖例無法完整顯示時黄痪，則會用導航的形式展示（分頁），詳見API文檔 | |
| shadow | 圖例陰影效果，賦值可以是 boolean 或 Object，詳見API文檔 | false |
| width | 圖例寬度 | null |
| verticalAlign | 垂直對齊方式，有 'top'渤滞， 'middle' 及'bottom' 可選 | 'bottom' |
| useHTML | 是否以HTML形式渲染（默認是SVG渲染），當使用 HTML 模式渲染是榴嗅，圖例導航無效 | false |
圖例項樣式
圖例里面的內(nèi)容是通過圖例項相關(guān)內(nèi)容控制
| 參數(shù)名 | 解釋 | 默認值 |
|---|---|---|
| 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 | 圖例項標示內(nèi)邊距 | 5 |
| symbolRadius | 圖例項標示圓角 | 2 |
| symbolWidth | 圖例項標示寬度 | 16 |
圖例內(nèi)容及定位
圖例內(nèi)容
| 參數(shù)名 | 解釋 | 默認值 |
|---|---|---|
| labelFormat | 圖例文字格式化字符串 | {name} |
| labelFormatter | 圖例內(nèi)容格式化函數(shù) | function() { return this.name} |
| reversed | 是否倒序 | false |
| rtl | 文字是否顯示在符號前面妄呕，主要針對閱讀習慣從右至左的用戶 | false |
| title | 圖例標題 | title: { text: null, style: { fontWeight: "blod"}} |
格式化函數(shù)，this代表當前的數(shù)據(jù)列對象嗽测，默認 return this.name
labelFormatter: function () {
return this.name + '(click to hide or show)'
}
定位
|參數(shù)名 |解釋| 默認值|
|align |圖例在圖表中的對齊方式绪励，有 “l(fā)eft”, "center", "right" 可選| “center”|
|floating| 圖例是否浮動，設(shè)置浮動后唠粥，圖例將不占位置| false|
|layout| 圖例內(nèi)容布局方式疏魏，有水平布局及垂直布局可選，對應(yīng)的配置值是： “horizontal”晤愧， “vertical”| "horizontal"|
|x |水平偏移 |0|
|y |豎直偏移| 0|
圖例點擊事件
圖例默認的點擊行為是顯示或隱藏當前數(shù)據(jù)列大莫。this在不同的事件或者方法中可以代表“數(shù)據(jù)列”也可以代表“數(shù)據(jù)點對象”
- 在數(shù)據(jù)列配置中設(shè)置，也可以設(shè)置每個數(shù)據(jù)列的圖例點擊事件
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
/*
* 默認實現(xiàn)是顯示或隱藏當前數(shù)據(jù)列养涮，e 代表事件葵硕， this 為當前數(shù)據(jù)列
*/
}
}
}
}
- 使用
return false即可阻止默認事件 - 在
plotOptions.series中的配置對餅圖是無效的眉抬，因為餅圖的扇區(qū)是數(shù)據(jù)點對象贯吓，對數(shù)據(jù)列的配置自然對餅圖不起作用
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用圖例點擊事件
}
}
}
}
}
- 自定義圖例點擊事件懈凹，網(wǎng)站案例實現(xiàn)了，點擊圖例悄谐，圖例對應(yīng)的數(shù)據(jù)列顯示介评，其他隱藏
關(guān)于圖例的常見問題
- 在單個數(shù)據(jù)列中設(shè)置
showInLegend:false，則該圖例不顯示
