效果图

html

<canvas :id="chartId" :width="width" :height="height"></canvas>

js

props: {
  chartData: {
    type: [String, Number],
    default: '0'
  },
  width: {
    type: String,
    default: '120'
  },
  height: {
    type: String,
    default: '110'
  },
  chartName: {
    type: String,
    default: '预制进度'
  },
  chartId:{
    type: String,
    default: 'myCanvas'
  }
},

mounted() {
  this.initCanvasYbp2();
},

initCanvasYbp2(opts = {}) {
  var canvasId = this.chartId;
  var data = isNaN(this.chartData) ? 0 : this.chartData * 2 // 值
  var center_data_font = '24px Arial'
  var center_txt_font = '14px Arial'
  var splitNumber = 35 // 刻度数量
  var max = 200 // 最大值
  var min = 0 // 最小值
  var circle_width = 10 // 仪表盘边宽
  var startAngle = 0.8 // 开始角度
  var endAngle = 2.2 // 结束角度
  var splitColor = '#5E717F' // 刻度线颜色
  // var activeSplitColor = opts['activeSplitColor'] || 'rgba(254, 206, 10, 1)'
  var activeSplitColor = [
    "#604FC4","#6D5CC9","#6852C6","#6C53C7","#7155C8","#7556C9","#7957CA","#7D58CA","#8F6DD2","#855BCC",
    '#8A5CCD','#8A5CCD','#925FCF',"#925FCF","#925FCF","#925FCF","#A364D3","#A364D3","#A364D3","#A364D3",
    "#A364D3","#A364D3","#A364D3",'#C16DD9','#C56FDA','#C56FDA','#D079DE','#D079DE','#D573DD','#DA75DE',
    '#DD76DF','#DD76DF','#E678E1','#E678E1','#EE7BE3','#EE7BE3'
  ]
  var splitWidth = 4 // 刻度线宽度
  var circle = { // 定义圆
    x: 60,
    y: 50,
    radius: 45
  }

  var every_split_rang = (endAngle - startAngle) / (splitNumber - 1)
  // 计算每一个刻度代表的数量
  var everyLineNumber = (max - min) / splitNumber
  // 转义当前数据，符合仪表盘数据规范
  var dataCopy = data - min
  var c = document.getElementById(canvasId);
  var contextCanvas = c.getContext("2d");

  // 绘制刻度与刻度值
  // 绘制刻度射线
  var angleSplit = startAngle
  contextCanvas.lineWidth = splitWidth
  for (var i = 0; i < splitNumber; i++) {
    if ((i * everyLineNumber) < dataCopy || (i * everyLineNumber) === dataCopy) {
      contextCanvas.strokeStyle = activeSplitColor[i]
    } else {
      contextCanvas.strokeStyle = splitColor
    }
    contextCanvas.save()
    contextCanvas.beginPath()
    // 刻度射线起始点
    var x0 = circle.x + (circle.radius - circle_width / 2) * Math.cos(angleSplit * Math.PI)
    var y0 = circle.y + (circle.radius - circle_width / 2) * Math.sin(angleSplit * Math.PI)
    // 刻度射线终点
    var x1 = circle.x + (circle.radius + circle_width / 2) * Math.cos(angleSplit * Math.PI)
    var y1 = y1 = circle.y + (circle.radius + circle_width / 2) * Math.sin(angleSplit * Math.PI)

    // 绘制刻度射线
    contextCanvas.moveTo(x0, y0)
    contextCanvas.lineTo(x1, y1)

    contextCanvas.stroke()
    contextCanvas.closePath()
    contextCanvas.restore()

    angleSplit += every_split_rang
  }

  // 绘制中间文本
  var centerText_X = circle.x
  var centerText_Y = circle.y
  contextCanvas.textAlign = 'center'
  contextCanvas.font = center_data_font
  contextCanvas.fillStyle = '#CBB9FF'
  contextCanvas.save()
  contextCanvas.fillText((data/2)+'%', centerText_X, centerText_Y + 10)
  contextCanvas.fill()
  contextCanvas.restore()

  contextCanvas.font = center_txt_font
  contextCanvas.fillStyle = 'rgba(255,255,255,0.6)'
  contextCanvas.fontSize = '12'
  contextCanvas.save()
  contextCanvas.fillText(this.chartName, centerText_X, centerText_Y + 45)
  contextCanvas.fill()
  contextCanvas.restore()
}