当前位置: 首页 > Web前端 > CSS

echarts折线图(手机端)X轴显示不全

时间:2023-03-31 01:53:28 CSS

主要原因是X轴文字太多,需要文字倾斜角度,换行,省略X轴文字倾斜角度,换行间隔。坐标轴刻度标签的显示间隔(类目轴有效),默认以标签不重叠的方式显示。label(即部分文字默认会显示不完整)可以设置为0,强制显示所有label。如果设置为1,表示每隔一个标签显示一个标签。如果是3,表示每3个标签显示一个标签,以此类推。旋转标签的倾斜角度。当分类轴的分类标签没有完全显示时,可以旋转防止标签重叠(官方是这么说的)。旋转角度为-90到90度xAxis:{axisLabel:{interval:0,//显示X轴上的所有信息rotate:-60,//60标签倾斜的角度}}静止阻止。如果这个名字的x轴上的文字太长,会被遮挡,显示仍然不完整。这时候可以使用grid属性来解决grid:{left:'10%',bottom:'35%'},需求(中文两行,文字太多省略;日期长一行,省略fortoomuch)formatteraxisLabel中使用了Formatter回调,formatter有两个参数,使用方法为formatter:function(value,index){},value为类别(检测医院A,人民医院),index为类别索引.xAxis:{axisLabel:{格式化程序:函数(值){让ret=“”;//拼接加上\n返回的类别项letmaxLength=8;//每个项目显示的文本数if(value.length>2*maxLength){value=value.substring(0,2*maxLength-3)+"...";}让valLength=value.length;//X轴类别项的文本数letrowN=Math.ceil(valLength/maxLength);//类别项需要换行的行数if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){//判断是否有中文if(rowN>1){for(leti=0;i2*maxLength){value=value.substring(0,2*maxLength-3)+"...";}让valLength=value.length;//X轴类别项的字符数让rowN=Math.ceil(valLength/maxLength);//类别项需要包裹的行数if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){//判断是否有中文if(rowN>1){for(leti=0;i