echarts图例太多做分页处理

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

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

setLegendPagination: function() {
   
            var total = 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值