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
            }]
        };

 

posted @ 2019-08-09 15:53  Viola_left  阅读(2316)  评论(0编辑  收藏  举报