ECharts 图例组件
我们之前看到的图表基本上都是同不同时变化展示,当时当我们需要将多条数据放在同图表中进行观察比较时,我们如何才能区分哪个代表哪个呢?所以我们就需要下面将要讲到的这个组件来帮助我们进行区分,让错综复杂的图表变得直观一些。
:
图例组件展现了不同系列的(symbol),颜色和名字。可以通过点击图例控制哪些系列。ECharts 3 中单个 ECharts 实例中可以存在多个图例组件,会方便多个图例的布局。
解释
图例是图表的辅助视觉引导组件,用以解释说明图表中各数据序列的含义及图表中数据的筛选。在 ECharts 中的图例在视觉上通常包含颜色、图表、图案两类要素,形如:
ECharts 的图例组件主要实现了两类交互:
Tips:
图例组件的引入为使用者开放了图表、隐藏的控制能力,适用于图表较多或交互要求较高的场景。但并不是多多益善,比如在移动端这种小尺寸环境,图例会占据一定的屏幕空间,而且点击交互略为别扭,应尽量避免使用。
ECharts 中的图例通过 项配置,主要包含以下几类:
下面展开讨论。
启动 legend 组件,简单是提供 legend: {show: true}
配置,基础示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
legend: { show: true },
series: [
{
name: '营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top',
},
},
areaStyle: {},
data: [, , , , , , ],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
示例中,图例项的根据 series.name
推断;图例项的颜色也会根据 series 项的颜色推断。
上例的图例数据由 series 数组推断,应用中也可选择通过 data 显式提供图例数据。data 数组接受两种类型的数值:
{
//
name: '系列1',
// 图例项的图形
icon: 'circle',
// 设置文本样式
textStyle: {
color: 'red'
}
}
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
tool@R_599_2@: { feature: { saveAsImage: {} } },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
legend: {
// 指定图例数据项
// 注意此时不必指定 show
data: ['营销', '联盟广告', '视频广告', '直接访问', '引擎'],
},
series: [
{
// 即使在图例中已经定义了 data 数组
// 在各序列中还是需要定义,并与 legend.data 数组对应
name: '营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '引擎',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
:
使用 legend.data
项时,务必注意几个要点:
legend.data
还传入对象,对象形式能够制定图例项的、、文本样式。内置的有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ 项,详情请参考 一节。示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
tool@R_599_2@: { feature: { saveAsImage: {} } },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
legend: {
// 指定图例数据项
// 注意此时不必指定 show
data: [
// 使用对象形式配置图例项
{ name: '营销' },
{
name: '联盟广告',
// 内置icon
icon: 'rect',
},
{
name: '视频广告',
// 网络
icon: 'image://' + location.origin + '/assets/imooc-.png',
},
{
name: '直接访问',
// base64 形式的icon
icon: 'image://data:image/png;base64,iVBORw0...RU5ErkJggg==',
},
// 混合使用字符串形式
'引擎',
],
},
series: [
{
// 即使在图例中已经定义了 data 数组
// 在各序列中还是需要定义,并与 legend.data 数组对应
name: '营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
{
name: '引擎',
type: 'line',
stack: '总量',
areaStyle: {},
data: [, , , , , , ],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
当图例过多时,ECharts 认会对图例元素折行处理,此时组件的高度是不可控的,可能会对图表造成某种程度的遮挡,可以考虑用图例这个问题:
启动需要设置 legend.type = scroll
与相关的有:
配置大多数与控制器的样式有关,并没有太多隐含逻辑或与其他组件的关联,故此处不展开讨论。
图例组件具备两种交互能力,一是鼠标悬停时高亮突出相应的序列图形,例如:
第二种是鼠标单击切换图例项的选中状态,控制相应图形的、隐藏,例如:
与选中态相关的有:
其中 selectedMode singlemultiple 用于设定组件是否多选,单选模式下的交互:
selected用于设定图表初始渲染时,图例项的选中状态,注意这里需要提供 key-value
对象形态的值,例如:
{
'营销': false,
'联盟广告': true,
'视频广告': false,
'直接访问': true,
'引擎': true
}
上述配置的渲染:
:
有两种接口能动态图例的选中态,一是 setOption({ legend:{ selected:{...}} })
接口 ,但这种会导致整个图表重新计算、重新渲染,较低,应尽量避免使用。
第二种是分发图例相关的 ,这种接口只会触发图例及相关序列的更新,更佳。ECharts 提供了 legendSelectlegendUnSelectlegendToggleSelectlegendScroll四种行为用以实现对图例组件的控制,规则可参考 一节。
ECharts 图例还额外的选择器模块,用以实现图例的全选、反选交互,可通过设置 legend.selector
启动,如:
与选择器相关的配置项有:
其中,selector 如下值:
selector: [
{
// 按钮类型
// all、inverse
type: 'all',
title: '全选',
},
{
type: 'inverse',
title: '反选',
},
];
// 或
selector: true;
// 或
selector: ['all', 'inverse'];
当图例项较多时,可以配合使用,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px; height: px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
function generateSeries(len = ) {
const random = (min, max) => Math.round(Math.random() * (max - min) + min);
const series = [];
for (let i = ; i < len; i++) {
const data = [];
for (let j = ; j < ; j++) {
data.push(random(, ));
}
series.push({ name: `series-${i + }`, type: 'line', smooth: true, data });
}
return series;
}
const series = generateSeries();
const option = {
tool@R_599_2@: { feature: { saveAsImage: {} }, top: },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
grid: { right: '20%' },
legend: {
show: true,
type: 'scroll',
selector: [
{ type: 'all', title: '全选' },
{ type: 'inverse', title: '反选' },
],
orient: 'vertical',
right: ,
},
series: series,
};
myChart.setOption(option);
</script>
</body>
</html>
示例: