宿迁做网站 宿迁网站建设,外卖平台做网站,电商运营基本知识,宣传片制作合同需求背景#xff1a;
xAxis.axisLabel. interval如果不手动设值的话#xff0c;默认就是‘auto’#xff0c;会采用标签不重叠的策略间隔显示标签。当数据量特别大的时候#xff0c;展示出来的刻度标签就会很少#xff0c;导致用户体验不好。如下图所示#xff1a; 如果…需求背景
xAxis.axisLabel. interval如果不手动设值的话默认就是‘auto’会采用标签不重叠的策略间隔显示标签。当数据量特别大的时候展示出来的刻度标签就会很少导致用户体验不好。如下图所示 如果给interval设为0让所有标签都展示出来那就会全部重叠直接看不清标签了。如下图所示 或者可以手动计算出interval的值动态设置但如果在标签不重叠的情况下能够展示出来的标签还是非常少。 所以最后采用倾斜刻度标签的方式来尽可能多的展示出坐标轴标签。 如果要设置刻度名倾斜展示需要给xAxis.axisLabel.rotate设置一个在-9090之内的值。例如chartOption.xAxis.axisLabel.rotate 60具体可以参考官网官网rotate配置地址。效果图如下
当x轴刻度标签名过长的时候会出现超过图表区域的文字被隐藏的问题
没有做任何处理的效果
解决思路
1、计算出横坐标刻度标签中最长的长度 2、根据这个长度计算出图表的grid.bottom的值。因为设置的倾斜角度是60度可以通过三角函数计算得出最大长度*Math.sin(60 * Math.PI / 180) 3、同时如果最左边的标签特别长的话还需要设置grid.left才行。grid.left也可以通过三角函数计算得出最左侧标签长度*Math.cos(60 *Math.PI / 180)。 (备注最好是取前三条标签对应的左侧宽度的最大值可以避免出现第一条很短第二条很长导致第二条长度超出的问题) 4、将计算出来的值赋给grid.left以及grid.bottom
