如何使用Apache ECharts创建带动画的自适应圆角单条进度线？

这类简易进度线完全可以通过Apache ECharts实现，以下是具体的实现方案：

核心实现思路 #

• 用折线图模拟进度：一条灰色线作为背景，一条绿色线根据目标数值动态显示进度长度
• 利用ECharts内置动画实现加载时的过渡效果
• 通过lineStyle配置圆角端点
• 开启ECharts的自适应特性，配合窗口resize监听实现容器宽度适配

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 进度线示例</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 进度线容器 -->
    <div id="progressLine" style="width: 100%; height: 40px;"></div>

    <script type="text/javascript">
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('progressLine'));

        // 目标进度值，可根据业务动态修改
        var progressValue = 50;

        // 配置项
        var option = {
            // 关闭网格线
            grid: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                containLabel: true
            },
            // X轴：数值范围0-100，隐藏刻度和标签
            xAxis: {
                type: 'value',
                min: 0,
                max: 100,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false }
            },
            // Y轴：完全隐藏
            yAxis: {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false }
            },
            // 动画配置
            animation: true,
            animationDuration: 1200,
            animationEasing: 'cubicOut',
            series: [
                // 灰色背景线
                {
                    type: 'line',
                    data: [100],
                    symbol: 'none', // 隐藏端点标记
                    lineStyle: {
                        color: '#e5e5e5',
                        width: 12,
                        borderRadius: 6 // 圆角半径
                    }
                },
                // 绿色进度线
                {
                    type: 'line',
                    data: [progressValue],
                    symbol: 'none',
                    lineStyle: {
                        color: '#52c41a',
                        width: 12,
                        borderRadius: 6
                    }
                }
            ]
        };

        // 渲染图表
        myChart.setOption(option);

        // 监听窗口resize，实现自适应
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        // 动态修改进度的示例（可根据业务逻辑调用）
        // function updateProgress(value) {
        //     progressValue = value;
        //     myChart.setOption({
        //         series: [
        //             { data: [100] },
        //             { data: [progressValue] }
        //         ]
        //     });
        // }
    </script>
</body>
</html>

关键配置说明 #

• 动态进度控制：绿色进度线的data值直接传入目标进度（0-100），比如值为10时，绿色线仅显示10%长度；值为100时铺满整个背景线
• 圆角端点：通过lineStyle.borderRadius设置圆角半径，数值为线宽的一半时，端点会呈现完美圆形
• 动画效果：默认开启动画，可通过animationDuration调整动画时长，animationEasing选择缓动函数（比如cubicOut实现先快后慢的自然过渡）
• 自适应容器：容器设置width: 100%，配合myChart.resize()监听窗口变化，确保进度线随容器宽度自动调整

内容的提问来源于stack exchange，提问作者TinyTiger