echarts滚动图例样式设置

您所在的位置:网站首页 图例怎么设置为一行 echarts滚动图例样式设置

echarts滚动图例样式设置

2024-07-13 06:34| 来源: 网络整理| 查看: 265

当图例数量过多时,可以使用 滚动图例(垂直) 或 滚动图例(水平).

图例的类型。可选值:

'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 } { 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 } } } { 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 偏移。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3