实现效果

实现代码

• 当前代码在 vue.js 中进行实现
• charts: 4.2.1
• 关键字 series
  • type: "pictorialBar"
  • symbolMargin：图形的两边间隔
  • symbolSize：图形的大小

<template>
  <!-- 
      带间隔的进度条
   -->
  <div class="progress-wrap" ref="echart"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "progress",
  props: {
    // 当前值
    currentValue: {
      require: true,
      type: Number,
    },
    // 总值
    grossValue: {
      require: true,
      type: Number,
    },
  },
  data() {
    return {
      // echart 实例化对象
      echart: null,
      // echart配置项
      echartOptions: {},
    };
  },
  mounted() {
    this.initEchart();
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeEchart);
  },
  watch: {
    /**
     * 更新 echart配置(当前值)
     */
    currentValue(newVal) {
      // 验证 当前值 是否存在，(0 || null || undefined 时不进行操作)
      if (!newVal) return;
      if (!this.echartOptions.series) return;

      this.echartOptions.series[0].data = [Number(newVal)];
      this.updateEchart();
    },
    /**
     * 更新 echart配置(总值)
     */
    grossValue(newVal) {
      if (!newVal) return;
      if (!this.echartOptions.xAxis) return;

      this.echartOptions.xAxis.max = [Number(newVal)];
      this.updateEchart();
    },
  },
  methods: {
    /**
     * 初始化 echart
     */
    initEchart() {
      // 实例化 echart，使用 ref代理当前实例化节点，以便完成重复调用
      this.echart = echarts.init(this.$refs.echart);

      // 配置进度条
      this.echartOptions = {
        title: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          top: "0",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 100, // 用于设置 进度条最大值
        },
        yAxis: {
          type: "category",
          data: [""],
          show: false,
        },
        series: [
          {
            data: [0], // 用于设置进度条当前值
            type: "pictorialBar",
            symbol: "rect", // 图形类型
            symbolRepeat: true,// 指定图形元素是否重复
            symbolSize: [2, 5], // 进度条 格子 大小
            symbolMargin: 1, // 进度条 格子 间距
            z: "10",
            itemStyle: {
              color: "#00ff00",// 图形的颜色
            },
          },
        ],
      };

      // 加载配置
      this.echart.setOption(this.echartOptions);
      // 绑定函数，当页面视图窗口大小发生改变后，echart大小自适应
      window.addEventListener("resize", this.resizeEchart);
    },

    /**
     * echart视图大小自适应
     */
    resizeEchart() {
      this.echart.resize();
    },

    /**
     * 更新 echart配置
     */
    updateEchart() {
      this.echart && this.echart.setOption(this.echartOptions);
    },
  },
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.progress-wrap {
  width: 100%;
  height: 100%;
  border: 1px solid #00ff00;
  border-radius: 0.26vw;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 1%;
}
</style>

写在最后

如有问题，欢迎指教，共同学习