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