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)时,可能会使用它。

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

注意,如果不定义 rich 属性,则不能指定 widthheight

legend.pageTextStyle.height number, string

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

注意,如果不定义 rich 属性,则不能指定 widthheight

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 偏移。