legend

图例组件。

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。

当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平），参见：legend.type

所有属性

legend. type 试一试

string

图例的类型。可选值：

  • 'plain'：普通图例。缺省就是普通图例。
  • 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

参见 滚动图例（垂直） 或 滚动图例（水平）。

当使用 'scroll' 时，使用这些设置进行细节配置：

legend. id

string

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

legend. show = true 试一试

boolean

legend. zlevel

number

所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

legend. z = 2

number

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

legend. left = 'auto' 试一试

stringnumber

图例组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。

legend. top = 'auto' 试一试

stringnumber

图例组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

legend. right = 'auto' 试一试

stringnumber

图例组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

legend. bottom = 'auto' 试一试

stringnumber

图例组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

legend. width = 'auto' 试一试

stringnumber

图例组件的宽度。默认自适应。

legend. height = 'auto' 试一试

stringnumber

图例组件的高度。默认自适应。

legend. orient = 'horizontal' 试一试

string

图例列表的布局朝向。

可选：

  • 'horizontal'
  • 'vertical'
legend. align = 'auto' 试一试

string

图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'。

可选：

  • 'auto'
  • 'left'
  • 'right'
legend. padding = 5 试一试

numberArray

图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]
legend. itemGap = 10 试一试

number

图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。

legend. itemWidth = 25 试一试

number

图例标记的图形宽度。

legend. itemHeight = 14 试一试

number

图例标记的图形高度。

 legend. itemStyle

Object

图例的图形样式。其属性的取值为 'inherit' 时，表示继承系列中的属性值。

 legend.itemStyle. color = inherit 试一试

Color

图形的颜色。

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，具体见option.color

 legend.itemStyle. borderColor = inherit 试一试

Color

图形的描边颜色。支持的颜色格式同 color，不支持回调函数。

 legend.itemStyle. borderWidth = auto 试一试

number

当其值为 "auto" 时，如果系列有 borderWidth 取 2，如果系列没有 borderWidth 则取 0。当其值为 "inherit" 时，始终取系列的 borderWidth。

 legend.itemStyle. borderType = inherit 试一试

stringnumberArray

描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}
 legend.itemStyle. borderDashOffset = inherit 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.itemStyle. borderCap = inherit 试一试

string

从 v5.0.0 开始支持

用于指定线段末端的绘制方式，可以是：

  • 'butt': 线段末端以方形结束。
  • 'round': 线段末端以圆形结束。
  • 'square': 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

默认值为 'butt'。 更多详情可以参考 MDN lineCap。

 legend.itemStyle. borderJoin = inherit 试一试

string

从 v5.0.0 开始支持

用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

可以是：

  • 'bevel': 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
  • 'round': 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
  • 'miter': 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。

默认值为 'bevel'。 更多详情可以参考 MDN lineJoin。

 legend.itemStyle. borderMiterLimit = inherit 试一试

number

从 v5.0.0 开始支持

用于设置斜接面限制比例。只有当 borderJoin 为 miter 时， borderMiterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

 legend.itemStyle. shadowBlur 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}
 legend.itemStyle. shadowColor 试一试

Color

阴影颜色。支持的格式同color。

 legend.itemStyle. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

 legend.itemStyle. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

 legend.itemStyle. opacity = inherit 试一试

number

图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

  legend.itemStyle. decal = inherit

Object

图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效。

如果为 'none' 表示不使用贴花图案。

所有属性

{ symbol , symbolSize , symbolKeepAspect , color , backgroundColor , dashArrayX , dashArrayY , rotation , maxTileWidth , maxTileHeight }

 legend. lineStyle

Object

图例图形中线的样式，用于诸如折线图图例横线的样式设置。其属性的取值为 'inherit' 时，表示继承系列中的属性值。

 legend.lineStyle. color = inherit 试一试

Color

线的颜色。

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，具体见option.color

 legend.lineStyle. width = auto 试一试

number

线宽。

 legend.lineStyle. type = inherit 试一试

stringnumberArray

线的类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 dashOffset 可实现更灵活的虚线效果。

例如：

{

type: [5, 10],

dashOffset: 5
}
 legend.lineStyle. dashOffset = inherit 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 type 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.lineStyle. cap = inherit 试一试

string

从 v5.0.0 开始支持

用于指定线段末端的绘制方式，可以是：

  • 'butt': 线段末端以方形结束。
  • 'round': 线段末端以圆形结束。
  • 'square': 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

