echarts-环形图中心显示文字（二）

最新推荐文章于 2024-08-30 16:24:48 发布

yb305小白

最新推荐文章于 2024-08-30 16:24:48 发布

阅读量2.4w

点赞数 5

分类专栏： echarts3 文章标签： echarts 环形图中间显示文字

本文链接：https://blog.csdn.net/yb305/article/details/88894036

版权

echarts3 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color:['red', '#ccc'],
            series: [
                {
                    name:'XXX站点超标率',
                    type: 'pie',
                    center: ['50%', '50%'], // 饼图的圆心坐标
                    radius: ['70%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: { //  饼图图形上的文本标签
                        normal: { // normal 是图形在默认状态下的样式
                            show: true,
                            position: 'center',
                            fontWeight: 'bold',
                            formatter: ' {a|{d}%}\n{b|{b}}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
                            rich:{
                                a:{
                                    color:'#03a9f4',
                                    padding:[0,10],
                                    fontSize:40
                                },
                                b:{
                                    color:'red',
                                    padding:[0,10],
                                    fontSize:20
                                },
                            }
                        }
                    },
                    
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[{
                            value: 40,
                            name: "超标",
                            label: {
                                normal: {
                                    show: true
                
                                }
                            }
                        },
                        {
                            value: 60,
                            name: '正常',
                            label: {
                                normal: {
                                    show: false
                                }
                            }
                        }
                    ]
                }
            ]
        };