echarts饼图实现标签文字换行,且标签文字可以自定义文字样式

在使用echarts的过程中,有时会遇到标签文字过长导致显示不完整的问题,可能需要换行显示,需要用到标签里的formatter回调函数来解决问题。
代码如下:

// 正常情况写的是这种形式
formatter: '{a|{b}:}\n{b|{d}%}',

// 标签文字换行,则需要写成函数形式
// 可以将函数写在外面,好看点
formatter: function (params) { 
// 业务的标签文字是英文单词字符串,所以根据空格进行切割
  var newParamsName = '';
  var paramsName = params.name.split(' ')
  for (var p = 0; p < paramsName.length; p++) {
  	var tempStr = '';
	if (p === paramsName.length - 1) {
		tempStr = paramsName[p];
	  } else {
		tempStr = paramsName[p] + '\n';
	  }
		newParamsName += tempStr;
	}
	// 根据业务需求,返回对应的格式
    return '{a|' + newParamsName + '}' + '\n' + '{b|' + params.percent + '%' + '}'
    },
    // 对应样式
    rich: {
     a: {
          fontFamily: 'Verdana',
          fontStyle: 'normal',
          fontWeight: 'normal',
          color: "#fff",
          lineHeight: 24,
          fontSize: 16,
          align: 'center'
        },
     b: {
        	fontFamily: 'Verdana',
            fontStyle: 'normal',
            color: "#fff",
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: 24,
            align: 'center'
        }
 	}

返回的形式为什么要写成这样?

return '{a|' + newParamsName + '}' + '\n' + '{b|' + params.percent + '%' + '}'

因为写成函数后,如果直接写成这样

// params.percent 百分比数值
return newParamsName + '\n' + params.percent + '%';

会导致rich里面的 a、b、c、d样式样式失效,不能改变形式文字的形式。

如果标签文字是汉字,则可以用如下函数形式:

 formatter: function(params) {
        // 将标签文字按照适当的位置进行换行
        var newParamsName = '';
        var paramsNameNumber = params.name.length;
        var provideNumber = 6;  // 每行能显示的字的个数

        // 根据每行能显示的字数,计算出标签文字需要换行的次数
        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.name.substring(start, paramsNameNumber);
            } else {
              tempStr = params.name.substring(start, end) + '\n';
            }
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params.name;
        }
        // 返回的格式,根据具体的业务需求确定
        return newParamsName;
      },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值