当我们需要展示大量的数据时，图例的展示效果也显得尤为重要。如果图例展示不够清晰，就可能会影响到用户对数据的理解和分析。本篇文章将着重探讨一种优化 ECharts 图例展示效果的方法 - 一步步实现图例分页。
一、为什么需要图例分页
在使用 ECharts 进行大量数据可视化展示时，我们可能需要展示的图例数量会非常多，如果将它们全部展示在同一个位置，往往会让图表显得很乱。而且，如果我们使用一个滚动条将图例部分遮盖起来，则这些图例显示的就会丢失，降低数据的解读效果。因此，将图例进行分页就显得尤为必要。
二、如何实现图例分页
在 ECharts 中，我们可以通过添加 legendScroll 组件来进行图例分页。图例分页的关键就在于如何计算当前图例的显示区域和需要分页显示的区域。下面我们将逐一实现图例分页的流程。
1.添加组件
首先，我们需要在 ECharts 的 option 中添加图例组件，并开启滚动条功能，代码如下：
{
...
legend: {
...
type: 'scroll',
pageIcons: {
horizontal: ['<div style="height:10px;width:20px;background-color:red;"> 其中，type 属性指定图例类型为滚动类型，pageIcons 属性为定义翻页按钮的图标样式。
2.获取最大宽度和高度
我们需要获取最大的宽度和高度，用于计算当前图例的显示范围和需要分页显示的范围。代码如下：
var maxW = 0, maxH = 0;
myChart.getOption().legend.forEach((legend) => {
var obj = myChart._componentsMap[legend.componentIndex];
if (obj.type === 'legend') {
var rect = obj.group.getBoundingRect();
maxW = Math.max(maxW, rect.width);
maxH = Math.max(maxH, rect.height);
}
});
代码中，我们通过遍历获取每个图例的 BoundingRect 对象，即得到图例的最大宽度和高度。
3.获取当前图例的位置和分页显示区域
我们需要计算出当前图例的位置和需要分页显示的区域，代码如下：
var opts = myChart.getOption(),
legend = opts.legend[0],
obj = myChart._componentsMap[legend.componentIndex],
rect = obj.group.getBoundingRect(),
w = rect.width,
h = rect.height;
var x = legend.left || 0,
y = legend.top || 0;
if (w > maxW) {
var rows = Math.ceil(w / maxW),
cols = Math.ceil(opts.legend[0].data.length / rows),
lineHeight = h + 5,
pageHeight = legend.pageButtonItemGap + (opts.legend[0].pageIcons ? 18 : 0) + lineHeight * opts.legend[0].pageFormatter.totalPages;
y += pageHeight * Math.floor(y / opts.grid[0].height);
}
首先，我们通过 legend.left 和 legend.top 属性获取图例的位置和 size。如果最大宽度小于当前图例的宽度，则计算出分页所需的行和列数、行高和分页区域的高度。随后计算出当前图例所在的 y 坐标。
4.设置图例分页位置
最后，我们需要设置图例分页的位置。ECharts 的图例分页插件提供了 setPagePosition 方法来设置分页模块的位置，代码如下：
var pageSelector = '.ec-legend-page';
if (myChart._dom) {
var pageDom = myChart._dom.querySelector(pageSelector);
if (pageDom) {
pageDom.style.bottom = 0;
pageDom.style.left = x + 'px';
pageDom.style.top = (y + h) + 'px';
pageDom.style.right = '';
}
}
代码中，我们获取分页模块的 DOM 元素，并设置其位置。值得注意的是，由于 ECharts 的分页模块初始状态是隐藏的，因此需要在图例分页方法调用后再测定位置。
三、分页效果展示
最后，让我们来看一下完整的 Echarts 图例分页示例。以下代码用于加载 Echarts 并使用如下数据进行图例展示：
var data = [];
for (var i = 0; i < 1000; i++) {
data.push('数据' + i);
}
var option = {
...
legend: [{
data: data,
top: 20,
type: 'scroll'
}],
...
};
下图为原始数据的图例展示效果：
由于数据量过大，图例的展示十分混乱，无法转译数据意义。当我们使用图例分页功能后，我们可以得到以下效果：
分页后的图例清晰、易读，提高了数据的解读效率。
总结
本文通过一步步的实现图例分页，为大家展示了如何优化 ECharts 图例展示效果。通过设置图例分页，我们可以更加清晰地展示大量的数据。希望本文能够对广大开发者有所帮助。
