Echarts 饼图 legend以及series中label文字超长被覆盖解决方法

如果你遇到使用饼状图时，左侧的文字太长会被覆盖，该怎么解决呢

方法一：在legend中修改formatter，这个是超出后面添加…

legend: {
    type: 'scroll',
    scrollDataIndex: 0,
    orient: 'vertical',
    left: 10,
    data: dataName,
    itemGap: 20,
    top: 'middle',
    align: 'left',
    icon: 'circle',
    formatter: (name) => {
       if (!name) return ''
       if (name.length > 10) { 10是截取的字符串长度，根据你的情况调整数值
         name = name.slice(0, 10) + '...'
       }
       return name
     }
 }

方法二：在legend中修改formatter，超出换行显示

legend: {
    type: 'scroll',
    scrollDataIndex: 0,
    orient: 'vertical',
    left: 10,
    data: dataName,
    itemGap: 20,
    top: 'middle',
    align: 'left',
    icon: 'circle',
    formatter: (name) => {
       if (!name) return ''
       return this.getEqualNewlineString(name, 10) // 根据你的需求修改参数
     }
 }

超出换行的方法

//params 要处理的字符串
//length 每行显示长度
getEqualNewlineString (params, length) {
   let text = ''
   let count = Math.ceil(params.length / length) // 向上取整数
   // 一行展示length个
   if (count > 1) {
     for (let 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
 }

下图为超出指定字符串换行的效果图

饼图series的label显示修改

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