Echarts实现进度条效果

最新推荐文章于 2025-06-18 17:48:43 发布

小月鸭

最新推荐文章于 2025-06-18 17:48:43 发布

阅读量5.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js 文章标签： echarts js 数据可视化

本文链接：https://blog.youkuaiyun.com/pyj2017/article/details/117083838

js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用Echarts库创建一个动态的进度条效果。通过设置`xAxis`和`yAxis`的参数，隐藏坐标轴，并利用`barWidth`、`barMinHeight`和`LinearGradient`渐变色实现美观的条形效果。同时，通过`barGap`设置负值使两个条形重叠，展示进度变化。最后，通过`label`配置项添加内部标签，增强视觉反馈。

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

Echarts实现进度条效果

实现效果如图：
在这里插入图片描述

option = {
grid: {
                    containLabel: true,
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    }, //坐标轴在 grid 区域中的分隔线
                    axisLabel: {
                        show: false
                    }, //坐标轴刻度标签
                    axisTick: {
                        show: false
                    }, //坐标轴刻度
                    axisLine: {
                        show: false
                    }, //坐标轴轴线
                },
                yAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                },
                series: [{
                    type: "bar",
                    barWidth: 16,
                    barMinHeight: 20,
                    zlevel: 1,
                    data: [40],
                    itemStyle: {
                        normal: {
                            barBorderRadius: [0, 10, 10, 0],
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0.2,
                                color: '#359eff'
                            },
                                {
                                    offset: 1,
                                    color: "#35dbff"
                                }
                            ])
                        }
                    },

                }, {
                    type: "bar",
                    barGap: '-100%',
                    barWidth: 16,
                    data: [100],
                    itemStyle: {
                        normal: {
                            barBorderRadius: [0, 16, 16, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(75, 197, 253, 0)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(75, 197, 253, 1)'
                                }
                            ]
                            ),
                            label: {
                                show: true,
                                position: 'insideRight',
                                formatter: '   ',
                                backgroundColor: '#94f6ff',
                                distance: 0,
                                borderColor: 'rgba(255, 255, 255, 0.5)',
                                borderWidth: 3,
                                borderRadius: 10,
                                color: '#94f6ff'
                            }
                        }
                    },

                }
                ],
};