echarts图例太多做分页处理

最新推荐文章于 2024-07-18 17:15:09 发布

原创最新推荐文章于 2024-07-18 17:15:09 发布 · 1.9w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #echarts3-0

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

针对echarts图例过多导致覆盖图表的问题，本文提出了一种简单的图例分页解决方案。作者介绍了如何自定义图例分页，通过计算每页显示的图例数量和总页数，动态配置echarts的legend选项。用户可以通过分页图标切换图例显示，相关代码和HTML页面使用了bootstrap插件。

最近一直用echarts进行数据可视化，发现图例太多时，图例会覆盖图，比较难看，而且echarts本身好像没有太好的方法处理．
网上找了下资料，发现没有什么简单的，有的还要修改echarts源码，比较麻烦．我的比较简单，想法都是分页，所以我就自己写了个简单的图例分页方法．
大体如下图的样式:
这里写图片描述
底下的分页图标是我自己加上去的，主要就是分页的代码．当从后台拿到全部的数据后，配置项option中的legend不要给出全部的图例数据，而是根据页数和每页大小算出来的，就是常见的分页算法．但是所有的series中的name属性还是要配置的，否则不会出现legend.
下面就是分页显示图例的核心代码：

setLegendPagination: function() {
            var total = this.totalLegendData.length;
            var totalPage = Math.ceil(total / this.pageSize); //总页数
            if (this.pageNumber <= totalPage && this.pageNumber > 0) {　//保证页数在有效值范围内
                var legendData = [];
                var skip = parseInt((this.pageNumber - 1)) * (this.pageSize);
                for (var i = skip; i < skip + this.pageSize; ++i) {
                    legendData[i - skip] = this.totalLegendData[i];
                }
                $("#page_text").html(this.pageNumber + '/' + totalPage);　//分页图标中间的显示内容，如1/6,代表当前页和总的页数
                var chart = window.echarts.init(document.getElementById('chart_div'));
                chart.setOption({
                    legend: {
                        data: legendData
                    }
                })
            }
        }

其中this.totalLegendData是获得的全部legend data数组，this.pageNumber=5, this.pageSize默认设置为1,其根据用户点击分页图标进行变化．

下面是用户点击分页图标的相应事件：

   clickEvent: function(event) {
            var id = event.target.id;
            var self = event.data;
            if (id == "preIcon") {
                self.pageNumber--;
                self.setLegendPagination();
            } else if (id == "nextIcon") {
                self.pageNumber++;
                self.setLegendPagination();
            }

对应的html页面如下，用的bootstrap插件．

<div id="chart_div"></div>
<div id="legend_page">
     <span class="glyphicon glyphicon-step-backward" style="color:blue;" id="preIcon"></span>
     <span id="page_text"></span>
     <span class="glyphicon glyphicon-step-forward" style="color:red;" id="nextIcon"></span>
</div>