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图例过多显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码2009-12-12
用javascript 控制表格行的展开和隐藏的代码...2007-08-08
用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱2013-08-08
这篇文章主要介绍了JavaScript正则表达式匹配<div><style>标签 的相关资料,需要的朋友可以参考下2016-03-03
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
本例为大家分享的是fixedBox固定div漂浮代码支持ie6以上大部分浏览器，需要的朋友可以参考下2014-06-06
这篇文章主要给大家介绍了关于前端项目部署后如何提示用户版本更新的相关资料,文中通过代码介绍的非常详细,对大家的工作或者学习具有一定的参考借鉴价值,需要的朋友可以参考下2024-03-03
layui是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发，这篇文章主要介绍了layui框架教程,需要的朋友可以参考下2022-09-09
大家都知道js是单线程的，执行起来是顺序的，在顺序的业务逻辑中当然没有问题，如果遇到可以并发执行的业务逻辑，再排队就很低级了！所以这里我们再来简单的谈谈JS中的异步以及如何异步。2016-08-08
JavaScript创建对象的方法有很多种，本文给大家介绍javascript创建对象的八种方法，对javascript创建对象感兴趣的朋友可以参考下本篇文章2015-11-11
弄了个很简单的例子判断IE浏览器版本是否过低，注意在IE6和IE7版本较低情况下下才看到它的提示效果，需要的朋友可以收藏下2013-11-11
最新评论