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 @   泽泽生龙  阅读(10746)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示