关于echarts图例lengend滚动分页问题！

有没有资深前端开发工程师解答一下，为什么echarts的图例，lengend在scroll滚动模式下，下一页的第一个，会是上一页的最后一个，这个算是官网bug吗？该怎么处理？

img

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇文章：解决小程序中引入的echarts在滑动屏幕时抖动以及不跟随scroll滑动问题 也许能够解决你的问题，你可以看下
  • 以下回答由chatgpt基于相关博客总结生成:

    这个问题并不是官方网站的bug，而是echarts本身的设计策略。

    当图例（legend）使用滚动模式时，下一页的第一项是上一页的最后一项，是为了保持图例的整体视觉一致性。这样做的目的是为了使用户在点击下一页时，能够在视觉上感知到图例的整体移动，而不会感到突兀。

    如果你希望修改这个默认行为，可以通过修改echarts源码来实现。具体步骤如下：

    1. 下载echarts的源码，并解压缩。

    2. 打开 src/component/legend/LegendView.js 文件。

    3. 在 LegendView.prototype._paginate 方法中找到以下代码：

    javascript zrUtil.each(this._contentGroup.children(), function (contentItem) { legendUtil.fadeOut(contentItem); });

    将其修改为：

    javascript var contentItems = []; zrUtil.each(this._contentGroup.children(), function (contentItem) { contentItems.push(contentItem); legendUtil.fadeOut(contentItem); });

    1. 然后找到以下代码：

    javascript for (var i = startPage * lastLineIdx; i < midLineIdx; i++) { zrUtil.each(packList[i], function (el) { el.fadeOut(); contentHeight -= el.textContentHeight; }); }

    将其修改为：

    javascript for (var i = startPage * lastLineIdx; i < midLineIdx; i++) { zrUtil.each(packList[i], function (el) { if (contentItems.indexOf(el) < 0) { el.fadeOut(); contentHeight -= el.textContentHeight; } }); }

    1. 保存并重新编译echarts源码。

    2. 使用修改后的echarts库来替换原有的库。

    请注意，修改源码可能会导致兼容性问题，并且在升级echarts时可能需要重新进行修改。因此，请在谨慎考虑后再进行修改。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

研究了一下，echarts就是这么设计的

可能是为了避免这种情况出现，最后一条有可能无法显示完全

img