Echarts 饼图中间添加文字、title、graphic

落日映苍穹つ 2023-09-23 16:07 143阅读 0赞

![80f1af2b445c47eebb3058fdcb46f05b.png][]

// 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color:["#27D9C8","#D8D8D8"],
                title:{
                    text:"80%",
                    left:"center",
                    top:"50%",
                    textStyle:{
                        color:"#27D9C8",
                        fontSize:36,
                        align:"center"
                    }
                },
                graphic:{
                    type:"text",
                    left:"center",
                    top:"40%",
                    style:{
                        text:"运动达标率",
                        textAlign:"center",
                        fill:"#333",
                        fontSize:20,
                        fontWeight:700
                    }
                },
                series: [
                    {
                        name: '运动情况',
                        type: 'pie',
                        radius: ['65%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                           
                        },
                        
                        data: [
                            { value: 80, name: '已完成' },
                            { value: 20, name: '未完成' },
                           
                        ]
                    }
                ]
            };

[80f1af2b445c47eebb3058fdcb46f05b.png]: https://img-blog.csdnimg.cn/80f1af2b445c47eebb3058fdcb46f05b.png