油田电泵井电流卡片坐标系的绘制（QML canvas）

总是在网络上搜索、学习，感恩各位大佬们的无私奉献。
电泵卡片能直接反映泵的工况，虽然电流曲线可以用直角坐标系中的曲线来展示（比如用eChart等），但现场的技术人员还是喜欢看传统的圆形坐标系中的曲线，这可怎么办，于是琢磨了起来。

下面直接上代码吧，我用的是QML+webassembly，当然纯网页也基本可以用，请参考。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: win
    width: 300
    height: 300
    visible: true

    Canvas {
        id: root;
        width: win.width;
        height: win.height;

        onPaint: {
            var ctx = getContext("2d");
            if(win.width > win.height){     //以宽高最小的数值为图的尺寸
                width = win.height
                height = win.height
            }else{
                width = win.width
                height = win.width
            }

            var xWMin = width / 70 //电流坐标的细线
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#697279";
            ctx.fillStyle = "red";
            ctx.save();
            ctx.translate(width/2,height/2);
            for(var i = xWMin * 5; i < xWMin*26; i = i + xWMin*5)
            {
                ctx.beginPath();
                ctx.arc(0,0,i,0,Math.PI*2);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0,0,i+xWMin,0,Math.PI*2);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0,0,i+xWMin*2,0,Math.PI*2);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0,0,i+xWMin*3,0,Math.PI*2);
                ctx.stroke();
            }
            ctx.restore();

            ctx.lineWidth = 2; //电流坐标的粗线
            ctx.save();
            ctx.translate(width/2,height/2);
            for(var j = xWMin * 5; j < xWMin*26; j = j + xWMin*5)
            {
                ctx.beginPath();
                ctx.arc(0,0,j+xWMin*4,0,Math.PI*2);
                ctx.stroke();
            }
            ctx.restore();


            ctx.strokeStyle = "@103458";
            var rMax = xWMin * 44;
            for(var j = 0; j < 360; j += 12.86) //时间坐标的细线
            {
                ctx.save();
                if(Math.floor((j / 12.86) % 4) == 0) {//每4条曲线加一个粗线
                    ctx.lineWidth = 2;
//                    ctx.rotate(Math.PI*90/180);
                }else{
                    ctx.lineWidth = 1;
                }
//                ctx.rotate(0);

                ctx.translate(width/2,height/2);
                ctx.beginPath();
                var startAngle = (180+j-6.5) / 180;   // 内圈长度
                var endAngle = (180+j-38.5) / 180;    // 外圈长度
                var x = rMax * Math.cos(Math.PI * j / 180);
                var y = rMax * Math.sin(Math.PI * j / 180);
                ctx.arc(x, y, rMax, Math.PI * startAngle, Math.PI * endAngle, true);
                ctx.stroke();
                ctx.restore();
            }

            ctx.save();
            ctx.translate(width/2, height/2);
            ctx.font = "22px serif";
            ctx.textAlign = "center";
            ctx.fillText("文10-25井",0,-6);
            ctx.fillText("2022-11-15",0,26);

            //开始画曲线


            ctx.restore();
        }
    }


}

由于webassembly暂时还不支持数据库访问，所以电流数据的获取，我使用了websocket来获取，需要的朋友可以联系我。