echart 滚动图例设置
图例组件。
图例组件展现了不同系列的标记 (symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。
当图例数量过多时,可以使用 滚动图例(垂直) 或 滚动图例(水平).
图例的类型。可选值:
'plain'
:普通图例。缺省就是普通图例。'scroll'
:可滚动翻页的图例。当图例数量较多时可以使用。
当使用 'scroll'
时,这些使用这些设置进行细节配置:
legend.scrollDataIndex
值为 number 型
[default: 0]
legend.type 为 'scroll'
时有效。
图例当前最左上显示项的 dataIndex
。
setOption
时指定此项的话,可决定当前图例滚动到哪里。
legend.pageButtonItemGap
值为 number 型
[default: 5]
legend.type 为 'scroll'
时有效。
图例控制块中,按钮和页信息之间的间隔。
legend.pageButtonGap
值为 number 型
[default: null]
legend.type 为 'scroll'
时有效。
图例控制块和图例项之间的间隔。
legend.pageButtonPosition
值为 string 型
[default: ‘end’]
legend.type 为 'scroll'
时有效。
图例控制块的位置。可选值为:
'start'
:控制块在左或上。'end'
:按钮快在右或下。
legend.pageFormatter
值为 string, Function 型
[default: ‘{current}/{total}’ ]
legend.type 为 'scroll'
时有效。
图例控制块中,页信息的显示格式。默认为 '{current}/{total}'
,其中 {current}
是当前页号(从 1 开始计数),{total}
是总页数。
如果 pageFormatter
使用函数,须返回字符串,参数为:
{ current: number
total: number }
legend.pageIconColor
值为 string 型
[default: ‘#2f4554’]
legend.type 为 'scroll'
时有效。
翻页按钮的颜色。
legend.pageIconInactiveColor
值为 string 型
[default: ‘#aaa’]
legend.type 为 'scroll'
时有效。
legend.pageIconSize
值为 number, Array 型
[default: 15]
legend.type 为 'scroll'
时有效。
翻页按钮的大小。可以是数字,也可以是数组,如 [10, 3]
,表示 [宽,高]
。
翻页按钮不激活时(即翻页到头时)的颜色。
legend.pageTextStyle
legend.type 为 'scroll'
时有效。
图例页信息的文字样式。
legend.pageTextStyle.color Color
[default: #333]
文字的颜色。
legend.pageTextStyle.fontStyle string
[default: ‘normal’]
文字字体的风格
可选:
'normal'
'italic'
'oblique'
legend.pageTextStyle.fontWeight string
[default: normal]
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
- 100 | 200 | 300 | 400…
legend.pageTextStyle.fontFamily string
[default: ‘sans-serif’]
文字的字体系列
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
legend.pageTextStyle.fontSize number
[default: 12]
文字的字体大小
legend.pageTextStyle.lineHeight number
行高。
rich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
}
}
legend.pageTextStyle.width number, string
文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
legend.pageTextStyle.height number, string
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
legend.pageTextStyle.textBorderColor 值为 string 型
[default: ‘transparent’]
文字本身的描边颜色。
legend.pageTextStyle.textBorderWidth 值为 number 型
[default: 0]
文字本身的描边宽度。
legend.pageTextStyle.textShadowColor 值为 string 型
[default: ‘transparent’]
文字本身的阴影颜色。
legend.pageTextStyle.textShadowBlur 值为 number 型
[default: 0]
文字本身的阴影长度。
legend.pageTextStyle.textShadowOffsetX 值为 number 型
[default: 0]
文字本身的阴影 X 偏移。
legend.pageTextStyle.textShadowOffsetY 值为 number 型
[default: 0]
文字本身的阴影 Y 偏移。