美文网首页
Echarts 饼图中间添加文字、title、graphic

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

作者: 喵喵同学嘛 | 来源:发表于2019-04-16 16:23 被阅读0次

    Echarts 的饼图中间添加文字说明 ,主要使用graphic、title来完成配置,效果图如下:


    image.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: '未完成' },
                           
                        ]
                    }
                ]
            };
    

    相关文章

      网友评论

          本文标题:Echarts 饼图中间添加文字、title、graphic

          本文链接:https://www.haomeiwen.com/subject/njnbwqtx.html