默认值为 'butt'。 更多详情可以参考 MDN lineCap。

 legend.lineStyle. join = inherit 试一试

string

从 v5.0.0 开始支持

用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

可以是：

  • 'bevel': 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
  • 'round': 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
  • 'miter': 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

默认值为 'bevel'。 更多详情可以参考 MDN lineJoin。

 legend.lineStyle. miterLimit = inherit 试一试

number

从 v5.0.0 开始支持

用于设置斜接面限制比例。只有当 join 为 miter 时， miterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

 legend.lineStyle. shadowBlur = inherit 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}
 legend.lineStyle. shadowColor 试一试

Color

阴影颜色。支持的格式同color。

 legend.lineStyle. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

 legend.lineStyle. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

 legend.lineStyle. opacity = inherit 试一试

number

图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

 legend.lineStyle. inactiveColor = '#ccc'

Color

图例关闭时的线条描边颜色。

 legend.lineStyle. inactiveWidth = 2

number

图例关闭时的线条宽度。

legend. symbolRotate = 'inherit'

numberstring

图形旋转角度，类型为 number | 'inherit'。如果为 'inherit'，表示取系列的 symbolRotate。

legend. formatter

stringFunction

用来格式化图例文本，支持字符串模板和回调函数两种形式。

示例：

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}
legend. selectedMode = true 试一试

stringboolean

图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。

legend. inactiveColor = '#ccc'

Color

图例关闭时的颜色。

legend. inactiveBorderColor = '#ccc'

Color

图例关闭时的描边颜色。

legend. inactiveBorderWidth = 'auto'

numberstring

图例关闭时的描边粗细。

如果为 'auto' 表示：如果系列存在描边，则取 2，如果系列不存在描边，则取 0。

如果为 'inherit' 表示：始终取系列的描边粗细。

legend. selected

Object

图例选中状态表。

示例：

selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}
 legend. textStyle

Object

图例的公用文本样式。

 legend.textStyle. color = #333 试一试

Color

文字的颜色。

 legend.textStyle. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

  • 'normal'
  • 'italic'
  • 'oblique'
 legend.textStyle. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...
 legend.textStyle. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

 legend.textStyle. fontSize = 12 试一试

number

文字的字体大小。

 legend.textStyle. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}
 legend.textStyle. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

 legend.textStyle. borderColor 试一试

Color

文字块边框颜色。

 legend.textStyle. borderWidth 试一试

number

文字块边框宽度。

 legend.textStyle. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}
 legend.textStyle. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.textStyle. borderRadius 试一试

numberArray

文字块的圆角。

 legend.textStyle. padding 试一试

numberArray

文字块的内边距。例如：

  • padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
  • padding: 4：表示 padding: [4, 4, 4, 4]。
  • padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

 legend.textStyle. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

 legend.textStyle. shadowBlur 试一试

number

文字块的背景阴影长度。

 legend.textStyle. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

 legend.textStyle. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

 legend.textStyle. width 试一试

number

文本显示宽度。

 legend.textStyle. height 试一试

number

文本显示高度。

 legend.textStyle. textBorderColor 试一试

Color

文字本身的描边颜色。

 legend.textStyle. textBorderWidth 试一试

number

文字本身的描边宽度。

 legend.textStyle. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}
 legend.textStyle. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.textStyle. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

 legend.textStyle. textShadowBlur 试一试

number

文字本身的阴影长度。

 legend.textStyle. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

 legend.textStyle. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

 legend.textStyle. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
  • 'break' 换行
  • 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
 legend.textStyle. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

  legend.textStyle. rich

Object

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程：富文本标签

所有属性

{ <style_name> }

legend. tooltip

Object

图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}
legend. icon 试一试

string

图例项的 icon。

ECharts 提供的标记类型包括

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://example.website/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
 legend. data

Array

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。

如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。

如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。

示例

data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]
所有属性

{ name , icon , itemStyle , lineStyle , symbolRotate , inactiveColor , inactiveBorderColor , inactiveBorderWidth , textStyle }

legend. backgroundColor = 'transparent' 试一试

Color

图例背景色，默认透明。

颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'

legend. borderColor = '#ccc' 试一试

Color

图例的边框颜色。支持的颜色格式同 backgroundColor。

legend. borderWidth = 1 试一试

number

图例的边框线宽。

legend. borderRadius 试一试

numberArray

圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
legend. shadowBlur 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

注意：此配置项生效的前提是，设置了 show: true 以及值不为 transparent 的背景色 backgroundColor。

