echats 饼图改造为环形进度条（转）

最新推荐文章于 2025-03-12 17:11:22 发布

追梦的小猴子

最新推荐文章于 2025-03-12 17:11:22 发布

阅读量1.3k

点赞数

分类专栏：前端知识

前端知识专栏收录该内容

110 篇文章

订阅专栏

本文介绍了一种使用 ECharts 实现的进度条图表配置方法，通过内外圈及数据层的设置实现不同颜色及透明度的效果，适用于展示各类进度或完成度的数据可视化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结果图

代码

option = {
    backgroundColor: '#000',
    title: {
        text: "进度条",

        textStyle: {
            color: '#fff',
            fontSize: 70,
            fontWeight: 'bold'
        },
        left: 'center',
        bottom: '49%',

        itemGap: 60,
    },
    tooltip: {
        show: false,
    },
    legend: {

    },
    series: [{
            name: '内圈',
            type: 'pie',
            hoverAnimation: false,
            tooltip: {

            },
            radius: [0, "38%"],
            color: ['#55a2f2', '#0065ba', '#35a2ff', '#12cbf6'],
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    color: '#fff',
                    formatter: function(params) {
                        return params.value
                    },
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 0,
                itemStyle: {
                    normal: {
                        color: "rgba(20,198,249,1)"
                    }
                }
            }, ]
        },

        {
            name: '数据',
            type: 'pie',
            startAngle: 315,
            radius: ['50%', '60%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)"
                        }
                    }
                },
                {
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgba(20,198,249,1)"
                        }
                    }

                },
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: "rgba(4,40,50,1)"
                        }
                    }
                },

]
},

        {
            name: '外圈',
            type: 'pie',
            startAngle: 315,
            hoverAnimation: false,
            radius: ["68%", "69%"],
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '10',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)"
                        }
                    }
                },
                {
                    value: 75,
                    itemStyle: {
                        normal: {
                            color: "rgba(20,198,249,1)"
                        }
                    }
                },
            ]
        }
    ]
};
---------------------
作者：tt010175
来源：优快云
原文：https://blog.youkuaiyun.com/tt010175/article/details/86214305
版权声明：本文为博主原创文章，转载请附上博文链接！