echarts柱状图X轴或Y轴显示过长的问题及解决方法

  • Post author:
  • Post category:其他


问题原因:

我的项目X轴和Y轴的显示会过长,因为工作原因不方便用图显示,这种问题大概可以用三种方式解决,等后续有其他方式我会再次更新博客。

解决方法:

为了方便大家CV,代码根据自己需求放在yAxis中或是xAxis,因为各自的项目不同所以大家赋值的时候一定要看好,如果实在不理解我会在最后放上图片供大家参考学习,有不理解的可以评论。

1.字数溢出隐藏。

// 字数溢出隐藏

formatter: function(params){

// 超过多少字隐藏

var val = “”;

//超过六个字隐藏

if(params.length > 6){

//截取六个字

val = params.substr(0,6) + ‘…’;

return val

}else {

return params

}

2.超过多少字换行

// 超过多少字换行

// var newParamsName = “”  //最终拼接成的字符串

// var paramsNameNumber = params.length    //实际标签的个数

// var provideNumber = 7 //每行能显示的字的个数

// var rowNumber = Math.ceil(paramsNameNumber / provideNumber) //换行的话,需要显示几行和,向上取整

//判断标签的个数是否大于规定的个数,如果大于,则进行换行处理,如果不大于,即等于或小于,就返回原标签

//条件等同于rowNumber>1

// if(paramsNameNumber > provideNumber){

//循环每一行,p表示行

// for(var p = 0 ; p < rowNumber; p++){

//  var tempStr = “”    //表示每一次截取的字符串

//  var start = p * provideNumber   //开始截取的位置

//  var end = start + provideNumber   //结束截取的位置

//此处特殊处理最后一行的索引值

// if(p == rowNumber – 1){

//最后一次不换行

//  tempStr = params.substring(start,paramsNameNumber);

//} else {

//每一次拼接字符串并换行

//  tempStr = params.substring(start,end) + ‘\n’;

//}

//  newParamsName += tempStr    //最终拼成的字符串

//}

//} else {

//将旧标签的值赋值给新标签

// newParamsName = params;

//}

// 将最终的字符串返回

//return newParamsName

3.倾斜角度(感觉适合数字,太长的文字看起来不舒服,看你自己喜欢)

// 间隔

interval:10,

// 倾斜角度

rotate:10,

结语:

没怎么写过博客,复制代码的时候可能会有点乱,大家可以看图片进行参考,大佬有对写博客有更好建议的欢迎评论~



版权声明:本文为weixin_61469359原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。