echarts纵向图表标题过长时的缩略处理

本文地址:http://www.04007.cn/article/1151.html

    使用echarts图表做页面展示的时候，有时轴上的标题文本过长，显示不全。这时如果图表是自动伸缩的话没关系，标题越长会占据越大的位置，但有时多个图表在一起展示，为了美观会控制座标轴上的标签长度或宽度，这时就需要对标题调用函数解决进行一些处理。可以对标题设置自动换行，或者设置超过一定长度时自动加省略号显示，如下图示例：本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.

    这时可以在axisLabel下添加属性和方法，当内容过长时，可以设置超过一定长度显示省略号，也可以设置按照一定长度进行内容换行处理。本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.

axisLabel: {
  interval: 0,
  margin: 5,
  fontSize: 12,	
  //超过一定长度显示省略号  
  formatter:function(value){
	return value.length > 12 ? value.substr(0, 12) + '...': value
  }
  
  //按照一定长度进行内容换行处理
  formatter:function(value){
    var val = ""
	for(var i=0; i< Math.ceil(value.length/12); i++) {
      val += value.substr(i*10, 10) + "\n"
	}
	return val;
  }
},

    在设置超过一定长度显示省略号的情况下，也可以通过设置在鼠标移动上去显示全部名称的方法。但我觉得不需要，因为在右边的数据区域，图标放上去之后本来就会显示完整的名称和数据。本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/1151.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.

手机扫码直接打开本页面