Echarts 饼图 显示内容字体长度

当显示内容字体太长,如何设置呢:换行显示

/**
 * 获取均等换行的字符串
 * @param params 要处理的字符串
 * @param length 每行显示长度
 */
function getEqualNewlineString(params,length) {
  debugger;
  var text = "";
  var count = Math.ceil(params.length/length); //向上取整数
  //一行展示length个
  if(count > 1) {
    for (var z = 1; z <= count ; z++) {
      text += params.substr((z - 1) * length, length);
      if (z < count) {
        text += '\n';
      }
    }
  }else{
    text += params.substr(0,length);
  }
  return text;
}

1.饼图legend显示

//定义全局颜色数组
 let colorList = ['#FF2100', 
 '#FF4D00','#FF7000','#FF8D00','#FFAD00','#FFD600','#FFF500', '#E7FF00', '#8CFF3C', '#0DEE00', '#65CB7E', '#00CB9F','#00A5CC','#0099c0', '#006482'];
     
  var option = {
         legend: {
	          orient: 'vertical',
	          type: 'scroll', 
	          align: 'right',
	          right: '2%',
	          top: '0',
	          icon: 'circle',
	          itemWidth: 5,  // 设置宽度
	          itemHeight: 5, // 设置高度
	          itemGap: 15,// itemGap设置各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
	          data: nameArr,
	          formatter: function(params) {
	            return getEqualNewlineString(params,10); //调用自定义显示格式
	          },
	          textStyle: {
	            color: colorList,
	            fontSize: 10 //文字大小
	          }
        },
}

2.饼图series的label显示

 var option = {
 	 series: [
         {
               label: {
                 normal: {
                   show: true,
                   textStyle: {
                     fontSize: 10
                   },
                   formatter:function (params) {
                     //调用自定义显示格式
                     return getEqualNewlineString(params.name,10);
                   },
                 },
                 emphasis: {
                   show: true,
                 }
           	},
   	  }
   ]
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值