0


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',//图例分页设置},},

本文转载自: https://blog.csdn.net/weixin_38912662/article/details/128484001
版权归原作者 前端攻程狮 所有, 如有侵权,请联系我们删除。

“echarts图例过多显示问题”的评论:

还没有评论