echarts配置项——legend(图文介绍)

最新推荐文章于 2024-04-10 15:38:11 发布

不能被吃掉的蚂蚁

最新推荐文章于 2024-04-10 15:38:11 发布

阅读量1.3w

点赞数 4

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/wallace_yang/article/details/112098031

版权

echarts 专栏收录该内容

7 篇文章 5 订阅

订阅专栏

echarts配置项——legend

该文只用于自己学习，有不准确或者错误之处欢迎指出。

1.用途

图例组件的配置项，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。（此处的系列的含义是，比如邮件营销就是一个系列，落实到代码上就是一个serise配置项）
在这里插入图片描述

2.配置项介绍

（官方文档中解释非常清晰的不在此介绍，请移官方文档）
(1).type: 图例类型

值为’plain’：普通图例
值为’scroll’：可滚动翻页的图例。当图例数量较多时可以使用。
可翻页图例组件的具体使用方式在后文介绍。
(2).itemGap ：图例每项之间的间隔。如下图所示。
在这里插入图片描述
(3).itemWidth、itemHeight :图例标记的图形宽度高度。

(4).symbolKeepAspect :如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
(5).selectedMode :图例是否可以通过点击隐藏系列，默认开启。
(6).inactiveColor:图例关闭时的颜色。
(7).selected:可以配置图例项的默认选中状态。

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

(8).tooltip:可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：

legend: {
    formatter: function (name) {//此处的40含义为40px,值文字最大长度为40px，超长则...
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

在这里插入图片描述
（9）.icon：图例项的 icon。
可使用默认提供的’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形，没发现区别，有大佬知道请在评论区指教), ‘arrow’(箭头), ‘none’，
此外还有两个隐藏的配置项：不明白为什么没有在文档中写出，搜索echarts.js即可查看到两个隐藏的配置项。如下
在这里插入图片描述
即line(直线)、square（正方形）。
除此之外图例的icon还支持图片与svg矢量图标，这里强烈推荐svg矢量图标，因为可以像默认的icon一样切换颜色，可以到阿里巴巴的图标库复制矢量图标的代码，非常全面。具体引入用法看官方文档，介绍的很详细。
(10).data:支持在data中配置每一图例项的icon与样式

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

3.以下为可翻页（滚动）图例的配置项

以下必须legend.type 为 ‘scroll’ 时有效。

(11).scrollDataIndex:决定图例组件默认的滚动位置，设置为5则表示从第6项开始
在这里插入图片描述

(12).pageButtonItemGap:图例控制块中，按钮和页信息之间的间隔。(如下图)
在这里插入图片描述
(13).pageButtonGap:图例控制块和图例项之间的间隔。

(14).pageButtonPosition:图例控制块的位置。可选值为：

‘start’：控制块在左或上。
‘end’：控制块在右或下。
在这里插入图片描述

(15).pageFormatter:
页信息的显示格式。默认为 ‘{current}/{total}’
如果 pageFormatter 使用函数参数为

{
    current: number
    total: number
}

(16).pageIcons:图例控制块的图标。
        pageIcons.horizontal:legend.orient 为 ‘horizontal’ 时的翻页按钮图标。
        legend.orient 为 ‘vertical’ 时的翻页按钮图标。
        是一个数组，表示 [previous page button, next page button]。默认值为 [‘M0,0L20,0L10,-20z’, ‘M0,0L20,0L10,20z’]，。
数组中每项，可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。
(17).pageIconInactiveColor:翻页按钮不激活时（即翻页到头时）的颜色。
(18).pageIconSize:翻页按钮的大小。可以是数字，也可以是数组，如 [10, 3]，表示 [宽，高]。
(19). emphasis.selectorLabel：官方文档未给出解释，试了也没发现图例有任何变化，请懂得大佬在评论区解答一下。
(20).selector:选择器按钮,目前包括全选和反选两种功能
在这里插入图片描述
(21).selectorLabel:选择器按钮的文本标签样式(详见文档)
(22).selectorPosition :选择器的位置,用法与上文的pageButtonPosition相同
(23).selectorItemGap :选择器按钮之间的间隔。

(24). selectorButtonGap :选择器按钮与图例组件之间的间隔。
在这里插入图片描述