legend. shadowColor 试一试

Color

阴影颜色。支持的格式同color。

注意：此配置项生效的前提是，设置了 show: true。

legend. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

注意：此配置项生效的前提是，设置了 show: true。

legend. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

注意：此配置项生效的前提是，设置了 show: true。

legend. scrollDataIndex

number

legend.type 为 'scroll' 时有效。

图例当前最左上显示项的 dataIndex。

setOption 时指定此项的话，可决定当前图例滚动到哪里。

但是，如果仅仅想改变图例翻页，一般并不调用 setOption（因为这太重量了），仅仅使用 action legendScroll 即可。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageButtonItemGap = 5

number

legend.type 为 'scroll' 时有效。

图例控制块中，按钮和页信息之间的间隔。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageButtonGap

number

legend.type 为 'scroll' 时有效。

图例控制块和图例项之间的间隔。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageButtonPosition = 'end'

string

legend.type 为 'scroll' 时有效。

图例控制块的位置。可选值为：

  • 'start'：控制块在左或上。
  • 'end'：控制块在右或下。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageFormatter = '{current}/{total}'

stringFunction

legend.type 为 'scroll' 时有效。

图例控制块中，页信息的显示格式。默认为 '{current}/{total}'，其中 {current} 是当前页号（从 1 开始计数），{total} 是总页数。

如果 pageFormatter 使用函数，须返回字符串，参数为：

{
    current: number
    total: number
}

参见 滚动图例（垂直） 或 滚动图例（水平）。

 legend. pageIcons

Object

legend.type 为 'scroll' 时有效。

图例控制块的图标。

 legend.pageIcons. horizontal

Array

legend.orient 为 'horizontal' 时的翻页按钮图标。

是一个数组，表示 [previous page button, next page button]。默认值为 ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']，。

数组中每项，

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://example.website/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

参见 滚动图例（垂直） 或 滚动图例（水平）。

 legend.pageIcons. vertical

Array

legend.orient 为 'vertical' 时的翻页按钮图标。

是一个数组，表示 [previous page button, next page button]。默认值为 ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']，。

数组中每项，

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://example.website/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageIconColor = '#2f4554' 试一试

string

legend.type 为 'scroll' 时有效。

翻页按钮的颜色。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageIconInactiveColor = '#aaa' 试一试

string

legend.type 为 'scroll' 时有效。

翻页按钮不激活时（即翻页到头时）的颜色。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend. pageIconSize = 15 试一试

numberArray

legend.type 为 'scroll' 时有效。

翻页按钮的大小。可以是数字，也可以是数组，如 [10, 3]，表示 [宽，高]。

参见 滚动图例（垂直） 或 滚动图例（水平）。

 legend. pageTextStyle

Object

legend.type 为 'scroll' 时有效。

图例页信息的文字样式。

 legend.pageTextStyle. color = #333 试一试

Color

文字的颜色。

 legend.pageTextStyle. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

  • 'normal'
  • 'italic'
  • 'oblique'
 legend.pageTextStyle. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...
 legend.pageTextStyle. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

 legend.pageTextStyle. fontSize = 12 试一试

number

文字的字体大小。

 legend.pageTextStyle. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}
 legend.pageTextStyle. width 试一试

number

文本显示宽度。

 legend.pageTextStyle. height 试一试

number

文本显示高度。

 legend.pageTextStyle. textBorderColor 试一试

Color

文字本身的描边颜色。

 legend.pageTextStyle. textBorderWidth 试一试

number

文字本身的描边宽度。

 legend.pageTextStyle. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}
 legend.pageTextStyle. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.pageTextStyle. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

 legend.pageTextStyle. textShadowBlur 试一试

number

文字本身的阴影长度。

 legend.pageTextStyle. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

 legend.pageTextStyle. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

 legend.pageTextStyle. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
  • 'break' 换行
  • 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
 legend.pageTextStyle. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

legend. animation 试一试

boolean

图例翻页是否使用动画。

legend. animationDurationUpdate = 800 试一试

number

图例翻页时的动画时长。

 legend. emphasis

Object

  legend.emphasis. selectorLabel

Object

从 v4.4.0 开始支持

所有属性

