该文只用于自己学习,有不准确或者错误之处欢迎指出。
图例组件的配置项,图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。(此处的系列的含义是,比如邮件营销就是一个系列,落实到代码上就是一个serise配置项)
(官方文档中解释非常清晰的不在此介绍,请移官方文档)
(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'
}
}]
以下必须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 :选择器按钮与图例组件之间的间隔。