Echarts图表如何解决legend数量过大导致遮挡图表

最新推荐文章于 2024-06-04 10:35:52 发布
最新推荐文章于 2024-06-04 10:35:52 发布
阅读量1.1w 收藏 18
点赞数 15
分类专栏： Echarts 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42274805/article/details/119598282
版权

开发Echarts图标时，经常遇到数据量过多引起的图例错乱，这个时候我们应该如何处理？

设置属性type: scroll


        legend: {
          type: 'scroll',
          orient: 'horizontal' // vertical
        }

效果如下:

horizontal效果：

 vertical效果：

 

 

AI3D_WebEngineer
关注
  • 15
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts系列：echarts中的legend名称最上面被遮挡一部分
浪潮行舟_chenjin2136
06-05 587
如果问题仍然存在，检查图表的所有配置，确保没有其他布局设置导致重叠。在调整设置时，记得在浏览器中实时查看效果，以便做出适当的调整。被遮挡的原因，通常是因为布局问题，可能涉及到。的位置、尺寸或者是与其他组件的重叠。通过调整上述属性，能够解决大部分。通过排查问题，发现以下一些解决。在 ECharts 中，遇到。的名称在图表中被遮挡。
Echarts_click.zip
10-29
6. **分组或聚合**：对于数量过多的数据点，可以考虑进行数据的分组或聚合，将相近或相似的数据合并为一个大的区块，降低用户的点击难度。 7. **动态效果**：添加动态效果，如鼠标悬浮时高亮显示，或者点击后放大...
echarts数据量过大时会造成legend很多的解决方法
最新发布
qq_54818343的博客
06-04 433
设置后可以让legend设置为一行显示，通过箭头进行上下页切换。
echarts legend过多问题解决
热门推荐
dyl0313的博客
03-13 2万+
在使用echarts 2.0的过程中发现legend过多没有分页的情况    经百度各种查没有查到想要的效果  因此自己动手扩展了一个效果，现在发布出效果  如果有问题可以问我 在调试echarts源码过程中发现有判断legend到底部放不下然后另起一排的逻辑效果，因此我就延续用了此逻辑 ，在此逻辑的基础上，判断我自己的出现分页的属性是否为true，如果是true就调用自己的方法进行分页
echarts图例过多显示问题
weixin_38912662的博客
12-29 4819
echarts图例过多时分页处理
饼图的legend文字太长和数量太多处理
青烟小生的博客
08-21 2543
在我们使用图表饼图的时候会发现因为数据太多导致页面的布局发现重叠或者不好看，比如label的文字太长了，legend的数量太多了等一些问题，所以今天我们就来聊聊遇到这些问题的是可以通过那些设置来进行改进。legend的数量太多需要进行分页处理的方法，就是给legend的添加一个。分页信息的文字样式的修改，就是正常的css样式属性，只是记得要用驼峰命名。下面是处理文字太长的行数，这里设置的是超过8个字就进行换行。分页图标箭头的设置，可以修改，可以用原本的箭头模式。的属性，就可以实现分页的效果。
echarts曲线图：legend过多问题
Yiyixiaojian的博客
08-17 1万+
echarts的官网地址 上面的例子只能满足一些简单的需求，复杂的设计的话，仔细研究它的每个属性 在公司实习，突然要修改一个图例太多的显示问题，如下图： 原来以为又什么属性可以直接设置，后来研究了好一会好像并没有； 最后我的解决方案就是：放一个大一点的div装这个chart，然后dataZoom、legend等的位置慢慢调整，比如设置bottom、top的大小。 不过这样的坏处就是，...
echarts legend太多且每个legend名称太长，导致legend与图表grid重叠问题临时解决方案
csdn_girl的博客
04-08 6296
<template> <ve-line :legend-visible="true" :toolbox="toolbox" :after-config="afterConfig" :data-empty="dataEmpty" :loading="loading" /> </template&gt...
echarts的legend过多显示分页效果
ll_883963的博客
09-17 2301
legend: { itemHeight: 12, //圆点大小 itemWidth: 12, width: "70%", itemGap: 29, type: "scroll",//这句 icon: "circle", top: 5, right: "center", textStyle: { //图例文字的样式 color: "#fff", fontSize: 14 }
echarts中图例以及tooltip过多、x轴文本过长处理、y轴区间设置
qq_40934617的博客
06-22 3510
处理echarts中图例以及tooltip过多时的样式
echars 图例太多， legend 翻页显示，图例过多处理，格式化图例显示
weixin_42634398的博客
04-21 4512
echars legend过多 翻页显示，格式化图例 最终效果展示 代码参考 legend: { type: 'scroll', // 显示分页 orient: 'vertical', right: 10, ...
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。... legend: { //orient: "vertical
matplotlib中legend位置调整解析
09-20
通过对这些参数的组合和调整，我们可以确保legend不会遮挡关键信息，同时保持图表的整洁和易读性。在实际应用中，根据具体的数据和图形设计需求，不断尝试和优化这些设置，将有助于提升图表的专业性和可理解性。
关于matplotlib-legend 位置属性 loc 使用说明
12-17
当我们在使用`matplotlib`创建图表时，为了使图形更具可读性，常常需要添加图例（legend）来解释不同线条、颜色或形状所代表的意义。`legend`函数中的`loc`参数就是用来设置图例位置的关键属性。 `loc`参数可以接受...
vue-echarts 中双y轴点击legend 控制 对应的轴和name显示和隐藏
weixin_45907435的博客
05-23 946
3、 给对象的轴设置显示与隐藏,其中yAxis 中通过show属性控制显示与隐藏，其中yAxis中的name和 legend 中 data 和 selected 需要设置。data: ['第一季度', '第二季度', '第三季度', '第四季度']//参数为 ‘苹果数量’-true/false '李子数量'-true/false。苹果数量: yAxis1,data: ['苹果数量', '李子数量'],name: '苹果数量',name: '苹果数量',name: '李子数量',name: '李子数量',
echarts 图例过多问题 解决方案
龚箭的博客
01-23 1万+
legend: { type: 'scroll', //分页类型 bottom: 10, data: (function (){ var list = []; for (var i = 1; i <=2000; i++) { list.push(i + 2000 ...
Echarts图表legend过多被遮挡
weixin_45691697的博客
07-02 4001
Echarts图表legend过多被遮挡
【echarts图标底部标签legend展示数量及字符长度限制】
AmyGeng123的博客
03-03 2194
其实很简单， 就是对legend中的data属性做特殊的处理就行了， 代码如下， 关键代码在getCharts方法中，已经在代码中做了标注。
echarts中的legend事件被外层的div事件遮挡，怎么解决
05-31
如果您使用 ECharts 绘制的图表，同时在图表外层包裹了一个 div，可能会遇到图例（legend）的点击事件被外层 div 的事件遮挡的问题。这是因为 ECharts 的图例是绘制在 canvas 上的，而 canvas 是一个独立的 HTML 元素，其内部的事件处理与外层的 div 不同。 解决该问题的方法是，可以在外层 div 上添加一个鼠标事件，并通过判断事件的 target 是否为图例元素来决定是否处理该事件。示例代码如下： ```javascript var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); // 绑定图例的点击事件 myChart.on('legendselectchanged', function(params) { console.log(params); }); // 绑定外层 div 的鼠标事件 var divDom = document.getElementById('div'); divDom.addEventListener('click', function(event) { if (event.target.tagName === 'SPAN' && event.target.className.indexOf('ec-legend-item') >= 0) { // 如果点击的是图例元素，则处理该事件 event.stopPropagation(); myChart.dispatchAction({ type: 'legendToggleSelect', name: event.target.innerText }); } }); ``` 在上述代码中，我们先通过 `myChart.on` 方法绑定了图例的点击事件，并在外层 div 上添加了一个事件监听器。当点击 div 时，我们可以通过 `event.target` 属性获取到实际被点击的元素，如果该元素是一个图例元素，则处理该事件，并通过 `myChart.dispatchAction` 方法来触发图例的展示或隐藏。同时，我们在处理事件时调用了 `event.stopPropagation` 方法来阻止事件冒泡到外层 div，从而避免了被遮挡的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值