{ show , distance , rotate , offset , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

legend. selector

booleanArray

从 v4.4.0 开始支持

图例组件中的选择器按钮，目前包括“全选”和“反选”两种功能。默认不显示，用户可手动开启，也可以手动配置每个按钮的标题。

使用方式如下：

selector: [
    {
        // 全选
        type: 'all',
        // 可以是任意你喜欢的标题
        title: '全选'
    },
    {
        // 反选
        type: 'inverse',
        // 可以是任意你喜欢的标题
        title: '反选'
    }
]

// 或
selector: true

// 或
selector: ['all', 'inverse']
 legend. selectorLabel

Object

从 v4.4.0 开始支持

选择器按钮的文本标签样式，默认显示。

 legend.selectorLabel. show = true 试一试

boolean

是否显示标签。

 legend.selectorLabel. distance = 5 试一试

number

距离图形元素的距离。

 legend.selectorLabel. rotate 试一试

number

标签旋转。从 -90 度到 90 度。正值是逆时针。

参见：label rotation。

 legend.selectorLabel. offset 试一试

Array

是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。

 legend.selectorLabel. color = '#fff' 试一试

Color

文字的颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

 legend.selectorLabel. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

  • 'normal'
  • 'italic'
  • 'oblique'
 legend.selectorLabel. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...
 legend.selectorLabel. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

 legend.selectorLabel. fontSize = 12 试一试

number

文字的字体大小。

 legend.selectorLabel. align 试一试

string

文字水平对齐方式，默认自动。

可选：

  • 'left'
  • 'center'
  • 'right'

rich 中如果没有设置 align，则会取父层级的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}
 legend.selectorLabel. verticalAlign 试一试

string

文字垂直对齐方式，默认自动。

可选：

  • 'top'
  • 'middle'
  • 'bottom'

rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}
 legend.selectorLabel. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}
 legend.selectorLabel. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

 legend.selectorLabel. borderColor 试一试

Color

文字块边框颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

 legend.selectorLabel. borderWidth 试一试

number

文字块边框宽度。

 legend.selectorLabel. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}
 legend.selectorLabel. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.selectorLabel. borderRadius 试一试

numberArray

文字块的圆角。

 legend.selectorLabel. padding 试一试

numberArray

文字块的内边距。例如：

  • padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
  • padding: 4：表示 padding: [4, 4, 4, 4]。
  • padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

 legend.selectorLabel. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

 legend.selectorLabel. shadowBlur 试一试

number

文字块的背景阴影长度。

 legend.selectorLabel. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

 legend.selectorLabel. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

 legend.selectorLabel. width 试一试

number

文本显示宽度。

 legend.selectorLabel. height 试一试

number

文本显示高度。

 legend.selectorLabel. textBorderColor 试一试

Color

文字本身的描边颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

 legend.selectorLabel. textBorderWidth 试一试

number

文字本身的描边宽度。

 legend.selectorLabel. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

  • 'solid'
  • 'dashed'
  • 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}
 legend.selectorLabel. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

 legend.selectorLabel. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

 legend.selectorLabel. textShadowBlur 试一试

number

文字本身的阴影长度。

 legend.selectorLabel. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

 legend.selectorLabel. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

 legend.selectorLabel. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
  • 'break' 换行
  • 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
 legend.selectorLabel. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

  legend.selectorLabel. rich

Object

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程：富文本标签

所有属性

{ <style_name> }

legend. selectorPosition = 'auto' 试一试

string

从 v4.4.0 开始支持

选择器的位置，可以放在图例的尾部或者头部，对应的值分别为 'end' 和 'start'。默认情况下，图例横向布局的时候，选择器放在图例的尾部；图例纵向布局的时候，选择器放在图例的头部。

legend. selectorItemGap = 7 试一试

number

从 v4.4.0 开始支持

选择器按钮之间的间隔。

legend. selectorButtonGap  = 10 试一试

number

从 v4.4.0 开始支持

选择器按钮与图例组件之间的间隔。

# echarts # java # 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开源成为金融领域创新发展的新动力引擎

开源成为金融领域创新发展的新动力引擎

avatar 开放原子开发者工作坊

开源成为推动城市数字化转型的核心动力

城市，不仅是人们工作与生活的基本载体，更是承载着亿万人民的希望与梦想。近年来，我国智慧城市建设如火如荼，开源技术的深度融合为其发展注入了新的活力。在民生、环保、公共安全、城市服务等多个领域，开源技术的应用不仅为民众带来了切实的便捷，而且促进了政府决策的科学化，显著提升了城市综合治理能力。

avatar 开放原子开发者工作坊

OpenLoong项目通过技术监督委员会（TOC）评审

OpenLoong项目通过技术监督委员会（TOC）评审

avatar 开放原子开发者工作坊