如何在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'
                        }
                    }]
                }
            ]
        };