Wechat applet - drawing dashboard

Reference article

1、 Wechat applet Canvas Self drawing chart Instrument diagram （ Clock dial ）
2、canvas Realize circular gradient progress bar

Effect display

Preface

The complete code can be moved to Reference article 1, If there is need to , Please move . Here, some modifications have been made to the style as needed , Only the code for drawing the dial is recorded here .

Code

function drawCircle(item, that) {
    
    // Define the drawing size 
    let width = windowWidth * 0.6;
    let height = windowWidth * 0.6;

    // Get the center coordinates 
    let centerPoint = {
    
        x: width / 2,
        y: height / 2
    }

    let ctx = wx.createCanvasContext('circle');

    ctx.save();
    ctx.translate(width / 2, height / 2);	// The canvas moves to the center 

    let each = 7.7; // The degree of spacing between each line 
    let len = 270 / each; // A total of 270 degree   Every time 7.7 degree   How many lines need to be drawn 
    let bili = 35 / 27; // The proportion   What value does each degree represent , Used to draw values 

	// The outermost radioactive line 
    let line = 25; // The length of each line 
    let offset = 10; //  Extra length of special degree 
	// The innermost radioactive line 
    let smallCircleWidth = 6; // Length of inner circle line 
    let offsetCircle = 15;	// The distance between the inner circle line and the bottom of the line 
    
	// Color 
    let astart = 77;
    let bstart = 188;
    let cstart = 27;

    let aend = 244;
    let bend = 14;
    let cend = 14;

    let aeach = (aend - astart) / len;
    let beach = (bend - bstart) / len;
    let ceach = (cend - cstart) / len;
    
    ctx.rotate(45 * Math.PI / 180);

    if(!item.curtemp){
    
        item.curtemp = 0;
    }
    cur = item.curtemp;

    let pre = parseInt(item.curtemp / bili / each); // Calculate the current temperature at which line 

    // Draw the middle arc 
    let offsetCircleH = 5;// The distance between the middle arc and the bottom of the line 
    // Radius of arc 
    let circleR = centerPoint.y - line - offset;
    ctx.beginPath();
    // Draw an arc 
    //  Arc start position 
    let startAngle = Math.PI * 0.5;
    //  End position of arc , A whole circle （Math.PI*2） Multiply by the scale  +  The starting position 
    let endAngle = (Math.PI * 2) * (270 / 360) + startAngle;
    //  Radian units per drawing , The smaller the size, the more uniform the color distribution , But the smaller the figure, the rougher the edge 
    const unit = 0.13;
    //  Calculate how many pieces the whole arc can be cut into according to the minimum radian unit 
    let division = parseInt((endAngle-startAngle)/unit,10);
    //  Generate gradient array 
    let start = startAngle;
    let end = start;
    for(let i = 0; i < division; i++){
    
        let color = "rgb(" + (astart + i * aeach) + "," + (bstart + i * beach) + "," + (cstart + i * ceach) + ")";
        ctx.beginPath();
        ctx.setLineCap("round");
        end = start+unit;
        ctx.setLineWidth(8);
        ctx.setStrokeStyle(color);
        ctx.arc(0,0,circleR,start,end);
        ctx.stroke();
        start+=unit;
    }
    // ctx.arc(centerPoint.x - (line + offset + offsetCircle + smallCircleWidth * 2) * 2,centerPoint.y -(line + offset + offsetCircle + smallCircleWidth * 2) * 2,circleR,(45 + 45)*Math.PI/180,(45 + 315)*Math.PI/180);
    // ctx.setLineWidth(5);
    // // Linear rendering 
    // var grad = ctx.createLinearGradient(centerPoint.x - (line + offset + offsetCircle + smallCircleWidth * 2) * 2,centerPoint.y -(line + offset + offsetCircle + smallCircleWidth * 2) * 2, (line + offset + offsetCircle + smallCircleWidth * 2) * 2 - centerPoint.x,centerPoint.y -(line + offset + offsetCircle + smallCircleWidth * 2) * 2);
    // for(let i = 0; i < len; i++){
    
    // let color = "rgb(" + (astart + i * aeach) + "," + (bstart + i * beach) + "," + (cstart + i * ceach) + ")";
    // grad.addColorStop(((len - i) * each) / 270,color);
    // }
    // ctx.setStrokeStyle(grad);
    // ctx.stroke();

	// Cycle through each line 
    for (let i = 0; i < len ; i++) {
    
        if (i > pre) {
    
            ctx.setStrokeStyle("#e0e0e0");
        } else {
    
            ctx.setStrokeStyle("rgb(" + (astart + i * aeach) + "," + (bstart + i * beach) + "," + (cstart + i * ceach) + ")");
        }
        ctx.beginPath();
        if(i == pre){
    
          ctx.setLineWidth(6);
        }else{
    
          ctx.setLineWidth(5);
        }

        // Set the end style of the outer circle line 
        ctx.setLineCap("round");
        let point = {
    
            x: 0,
            y: centerPoint.y
        }
        let arrivePoint = {
    
            x: 0,
            y: point.y - line
        }
        if (i==pre){
    
          ctx.setStrokeStyle("#149C89");
        }
        if (i==pre) {
    
            point.y = centerPoint.y - 3;
        } else {
    
            point.y = centerPoint.y - offset;
        }
        ctx.moveTo(point.x, point.y);
        ctx.lineTo(arrivePoint.x, arrivePoint.y);
        ctx.stroke();

        ctx.globalCompositeOperation="source-over";
        if (i==pre){
    
          // Draw a small circle 
          ctx.beginPath();
          ctx.setFillStyle('#f2f2f2');
          ctx.arc(arrivePoint.x, arrivePoint.y + 2,6,0,2*Math.PI);
          ctx.fill();
        }

        // Draw the inner circle line 
        ctx.beginPath();
        ctx.setStrokeStyle("#f1f1f1");
        ctx.setLineWidth(2);
        if ( i % 5 == 0){
    
          ctx.setStrokeStyle("#e7e8e9");
        }
        ctx.moveTo(arrivePoint.x, arrivePoint.y - smallCircleWidth - offsetCircle - offsetCircleH);
        ctx.lineTo(arrivePoint.x, arrivePoint.y - offsetCircle - offsetCircleH);
        ctx.stroke();

        ctx.rotate(each * Math.PI / 180);
    }

    ctx.restore();

    // Draw the value in the middle 
    let value = (item.curtemp/10 + "") || "0";
    let centerFontSize = 35;
    ctx.setFontSize(centerFontSize);
    ctx.setTextAlign("center");
    ctx.setTextBaseline("middle");
    // Set the font color according to the value 
    ctx.setFillStyle("rgb(" + (astart + pre * aeach) + "," + (bstart + pre * beach) + "," + (cstart + pre * ceach) + ")");
    ctx.fillText(value, centerPoint.x, centerPoint.y);

    // Draw a horizontal line 
    ctx.beginPath(); // Create a path 
    ctx.setStrokeStyle("rgb(" + (astart + pre * aeach) + "," + (bstart + pre * beach) + "," + (cstart + pre * ceach) + ")");   // Set the border to red 
    ctx.setLineWidth(3);
    ctx.moveTo(centerPoint.x - 30,centerPoint.y + (centerFontSize / 2) ) // The starting point of the description path is touched by fingers x Axis and y Axis 
    ctx.lineTo(centerPoint.x + 30,centerPoint.y + (centerFontSize / 2) ) // Draw a line , The end coordinate is after the finger touch x Axis and y Axis 
    ctx.stroke()

    // Drawing unit 
    ctx.setFontSize(15);
    ctx.setTextAlign("center");
    ctx.setTextBaseline("top");
    ctx.setFillStyle("#000");

    // let unitFontSize = 10;
    // ctx.setFontSize(unitFontSize);
    // ctx.setTextAlign("left");
    // ctx.setTextBaseline("top");
    // ctx.setFillStyle("#000");
    // ctx.fillText("mmo/L", centerPoint.x + (value.length * centerFontSize / 3.5), centerPoint.y - centerFontSize / 2);

    ctx.fillText("mmo/L", centerPoint.x, centerPoint.y + centerFontSize / 2 + 5);

    // Draw scale units 
    let unitFontSize = 10;
    ctx.setTextAlign("center");
    ctx.setTextBaseline("middle");
    ctx.setFillStyle("#666");
    // The radius of the scale unit circle 
    let r = centerPoint.x -  line - offset - offsetCircle - smallCircleWidth * 2;

    // scale "0"
    ctx.setFontSize(unitFontSize);
    let xy0 = {
    
      x:centerPoint.x - r * Math.cos(45 * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos(45 * Math.PI / 180)
    }
    ctx.fillText(0 + "", xy0.x, xy0.y) ;

    // scale “5”
    ctx.setFontSize(unitFontSize);
    let xy1 = {
    
      x:centerPoint.x - r * Math.cos((45 - 5 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 5 * each) * Math.PI / 180)
    }
    ctx.fillText(5 + "", xy1.x, xy1.y);

    // scale “10”
    ctx.setFontSize(unitFontSize);
    let xy2 = {
    
      x:centerPoint.x - r * Math.cos((45 - 10 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 10 * each) * Math.PI / 180)
    }
    ctx.fillText(10 + "", xy2.x, xy2.y);

    // scale “15”
    ctx.setFontSize(unitFontSize);
    let xy3 = {
    
      x:centerPoint.x - r * Math.cos((45 - 15 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 15 * each) * Math.PI / 180)
    }
    ctx.fillText(15 + "", xy3.x, xy3.y);

    // scale “20”
    ctx.setFontSize(unitFontSize);
    let xy4 = {
    
      x:centerPoint.x - r * Math.cos((45 - 20 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 20 * each) * Math.PI / 180)
    }
    ctx.fillText(20 + "", xy4.x, xy4.y);

    // scale “25”
    ctx.setFontSize(unitFontSize);
    let xy5 = {
    
      x:centerPoint.x - r * Math.cos((45 - 25 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 25 * each) * Math.PI / 180)
    }
    ctx.fillText(25 + "", xy5.x, xy5.y);

    // scale “30”
    ctx.setFontSize(unitFontSize);
    let xy6 = {
    
      x:centerPoint.x - r * Math.cos((45 - 30 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 30 * each) * Math.PI / 180)
    }
    ctx.fillText(30 + "", xy6.x, xy6.y);

    // scale “35”
    ctx.setFontSize(unitFontSize);
    let xy7 = {
    
      x:centerPoint.x - r * Math.cos((45 - 35 * each) * Math.PI / 180),
      y:centerPoint.y +  r * Math.cos((45 + 35 * each) * Math.PI / 180)
    }
    ctx.fillText(35 + "", xy7.x, xy7.y);

    ctx.draw();

}