Echarts旭日圖-解決lable文字溢出問題

1、需求
1.1、解決lable文字溢出問題 解決方案：
1.1.1、文字隱藏，鼠標移入后展示
1.1.2、到達指定寬度后部分文字隱藏用...三個點顯示，鼠標移入后顯示全部數據
1.2、數據格式轉換
2、實現效果

3、重點代碼
4、完整代碼

var departmentPieData =[{
    "grade":[
        {
            "class":"一班",
            "director":[
                {
                    "sugar":1,
                    "student":"小黑"
                }
            ]
        }
    ],
    "school":"華南"
}]
var series = [];
departmentPieData.forEach((item,i)=>{
    let layer1 = {name:item.school,children:[]};
    series.push(layer1);
    item.grade.forEach((s,j)=>{
        let layer2 = {name:s.class,children:[]};
        layer1.children.push(layer2);
        s.director.forEach((c,w)=>{
            let layer3 = {name:c.student,value:c.sugar};
            layer2.children.push(layer3);
        })
    })
})
option = {
    title: {
        text: '標題',
        textStyle: {
            fontSize: 14,
            align: 'center'
        },
        subtextStyle: {
            align: 'center'
        },
    },
    series: {
        type: 'sunburst',

        data: series,
        radius: [0, '95%'],
        sort: null,

        emphasis: {
            focus: 'ancestor'
        },

        levels: [{}, {
            r0: '15%',
            r: '35%',
            itemStyle: {
                borderWidth: 2
            },
            label: {
                rotate: 'tangential'
            }
        }, {
            r0: '35%',
            r: '70%',
            label: {
                align: 'right'
            }
        }, {
            r0: '70%',
            r: '72%',
            label: {
                position: 'outside',
                padding: 3,
                silent: false
            },
            itemStyle: {
                borderWidth: 3
            }
        }]
    }
};

5、解決lable文字超出問題
5.1、實現效果（文字隱藏，鼠標移入顯示文字）

lable超出寬度，顯示三個點(...)，鼠標移入顯示全部文字
設置方式：

levels.label.show = true;

5.2、重點代碼

label: {
  overflow: "truncate"
},
emphasis: {
  label: {
    show: true,
    width: 9999
  },
  focus: 'ancestor'
},
levels:[{},{
  label: {
    show: false,
    width: 44,
    rotate: 'tangential'
   }
}]

5.3、完整代碼

var departmentPieData =[ {
    "salePlatforms":[
        {
            "salesPlatform":"463463",
            "couponCodeInners":[
                {
                    "num":1,
                    "couponCode":"TEST35423432"
                }
            ]
        }
    ],
    "department":"Revenue"
    },
    {
    "salePlatforms":[
        {
            "salesPlatform":"465346",
            "couponCodeInners":[
                {
                    "num":1,
                    "couponCode":"TACODE"
                }
            ]
        }
    ],
    "department":"Marketing"
    }
]
var series = [];
departmentPieData.forEach((item,i)=>{
    let layer1 = {name:item.department,children:[]};
    series.push(layer1);
    item.salePlatforms.forEach((s,j)=>{
        let layer2 = {name:s.salesPlatform,children:[]};
        layer1.children.push(layer2);
        s.couponCodeInners.forEach((c,w)=>{
            let layer3 = {name:c.couponCode,value:c.num};
            layer2.children.push(layer3);
        })
    })
})
option = {
    title: {
        text: 'WORLD COFFEE RESEARCH SENSORY LEXICON',
        textStyle: {
            fontSize: 14,
            align: 'center'
        },
        subtextStyle: {
            align: 'center'
        },
    },
    series: {
        label: {
            overflow: "truncate"
        },
        emphasis: {
              label: {
                show: true,
                width: 9999
              },
              focus: 'ancestor'
        },
        type: 'sunburst',

        data: series,
        radius: [0, '95%'],
        sort: null,

        levels: [{}, {
            r0: '15%',
            r: '35%',
            itemStyle: {
                borderWidth: 2
            },
            label: {
               show: false,
                width: 44,
               rotate: 'tangential'
            }
        }, {
            r0: '35%',
            r: '70%',
            label: {
                align: 'right'
            }
        }, {
            r0: '70%',
            r: '72%',
            label: {
                position: 'outside',
                padding: 3,
                silent: false
            },
            itemStyle: {
                borderWidth: 3
            }
        }]
    }
};

聲明：此博客為個人學習之用，如與其他作品雷同，純屬巧合，並請明示指出