进度条图表简单化

hey_ner2026-01-14 18:42

简单化进度条展示，利用css而非echarts

div 合集，外部灰色，内部按百分比动态设置宽度

复制代码

<div class="progress-container" id="`+ChartId+`">
     <div class="progress-bar"></div>
</div>

复制代码

const RateValue='70'
const Bar = document.querySelector(`#`+ChartId +` .progress-bar`);
if (Bar) {
    Bar .style.width = RateValue+`%`;
}

重点设置 .progress-bar 对应的css样式集

复制代码

.progress-container {
    width: 100%;
    height: 4px;
    background-color: #f5f5f5 !important; /* 浅灰色进度条背景 */
    border-radius: 2px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #67c23a, #28a745) !important; /* 绿色渐变进度条 ，可配置任意颜色*/
    border-radius: 2px;
    transition: width 0.5s ease;
}

启动

1.灰色背景条

2.占比 70%

3.占比22%

根据RateValue 动态切换