echarts图例过多显示问题解决方案
更新时间：2023年11月09日 09:34:28 作者：前端攻程狮
开发Echarts图标时经常遇到数据量过多引起的图例错乱,这个时候我们应该如何处理?下面这篇文章主要给大家介绍了关于echarts图例过多显示问题的解决方案,需要的朋友可以参考下
问题描述
当项目中使用echarts时，会遇到图例过多的问题，面板大小有限，本身饼图或者折线图等已占据面板大部分空间，图例过多时会使图形和图例产生压盖的情况，非常不美观
原因分析：
翻阅echarts文档时，我们发现有api可以供我们使用，当图例过多时，我们可以使用图例分页使用
解决方案：
代码参考如下：
legend: {
textStyle: {
color: "#ffffff",
size:14,
},
type: 'scroll',
pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
pageTextStyle:{
color: '#ffffff', //图例分页页码的颜色设置
},
pageIconSize: 12, //当然就是按钮的大小
pageIconInactiveColor: '#7f7f7f', // 禁用的按钮颜色
},
xAxis: {
type: 'category',
boundaryGap: true,
data: this.yearsList, //相关数据
axisLabel: {
// formatter: '{value}',
textStyle: {
color: "#ffffff",
margin: 15
},
width: 70,
overflow: 'breakAll', //图例分页设置
},
},总结
到此这篇关于echarts图例过多显示问题解决方案的文章就介绍到这了,更多相关echarts图例过多显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript 中判断变量是否为数字的示例代码,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了layui中的tab控件点击切换触发事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了JavaScript中Promise的使用，本文先介绍 Promises 相关规范，然后再通过解读一个迷你的 Promises 以加深理解，感兴趣的小伙伴们可以参考一下2016-01-01
Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
这篇文章主要介绍了Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理),需要的朋友可以参考下2015-01-01
本篇文章主要介绍了微信小程序开发（二）图片上传+服务端接收，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
断点续传即在文件上传期间因为一些原因而导致上传终止时，下次再次上传同一个文件就从上一次上传到一半的地方继续上传，以节省上传时间。本文将利用切片实现大文件断点续传功能，快来跟随小编一起学一学吧2022-03-03
这篇文章主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了webpack4从0搭建组件库的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论