如何在Echart環形圖中心添加自定義文字？

一、選取合適的環形圖

要在Echart環形圖中心添加自定義文字，首先需要選取一個合適的環形圖。Echart提供了多種環形圖類型，例如餅圖、環圖、玫瑰圖等。在這些類型中，如果要讓環形圖中心有足夠的空間添加自定義文字，建議選取環圖類型。

    
        option = {
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '80%'],
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '直接訪問'},
                        {value: 310, name: '郵件營銷'},
                        {value: 234, name: '聯盟廣告'},
                        {value: 135, name: '視頻廣告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        };
    

二、使用富文本組件

Echart提供了富文本組件來支持在圖表中添加自定義文字。在環圖中心添加自定義文字可以通過富文本組件裡面添加一個文本框實現。具體操作參考以下代碼片段。

    
        option = {
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '80%'],
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '直接訪問'},
                        {value: 310, name: '郵件營銷'},
                        {value: 234, name: '聯盟廣告'},
                        {value: 135, name: '視頻廣告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'custom',
                    silent:true,
                    data: [{
                        type: 'text',
                        left: 'center',
                        top: 'middle',
                        style: {
                            text: '\n自定義\n文字',
                            fill: '#000',
                            font: 'bold 20px Microsoft YaHei'
                        }
                    }]
                }
            ]
        };
    

三、調整樣式實現個性化設計

通過樣式調整，可以實現更個性化的設計效果。可以調整文字顏色、字體樣式、字體大小等。以下代碼展示如何調整自定義文字樣式。

    
        option = {
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '80%'],
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '直接訪問'},
                        {value: 310, name: '郵件營銷'},
                        {value: 234, name: '聯盟廣告'},
                        {value: 135, name: '視頻廣告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'custom',
                    silent:true,
                    data: [{
                        type: 'text',
                        left: 'center',
                        top: 'middle',
                        style: {
                            text: '\n自定義\n文字',
                            fill: '#333',
                            font: 'bold 28px Arial'
                        }
                    }]
                }
            ]
        };