Echarts 解決餅圖文字過長重疊的問題

之前在網上查找了很多關於解決餅圖文字描述過長導致重疊的問題，找了很多一直沒有一個合適的解決方案，最后自己只能花時間研究echarts文檔，功夫不負有心人，終於解決了文字重疊展示不全等問題。

廢話不多說，直接上圖上代碼

 

 這是手機屏幕的展示效果

 

下面再來說下我的解決方案

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

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

第三步：avoidLabelOverlap（是否啟用防止標簽重疊策略，默認默認開啟）

第四步：文字換行展示，echarts給我們提供了一個 formatter（標簽內容格式器，支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用 \n 換行） 屬性。

關鍵代碼如下：

series: [
            {
                type: 'pie',
                clickable:false,　　　　　　 //是否開啟點擊
                minAngle: 5,           　　 //最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響交互
                avoidLabelOverlap: true,   //是否啟用防止標簽重疊策略
                hoverAnimation:false,　　  //是否開啟 hover 在扇區上的放大動畫效果。
                silent: true,　　　　　　　　//圖形是否不響應和觸發鼠標事件
                radius: ['30%', '60%'],
                center: ['50%', '50%'],
                data: [],
                label:{
                    align: 'left',
                    normal:{
                        formatter(v) {
                            let text = Math.round(v.percent)+'%' + '' + v.name
                            if(text.length <= 8)
                            {
                                return text;
                            }else if(text.length > 8 && text.length <= 16){
                                return text = `${text.slice(0,8)}\n${text.slice(8)}`
                            }else if(text.length > 16 && text.length <= 24){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                            }else if(text.length > 24 && text.length <= 30){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                            }else if(text.length > 30){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                            }
                        },
                        textStyle : {
                            fontSize : 8
                        }
                    }
                }
            }

        ],

處理后的展示效果

  

 

還不錯吧，希望能夠幫助到有需要的童鞋。