echarts繪製餅圖時的一點特殊設置

 

最後的效果如圖，須要在中間展現的部分換行而後字體大小不一樣。

如下爲option的設置，使用rich裏面的參數來設置更多的文本樣式，使用‘\n’來控制換行

let option = {
            color: color,
            backgroundColor: '#082763',
            tooltip: {},
            legend: {
                orient: 'vertical',
                left: 10,
                top: 10,
                textStyle: {
                    color: '#fff'
                },
                data: lengendData
            },
            series: [{
                name: '',
                type: 'pie',
                radius: ['45%', '75%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#ffffff'
                        },
                        formatter: [`{x|{b}}`, `{y|{d}%}`].join('\n'),
                        rich: {
                            x: {
                                fontSize: 16, fontWeight: 'bold'
                            },
                            y: {
                                fontSize: 24, fontWeight: 'bold' } }
                    }

                }, labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: pieData
            }]
        };