首页 前端知识 echarts图表legend高度自适应

echarts图表legend高度自适应

2024-11-05 23:11:31 前端知识 前端哥 976 558 我要收藏
一、问题描述

echarts图表的类目数据最多可以自适应到两行,超过两行的时候,会跟X轴坐标产生重叠。
在这里插入图片描述

二、处理方法

在这里插入图片描述

这里只描述思路,未提供具体代码。

计算方法:图表总高度 = grid + 间隙1 + legend + 间隙2 + dataZoom

除了legend高度外,其他高度都是固定的,因此难点在于动态计算legend高度,计算legend高度的思路如下:

1、获取图表总宽度 chartWidth

2、获取每个legend条目的宽度和间隙总和 legendWidth

3、获取legend行数,legendRowNum = legendWidth / chartWidth

4、获取legend总高度 = 行数乘以每行的高度,legendRowNum * perRowHeight

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20087.html
标签
legend
评论
会员中心 联系我 留言建议 回顶部
复制成功!