需求：

第一版使用了canvas来画的 这次看到element 有自带的进度条组件，就尝试用了一下 。做一个笔记~

代码

  <div style="flex: 1" class="left-pro">
            <el-progress
              :text-inside="true"
              :stroke-width="30"
              :percentage="setItemProgress(item)"
              :format="format(item)"
              color="#1C4D84"
            ></el-progress>
            <div class="pro-text">{{ item.totalCount }}</div>
          </div>

相关方法代码：
后端给的数据是数值，需要转换一下

 setItemProgress(data) {
      return Math.round((data.usedCount / data.totalCount) * 100);
    },

进度条内文字显示（根据需求自定义）

format(row) {
      return () => {
        return row.usedCount;
        //  return '已使用： ' + row.usedCount + '，总数量： ' + row.totalCount
      };
    },

**注：进度条内右边显示的文字 目前这里使用了一个div标签定位在上面了。大家有好的办法也可以讨论下哈~

定位–css样式：

 .pro-text {
    position: relative;
    top: -22px;
    text-align: right;
    color: #1c4d84;
    right: 30px;
  }

实现的效果图如下：