echarts实现饼图格子圆环进度条样式

实现如图格子圆环进度条格式的数据展示，有的需求会提出要显示格子格式的进度条，其实就是将进度条分割成想要的份数，也是就想要的宽度，然后在option中设置，代码如下

let echart = echarts.init(document.getElementById("number1-echarts"));
      data = Math.round(data);
      var assistdata = [];
      for (let i = 0; i < 60; i++) {//这里可以通过更改数值进行设置格子宽度，数值越小格子越宽
        assistdata.push({
          name: "1",
          value: 1
        });
      }
      var option = {
        title:{
        },
        color: [
          "#00101d",
          "#FF8033",
        ],
        legend: {
          orient: 'vertical',
          x: 'left',
          show:false
        },
        tooltip: {
          trigger: 'item',
          formatter: "{d}%",
          show:false
        },
        graphic:[
          {
            type:'text',
            left:'center',
            top:(this.width>603)?(this.width>700?'62px':'34px'):'34px',
            z:2,
            zlevel:100,
            style:{
              text:'在线率',
              fill:"#6AC5FC",
              font:'bold 14px Microsoft YaHei',
              fontSize:this.width>603?14:12,
            }
          },
          {
            type:'text',
            left:'center',
            top:(this.width>603)?(this.width>700?'80px':'52px'):'52px',
            z:2,
            zlevel:100,
            style:{
              text:data + '%',
              fill:"#6AC5FC",
              fontWeight:700,
              fontSize:this.width>603?22:14,
            }
          },
        ],
        series: [
          {
            name: "在线率",
            type: "pie",
            silent: true,
            radius: this.width>603?(this.width>700?["56%", "70%"]:["66%", "85%"]):["66%", "90%"],
            center: (this.width>603)?(this.width>700?["50%", "45%"]:["50%", "50%"]):["50%", "50%"],
            avoidLabelOverlap: false,
            color: ["#FF8033"],
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              show: false,
              borderColor: "#0C202B",
              borderWidth: this.width>760?4:2,
            },
            data: assistdata
          },
          {
            name: "百分比",
            type: "pie",
            silent: true,
            radius: this.width>603?(this.width>700?["56%", "70%"]:["66%", "85%"]):["66%", "90%"],
            center: (this.width>603)?(this.width>700?["50%", "45%"]:["50%", "50%"]):["50%", "50%"],
            avoidLabelOverlap: false,
            color: ["transparent", "#00101d"],
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                name: "使用",
                value: data
              },
              {
                name: "未使用",
                value: 100-data
              },
            ]
          }
        ]
      };

      echart.setOption(option);