解決echarts圖形由於label過長導致文字顯示不全問題

使用echarts 打印餅圖，在pc沒問題，但一到移動端問題就來了，由於屏幕過小，導致label部分被遮擋

一、問題分析

如上圖這個就尷尬了，囧么辦呢？
還好echarts 提供了formatter方法

二、修改前代碼塊

    series: [
      {
        name: seriesName || '數據來源',
        type: 'pie',
        clickable: false,　　　　　　 //是否開啟點擊
        minAngle: 15,           　　 //最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響交互
        avoidLabelOverlap: true,   //是否啟用防止標簽重疊策略
        hoverAnimation: false,　　  //是否開啟 hover 在扇區上的放大動畫效果。
        silent: true,　　　　　　　　//圖形是否不響應和觸發鼠標事件
        center: ['50%', '55%'],
        radius: ['20%', '45%'],
        labelLine: { // 設置指示線的長度
          normal: {
            length: 12,
            length2: 8
          }
        },
        label: {
          normal: {
            formatter: '{b|{b}}\n{c}\n{per|{d}%} ',
            rich: {
              b: {
                fontSize: 12,
                height: 60,
                lineHeight: 20,
                align: 'center' // 設置文字居中
              },
              per: {
                color: '#eee',
                backgroundColor: '#334455',
                padding: [2, 4],
                borderRadius: 2,
                align: 'center',
              }
            }
          }
        },
        data: dataArray || [
          { value: 0, name: '存量導入數據' },
          { value: 0, name: '異構導入數據' },
          { value: 0, name: '互聯網導入數據' },
        ]
      }
    ]

三、修改label 中的normal

  label: {
    normal: {
      formatter(v) {
        let text = v.name;
        let value_format = v.value;
        let percent_format = Math.round(v.percent) + '%';
        if (text.length <= 6) {
          return `${text}\n${value_format}\n${percent_format}`;
        } else if (text.length > 6 && text.length <= 12) {
          return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${value_format}\n${percent_format}`
        } else if (text.length > 12 && text.length <= 18) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${value_format}\n${percent_format}`
        } else if (text.length > 18 && text.length <= 24) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${value_format}\n${percent_format}`
        } else if (text.length > 24 && text.length <= 30) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${value_format}\n${percent_format}`
        } else if (text.length > 30) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${value_format}\n${percent_format}`
        }
      },
      textStyle: {
        fontSize: 14
      }
    }
  },

四、預覽

OK完美解決。