echarts 饼状图的label 字段太长,超出部分不显示的解决办法,并显示数据,百分比(非后台接口返回)

在 使用echarts 做饼状图,因为label 字段太长,超出部分不显示, 要求超出部分用省略号代替,

在查找文档时,未找到对应的解决方案, 
   在综合多个解决方案后,得到以下的解决方案

  原代码:

    label: {
         formatter: '{name|{b}}\n{value|{d}%( {c})}',
        rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
      },
 
修改后的代码
    label: {
 
        formatter: function (param) {
          console.log("text", param)
          let text = param.data.name;
          if (text.length < 15) {
            // return '{name|{b}}\n{value|{d}%( {c})}'
            return text + '\n' + param.data.value + '(' + param.percent + '%)'
          } else {
            return text.substring(0, 15) + '...' + '\n' + param.data.value + '(' + param.percent + '%)'
          }
        },
        rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
      },
posted @ 2022-04-24 11:08  泽泽生龙  阅读(11222)  评论(0)    收藏  举报