Echarts的legend图例中的文字长度过长

1,如图所示,文字长度过长

 2,网上很多解决办法是通过修改textStyle/rich,去修改width:

textStyle: {
          rich:{
            a: {
              width: 11
            },
          },
        }

但是不知道是版本原因,还是啥,我怎么改都没有用

3,最后用 的formatter解决的:

const dealWith = function(name:any){
      const than = initData; //获取series中的data
      let tarValue = 0;
      for (let i = 0, l = than.length; i < l; i++) {
        if (than[i].name == name) {
          tarValue = than[i].value;
        }
      }
      let str = '';
      const len = name.length;
      let mid = 4-len;
         if(len>10){
          name=name.slice(0,10)+'...';
        }else{
          mid = 10-len;
          while(mid){
            str+='\xa0\xa0\xa0';
            mid--;
          }
          name = name+str;
        }
      } 
      return [`{a|${name + ' ' + ' ' + tarValue + '%'}}`].join('\n');
    };
 const option = {
      legend: {
        formatter:dealWith,
        textStyle: {
          rich:{
            a: {
              fontSize:16
            }
          }
        }
      }
}

4,以上的dealWith函数解决了三个问题,一个是图例文字样式问题,一个是图例文字过长添加省略号...,一个是图例文字长度不够添加空格。最后效果:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值