文字越界

文字超出容器邊界。可以調整center值。

　　　　　series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]
 

　　　　　 series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '55%'],
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return
 
 params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]

文字過長重疊的問題

解決方案

第一步：調整文字的顯示大小，手機上文字可以更小，這裡我用的是8px字號

第二步：設定最小扇區角度，minAngle（最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響互動）

第三步：avoidLabelOverlap（是否啟用防止標籤重疊策略，預設預設開啟）

第四步：文字換行展示，echarts給我們提供了一個 formatter（標籤內容格式器，支援字串模板和回撥函式兩種形式，字串模板與回撥函式返回的字串均支援用

\n換行）屬性。

　　　　　series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '55%'],
            minAngle: 2, // 最小的扇區角度（0~360），用於防止某個值過小導致扇區太小影響互動
            avoidLabelOverlap: true, // 是否啟用防止標籤重疊策略
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]

 最後效果