echarts三种方式处理x轴标识文本过量造成显示信息

2020-11-10 04:19 admin
echarts三种方式处理x轴标识文本过量造成显示信息不全。
echarts假如x轴标识文本过量,造成显示信息不全:
如图所示:

下边详细介绍三种方式,来处理这一难题:
处理方法1:xAxis.axisLabel 特性
 axisLabel的种类是object ,关键功效是:座标轴刻度标识的有关设定。(自然yAxis也是一样有这一特性的)
axisLabel: { 
 interval:0, 
 rotate:40 
}
 之上便可处理x轴文本显示信息不全并将文本歪斜。如图所示:

略微表述一下
   interval
     座标轴刻度标识的显示信息间距(在品类轴中合理哦),默认设置会选用标识不看重叠的方法显示信息标识(也便是默认设置会将一部分文本显示信息不全)能够设定为0强制性显示信息全部标识,假如设定为1,表明隔一个标识显示信息一个标识,假如为3,表明隔3个标识显示信息一个标识,为此类推
   rotate
     标识歪斜的视角,在品类轴的品类标识显示信息不全时能够根据转动避免标识重合(官方网那样说的)转动的视角是-90到九十度。难题来了,这一名字x轴的文本假如过长会遭受挡住,還是显示信息不全,这一情况下能够用grid特性处理
grid: { 
 left: '10%', 
 bottom:'35%' 
},
如图所示:

处理方法2:启用formatter文本垂直显示信息
 一般许多人都习惯性方法1的方法尽管并不是很极致,可是在一定水平上還是处理了一些难题。在文本并不是十分多的状况下還是能够的,觉得还没有第一种方式好
 axisLabel中应用formatter回调函数,formatter有2个主要参数,应用方式是那样的formatter:function(value,index){} ,value是品类(检测医院门诊A,老百姓医院门诊),index 是品类数据库索引。
axisLabel: { 
 interval: 0, 
 formatter:function(value) 
 return value.split("").join("\n"); 
}
 如图所示:

 文本垂直这一formatter确实有点儿太简易化了,因此大家来做一个2个字的加\n的换行。formatter以下:
axisLabel: {
 interval: 0,
 formatter:function(value){
 debugger
 var ret = "";//拼凑加\n回到的品类项 
 var maxLength = 2;//每项显示信息文本数量 
 var valLength = value.length;//X轴品类项的文本数量 
 var rowN = Math.ceil(valLength / maxLength); //品类项必须换行的行数 
 if (rowN 1)//假如品类项的文本超过3
 for (var i = 0; i rowN; i++) {
 var temp = "";//每一次提取的标识符串 
 var start = i * maxLength;//刚开始提取的部位 
 var end = start + maxLength;//完毕提取的部位 
 //这儿还可以加一个是不是是最终一行的分辨,可是不用都没有危害,那么就不用吧 
 temp = value.substring(start, end) + "\n"; 
 ret += temp; //凭着最后的标识符串 
 return ret;
 }else {
 return value; 
}
 实际效果如图所示

处理方法3:X轴品类项隔一个换行(应用formatter中index主要参数)
 全是上边的第二种方式是运用formatter中的value主要参数完成了文本拼凑\n换行的,可是index主要参数并沒有应用,如今大家就一起來应用这2个主要参数完成隔一个品类项换行。
实际效果如图所示:

 编码较为简易:
axisLabel: {
 interval: 0,
 formatter:function(value,index){
 debugger
 if (index % 2 != 0) {
 return '\n\n' + value;
 }else { 
 return value; 
}

微信小程序rich-text解析带尖括号“
  <img src= 设定echarts的Y轴只显示信息整数金额 网页页面模版 ECharts建立图型时,操纵Y轴数据信息只显示信息整数金额: 在建立柱形图时,Y轴数据信息默认设置是有小数点的,以下图: 假如无法显示小数,只显示信息整数金额能够设定minInterval特性成1确保座标轴切分刻度显示信息成整


echarts设置个性的tooltip echarts设定个性化的tooltip 网页页面模版 echarts是出色的数据图表软件,它的formatter能够设定好看的tooltip,根据function完成个性化化订制。下边的编码便可以完成下面的图的实际效果。在其中,param是电脑鼠标移动到图型上确当前主要参数,能够用它来实


echarts hover鼠标移上去改变颜色 echarts hover电脑鼠标移上来更改色调 网页页面模版 8396 echarts是百度搜索发布的一款十分出色根据js的可视性化标志转化成软件,受众群体面十分广,应用简易,出示了很多的托词,能够做柱状、地形图、饼状等各种各样数据图表。 我喜欢模版网今日在应用Echarts的时


本站內容假如沒有标明出處,全部权均归本网站,出示完全免费免费下载使用,但不可用以商业服务赢利。假如标明出處,则来源于于互连网,本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益,请致函网站站长电子邮箱,本网站当马上删掉。

联络大家