Echarts进度条详解

一、进度条的基础使用

1、进度条的基础结构

  


<script type="text/javascript">
    var progressChart = echarts.init(document.getElementById('progress'));

    var option = {
        series: [{
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: '#83bff6'
                            },
                            {
                                offset: 0.5,
                                color: '#188df0'
                            },
                            {
                                offset: 1,
                                color: '#188df0'
                            }
                        ]
                    )
                },
            },
            data: [0.5]
        }]
    };

    progressChart.setOption(option);
</script>

2、进度条的基本配置

var option = {
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, [{
                            offset: 0,
                            color: '#83bff6'
                        },
                        {
                            offset: 0.5,
                            color: '#188df0'
                        },
                        {
                            offset: 1,
                            color: '#188df0'
                        }
                    ]
                )
            },
        },
        data: [0.5] // 进度条的数值
    }]
};

二、进度条的自定义样式

1、修改进度条的颜色

itemStyle: {
    normal: {
        color: 'red'
    }
}

2、修改进度条的粗细

barWidth: 30 // 配置进度条的粗细

3、调整进度条的显示状态

showBackground: true // 是否显示背景条
backgroundColor: '#eee' // 背景条的颜色

三、进度条的额外功能

1、进度条的动画

var option = {
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, [{
                            offset: 0,
                            color: '#83bff6'
                        },
                        {
                            offset: 0.5,
                            color: '#188df0'
                        },
                        {
                            offset: 1,
                            color: '#188df0'
                        }
                    ]
                )
            },
        },
        data: [0.5],
        animationDuration: 2000 // 进度条动画的持续时间，单位为ms
    }]
};

2、使用标签展示进度条的数值

data: [{
    value: 0.5,
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: '{c}%'
        }
    }
}]

3、使用图标展示进度条的数值

data: [{
    value: 0.5,
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: '{c}%'
        }
    },
    markPoint: {
        symbol: 'triangle', // 进度条数值标记的图标
        symbolSize: 20,
        label: {
            show: false
        },
        data: [{
            x: '50%', // 进度条数值标记的位置
            y: '50%',
            value: '50%',
        }]
    }
}]

四、进度条的高级使用

1、自定义进度条的颜色和百分比

var data = [{
    value: 0.2,
    itemStyle: {
        normal: {
            color: 'red' // 自定义颜色
        }
    },
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: '{a|20%}'+'\n{b|未完成}', // 自定义百分比和文案
            rich: {
                a: {
                    fontWeight: 'bold',
                    fontSize: 18
                },
                b: {
                    color: '#999'
                }
            }
        }
    },
    markPoint: {
        symbol: 'circle',
        symbolSize: 10,
        label: {
            show: false
        },
        data: [{
            x: '50%',
            y: '50%',
        }]
    }
}, {
    value: 0.3,
    itemStyle: {
        normal: {
            color: 'purple'
        }
    },
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: '{a|30%}'+'\n{b|进行中}',
            rich: {
                a: {
                    fontWeight: 'bold',
                    fontSize: 18
                },
                b: {
                    color: '#999'
                }
            }
        }
    },
    markPoint: {
        symbol: 'circle',
        symbolSize: 10,
        label: {
            show: false
        },
        data: [{
            x: '50%',
            y: '50%',
        }]
    }
}, {
    value: 0.5,
    itemStyle: {
        normal: {
            color: 'blue'
        }
    },
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: '{a|50%}'+'\n{b|已完成}',
            rich: {
                a: {
                    fontWeight: 'bold',
                    fontSize: 18
                },
                b: {
                    color: '#999'
                }
            }
        }
    },
    markPoint: {
        symbol: 'circle',
        symbolSize: 10,
        label: {
            show: false
        },
        data: [{
            x: '50%',
            y: '50%',
        }]
    }
}];

var option = {
    series: [{
        type: 'bar',
        boundaryGap: ['0%', '100%'],
        data: data,
        barWidth: 30,
        itemStyle: {
            normal: {
                barBorderRadius: 50 // 进度条的圆角
            }
        },
        markLine: {
            lineStyle: {
                normal: {
                    color: 'gray',
                    type: 'dashed', // 进度条两端的标记
                    width: 2
                }
            },
            label: {
                normal: {
                    show: false
                }
            },
            symbolSize: 0,
            data: [{
                x: '0%',
                yAxis: 0
            }, {
                x: '100%',
                yAxis: 0
            }]
        }
    }]
};

2、自定义进度条的形状

// 在上述代码中将barWidth改为50，将barBorderRadius改为[10, 10, 0, 0]，进度条就会变成梯形的形状
barWidth: 50,
itemStyle: {
    normal: {
        barBorderRadius: [10, 10, 0, 0] // 自定义进度条的形状
    }
},

3、交互式进度条

// 点击进度条实现交互效果
progressChart.on('click', function(params) {
    console.log(params);
});