echart y轴文字过长导致解决方式

最新推荐文章于 2024-07-23 15:58:22 发布

非衣鲲化

最新推荐文章于 2024-07-23 15:58:22 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_32157851/article/details/91366779

版权

第一种是折行



axisLabel: {
  color: "#000",
  interval: 0,
 formatter : function(params){
  var newParamsName = "";
  var paramsNameNumber = params.length;
  var provideNumber = 15;
  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  if (paramsNameNumber > provideNumber) {
	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
}
},

第二种

在翻看echarts文档的过程中我看到了坐标轴文字可以自行定义模板，于是想到了我给一个固定12的字数限制，超出部分以省略号代替，这样就不会造成图形范围忽大忽小了。

axisLabel: {
  color: "#000",
  interval: 0,
  formatter: function(value) {
    if (value.length > 12) {
      return value.substring(0, 12) + "...";
    } else {
      return value;
    }
  }
},