您的位置:

Echarts饼图中间文字详解

一、饼图中间文字重叠

当饼图的扇区数量较多时,很容易出现中间文字重叠的情况。为了解决这个问题,可以调整中间文字的格式或位置。一种常见的方法是使用白色描边,让文字更加清晰可见。另外,也可以尝试通过设置文字的字体、大小、行高等样式属性来调整文本的显示。


option = {
    //设置中间文字样式
    series: [{
        label: {
            normal: {
                formatter: '{b|{b}}{c|{c}}{per|{d}%} ',
                rich: {
                    b: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    c: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    per: {
                        fontSize: 14,
                        lineHeight: 22
                    }
                }
            }
        },
        //设置白色描边
        itemStyle: {
            normal: {
                borderWidth: 2,
                borderColor: '#fff'
            }
        },
        data: {...}
    }]
};

二、饼图间隙

在饼图中,可能会需要为每个扇区之间增加间隙,以使饼图更加清晰可见。这时,可以使用Echarts的“roseType”属性,并设置“radius”属性的值,使相邻两个扇区之间产生距离。


option = {
    series: [{
        type: 'pie',
        //设置roseType属性
        roseType: 'radius',
        //设置radius属性的值
        radius: ['30%', '80%'],
        data: {...}
    }]
};

三、饼图中间文字位置设置

饼图中间文字的位置可以通过设置文本框的位置来进行调整,可以设置文本框的x、y坐标,或者使用Echarts提供的“left”、“right”、“center”、“top”、“bottom”等属性来设置文本框相对于容器的位置。


option = {
    series: [{
        type: 'pie',
        label: {
            //使用left、top属性设置文本框相对于容器的位置
            left: '50%',
            top: '50%',
            formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
            rich: {
                b: {
                    fontSize: 14,
                    lineHeight: 22
                },
                c: {
                    fontSize: 16,
                    lineHeight: 30
                },
                d: {
                    fontSize: 14,
                    lineHeight: 22
                }
            }
        },
        data: {...}
    }]
};

四、饼图下面显示文字

有时候需要在饼图下方添加一些说明性文字或图例,可以使用Echarts的“legend”属性来设置。同时,可以通过设置“grid”属性来控制饼图和文本的位置关系。


option = {
    legend: {
        //设置图例的位置
        bottom: 10,
        data: {...}
    },
    grid: {
        //设置图表的位置和大小
        left: '30%',
        top: 0,
        width: '70%',
        height: '70%'
    },
    series: [{
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        data: {...}
    }]
};

五、饼图中间文字换行

当饼图中间的文字较多时,可能会出现文字溢出或者文字重叠的情况。这时,可以尝试使用Echarts的“rich”属性,来设置多行文字,同时可以通过设置“lineHeight”属性来控制行高,实现文字换行的效果。


option = {
    series: [{
        type: 'pie',
        label: {
            normal: {
                //使用rich属性实现多行文字
                formatter: [
                    '{a|{a}}',
                    '{b|{b}}',
                    '{c|{c}}',
                    '{per|{d}%}'
                ].join('\n'),
                rich: {
                    a: {
                        color: '#999',
                        fontSize: 12,
                        lineHeight: 18
                    },
                    b: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    c: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    per: {
                        fontSize: 16,
                        lineHeight: 24
                    }
                }
            }
        },
        data: {...}
    }]
};

六、饼图中间文字不居中

当饼图中间的文字不居中时,可能是因为文本框的大小不被正确设置所致。可以通过设置文本框的宽度和高度来解决这个问题。


option = {
    series: [{
        type: 'pie',
        label: {
            normal: {
                formatter: '{b}\n{c} ({d}%)',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                //设置文本框的大小
                width: 130,
                height: 90
            }
        },
        data: {...}
    }]
};

七、饼状图中间放入文字

饼状图中有时需要在中间放入一些说明性的文字,这时可以通过设置“graphic”的方式,在饼状图的中心添加文字。同时,可以通过设置“z”属性来调整文字的层级关系,保证文字不被饼状图覆盖。


option = {
    series: [{
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
            //设置饼图中间文字为空
            normal: {
                show: false
            }
        },
        data: {...},
        //使用graphic添加文字
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            z: 2,
            style: {
                fill: '#333',
                text: '饼状图中间文字',
                font: '16px Microsoft YaHei'
            }
        }
    }]
};

八、饼状图文字超出屏幕

当饼状图文字超出屏幕时,可以通过设置“tooltip”属性来实现悬浮提示的功能,显示完整的文字内容。


option = {
    tooltip: {
        formatter: '{b}:{c} ({d}%)'
    },
    series: [{
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
            normal: {
                formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
                rich: {
                    b: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    c: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    d: {
                        fontSize: 14,
                        lineHeight: 22
                    }
                }
            }
        },
        data: {...},
    }]
};

九、饼图文字重叠

当扇区数量较多时,饼图中间的文字容易出现重叠的情况。这时,可以通过设置“position”属性来调整文本的位置,或者使用“labelLine”属性来连接文本框和扇区,让文本框不会出现重叠。


option = {
    series: [{
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
            normal: {
                //调整文本位置
                position: 'outside',
                formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
                rich: {
                    b: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    c: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    d: {
                        fontSize: 14,
                        lineHeight: 22
                    }
                }
            }
        },
        //使用labelLine连接文本框和扇区
        labelLine: {
            normal: {
                show: true
            }
        },
        data: {...}
    }]
};