Echarts实现进度条效果

最新推荐文章于 2024-04-02 08:42:54 发布

原创

最新推荐文章于 2024-04-02 08:42:54 发布 · 5.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js #数据可视化

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

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