echarts图例太多做分页处理

最新推荐文章于 2024-07-18 17:15:09 发布
最新推荐文章于 2024-07-18 17:15:09 发布
阅读量1.9w 收藏 8
点赞数 2
分类专栏： JavaScript 文章标签： 数据可视化 echarts3-0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monkey_four/article/details/73331317
版权
针对echarts图例过多导致覆盖图表的问题，本文提出了一种简单的图例分页解决方案。作者介绍了如何自定义图例分页，通过计算每页显示的图例数量和总页数，动态配置echarts的legend选项。用户可以通过分页图标切换图例显示，相关代码和HTML页面使用了bootstrap插件。
摘要由CSDN通过智能技术生成

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

setLegendPagination: function() {
   
            var total =
最低0.47元/天 解锁文章
monkey_four
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echarts图例分页显示
qq_36173194的博客
09-29 9197
使用饼图展示数据是一种很常用的数据展示方法，我们可以通过其直观的看出数据的比例，对于一些数据的对比和分析是非常方便的。 最近在使用echarts插件做饼图的时候遇到了一些问题，就是在数据种类很多的时候，图例会撑破画面或是覆盖在饼图上显示，这样就会造成画面布局被打乱，体验是非常差的。 最后结合一系列资料查找总结出了一个简单明了的图例分页方法。如下： html：（图例分页按钮）
echarts数据分页
09-27
使用echarts实现柱型统计图数据分页展示，解决当展示的数据量过大时界面卡顿甚至崩溃的问题。 使用echarts实现柱型统计图数据分页展示，解决当展示的数据量过大时界面卡顿甚至崩溃的问题。
echars 图例太多， legend 翻页显示，图例过多处理，格式化图例显示
weixin_42634398的博客
04-21 4643
echars legend过多 翻页显示，格式化图例 最终效果展示 代码参考 legend: { type: 'scroll', // 显示分页 orient: 'vertical', right: 10, ...
echarts数据量过大时会造成legend很多的解决方法
qq_54818343的博客
06-04 565
设置后可以让legend设置为一行显示，通过箭头进行上下页切换。
echarts图例内容太多分页显示
最新发布
qq_56107885的博客
07-18 165
echarts饼图数据太多了怎么办?试试分页?
w1060436872的博客
02-04 1539
echarts饼图数据过多时,默认展示部分数据,全部数据分页展示
echarts图例分页+图里颜色前十固定剩下随机
qq_41820599的博客
01-20 2708
分页 前端需要写一个假分页，而统计图是一个组件。echarts官网有图例分页。通过加type：scroll就可以实现，但是图例为一行，并不是两行，所以样式不允许。 而实现两行图例我的方法是将legend用为数组，里面加两条数据。 两个data分别代表上下两行的数据。 思考 tsakKanban为父组件传入的统计图数值，比如tsakKanban传入了53条数据，而[0,53]为全集，[0,10][10,20][20,30],[30,40][40,43]为[0,53]的子集，所以我应该把全集分为十条一组。 .
echarts图例集合（1）.zip
04-08
在本文中，我们将深入探讨ECharts，一个基于JavaScript的数据可视化库，特别关注其图例组件。ECharts是由百度开发的一款开源图表库，广泛应用于Web应用中的数据可视化需求。标题"echarts图例集合（1）.zip"表明这是...
Echarts图例控制Y轴.html
09-27
因为需求是要点击echarts自身的图例控制y轴的隐藏，而echarts官方文档中是点击图例隐藏y轴上的数据，可有时候业务上需要的y轴可能很多，所以这时候需要控制显示最初显示哪些y轴，并且可以根据图例控制需要展示的Y轴...
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
这种布局方式特别适用于图例较多或者需要强调图例信息的情况。 #### 三、实现方法 ##### 1. 图例配置 为了实现图例的纵向排列，我们需要设置`legend`的相关属性: - `orient`: 设置为`'vertical'`表示垂直排列。 ...
echarts设置图例颜色和地图底色的方法实例
12-09
在ECharts中，设置图例颜色和地图底色是通过配置项进行的，这涉及到对图表样式和数据的深入理解。下面将详细讲解如何实现这一功能。 首先，图例（legend）是ECharts中用于展示数据系列的一个组件，它允许用户通过...
echarts的legend过多显示分页效果
ll_883963的博客
09-17 2330
legend: { itemHeight: 12, //圆点大小 itemWidth: 12, width: "70%", itemGap: 29, type: "scroll",//这句 icon: "circle", top: 5, right: "center", textStyle: { //图例文字的样式 color: "#fff", fontSize: 14 }
Echarts 饼图 图例过多采用分页+饼图引导线
weixin_44443380的博客
12-08 552
【代码】Echarts 饼图 图例过多采用分页+饼图引导线。
echarts图例分页legend
我的博客
02-18 1178
一定要有data字段，且data与series里的data要对应。legend中type有以下两种：plain\scroll。方法：echarts的legend里设置。
echarts legend图例分页
xxtz0522的博客
06-18 3016
效果： 方法： echarts的legend里设置type:'scroll'，且一定要有data字段，且data与series里的data一一对应 代码： this.myChart.setOption({ color: ['#404C7E', '#4C4FC9', '#8D58E1', '#F05B72', '#FBCE38', '#1A8CFF', '#00B377'], legend: { type: 'scro.
Echarts数据分页功能
fern_ok的博客
12-13 2520
一个图表要展示的数据量过多，需要通过分页才能展示完整。
echarts柱状图动态数据分页实现
weixin_49564214的博客
05-25 2095
echarts柱状图动态数据分页实现需求：后台返回数据条目不固定，实现柱状图动态分页功能 需求：后台返回数据条目不固定，实现柱状图动态分页功能 这里先定义假数据11条，比如每页5条，先预处理下timeline的data var chartData = { X: ['名称1', '名称2', '名称3', '名称4', '名称5', '名称6', '名称7', '名称8', '名称9', '名称10', '名称11'], Y1: [460, 490, 400, 530, 5
ECharts柱状图分页显示（数据循环）
m0_49529959的博客
12-23 4147
1.html代码片段 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图分页显示（数据循环）</title> <!-- 引入 echarts.js --> <script src="./echarts.min.js"></script> </head> <body>
echarts图例过长翻页
m0_65208646的博客
09-15 762
【代码】echarts图例过长翻页。
Echarts图例数据太多实现滚动效果
06-01
要实现Echarts图例数据滚动效果，可以使用Echarts自带的legend组件以及自定义滚动条插件（Scrollbar）。 首先，需要在Echarts的配置项中加入legend组件，并设置其orient属性为horizontal，使图例横向排列。然后，再加入Scrollbar插件，并将其与legend组件关联起来，使得当图例数量超过一定数量时，可以滚动显示。 以下是一个示例代码： ```javascript option = { // 其他配置项... legend: { orient: 'horizontal', data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12'], selected: { // 初始只显示部分数据 '数据1': true, '数据2': true, '数据3': true, '数据4': true, '数据5': true, '数据6': true, '数据7': true, '数据8': false, '数据9': false, '数据10': false, '数据11': false, '数据12': false } }, // 自定义滚动条插件 scrollbar: { show: true, type: 'slider', // 设置与legend组件的关联 // 注意：需要与legend组件的id一致 id: 'legend', // 滚动条的宽度和高度 // 可以根据需要进行调整 width: 10, height: 10, // 滚动条的位置和样式 // 可以根据需要进行调整 left: 'center', bottom: 0, backgroundColor: '#f5f5f5', borderColor: '#ddd', fillerColor: '#ddd', handleStyle: { color: '#a7a7a7' } } }; ``` 在以上示例中，通过设置legend组件的selected属性来控制图例的初始显示情况，然后通过设置scrollbar插件的id属性与legend组件的id相同，使得它们可以关联起来，从而实现图例滚动的效果。 需要注意的是，如果图例数量过多，滚动条可能会出现遮挡的情况，此时可以通过调整图表的大小、位置或滚动条的位置等方法来解决。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值