challengeFamily/components/radar/radar.js

let width = 750; // canvas的宽
let height = 750; // canvas的高

let angleNum = 0; // 角数，即多少个数据项 【3，10】
let angleAvg = 0; // 分角度平均值
let angleOffset = 13; // 角度偏移量
let layerNum = 10; // 层数，即环层数量
let layerWidth = 0; // 层宽
let bgLineColor = '#aaa'; // 背景线条颜色
let bgLineWidth = 0; // 背景线条宽度
let centerPoint = [0, 0]; // 中心点坐标
let layerPoints = []; // 各层上的点

let wordColor = '#aaa'; // 字体颜色
let fontSize = 0; // 字体大小
// let wordArr = ['定向搜索能力', '专项技能', '学习记忆能力', '抗挫力', '销售技能', '领导力', '人际沟通','111','2222','3333']; // 字体数组
let wordArr = [];
let wordOffset = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]];
let circleWidth = 0; // 圆点宽度

// 绘制的雷达比例数据
// let dataArr = [10, 8, 9, 10, 10, 10, 4, 7, 10, 4, 7, 10, 4, 7, 10, 4, 7];
let dataArr = [];
let context =null;
let windowWidth = 0;


let radar = {
    init: function(data) {
        centerPoint = [rpx(375), rpx(320)];
        layerWidth = rpx(24);
        bgLineWidth = rpx(1.6);
        fontSize = rpx(26);
        circleWidth = rpx(8);
        if(angleNum == 9){
            wordOffset = [
                [rpx(30), rpx(40)], 
                [rpx(40), rpx(40)], 
                [rpx(110), rpx(40)], 
                [rpx(100), rpx(0)], 
                [rpx(60), rpx(15)], 
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)],
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)]
            ]; 
        }else if(angleNum == 10){
            wordOffset = [
                [rpx(30), rpx(40)], 
                [rpx(40), rpx(40)], 
                [rpx(110), rpx(40)], 
                [rpx(100), rpx(0)], 
                [rpx(100), rpx(15)], 
                [rpx(95), rpx(-5)], 
                [rpx(40), rpx(15)],
                [rpx(-10), rpx(15)],
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)]
            ]; 
        }else if(angleNum == 11){
            wordOffset = [
                [rpx(30), rpx(40)], 
                [rpx(40), rpx(40)], 
                [rpx(110), rpx(40)], 
                [rpx(90), rpx(0)], 
                [rpx(125), rpx(15)], 
                [rpx(75), rpx(-5)], 
                [rpx(30), rpx(15)],
                [rpx(-10), rpx(15)],
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)]
            ];
        }else{
            wordOffset = [
                [rpx(30), rpx(40)], 
                [rpx(40), rpx(40)], 
                [rpx(110), rpx(40)], 
                [rpx(90), rpx(0)], 
                [rpx(-25), rpx(15)], 
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)],
                [rpx(15), rpx(-5)], 
                [rpx(10), rpx(15)],
                [rpx(-10), rpx(15)]
            ];
        }
            
        
    },
    draw: function(data,canvasId,grades) {
        var obj_grades = {};
        if(grades){
            obj_grades = JSON.parse(grades);
            wordArr = Object.keys(obj_grades);
            angleNum = wordArr.length;
            angleAvg = 360 / angleNum;
            dataArr = data;
        }
        
        let n = 0, m = 0, k = 0;
        this.init(data);
        //画背景线条
        context = wx.createContext();
        context.setLineWidth(bgLineWidth);
        context.setStrokeStyle(bgLineColor);
        context.beginPath();
        context.setFontSize(fontSize);
        context.setFillStyle(wordColor);

        for(n = 0; n < layerNum; n++) {
            layerPoints[n] = [];
            for(k = 0; k < angleNum; k++) { 
                context.moveTo(centerPoint[0], centerPoint[1]);
                let offsetX = layerWidth * (n + 1) * getXParam(angleAvg * (k + 1) + angleOffset);
                let offsetY = layerWidth * (n + 1) * getYParam(angleAvg * (k + 1) + angleOffset);
                let distX = centerPoint[0] + offsetX;
                let distY = centerPoint[1] + offsetY;
                if(n == layerNum - 1) {
                    context.lineTo(distX, distY);
                    if(wordArr[k]) {
                        // console.log(k,offsetX)
                        let wordOffsetX = offsetX >= 0 ? 1 : -1;
                        wordOffsetX = distX + wordOffsetX * wordOffset[k][0];
                        // console.log('wordOffsetX',wordOffsetX)
                        let wordOffsetY = offsetY >= 0 ? 1 : -1;
                        wordOffsetY = distY + wordOffsetY * wordOffset[k][1];
                        context.fillText(wordArr[k], wordOffsetX, wordOffsetY); 
                    }
                }
                layerPoints[n][k] = [distX, distY];
            }
        }

        for(m = 0; m < layerPoints.length; m++) {
            for(n = 0; n < layerPoints[m].length; n++) {
                context.moveTo(layerPoints[m][n][0], layerPoints[m][n][1]);
                if(n < layerPoints[m].length - 1) {
                    context.lineTo(layerPoints[m][n + 1][0], layerPoints[m][n + 1][1]);
                } else {
                    context.moveTo(layerPoints[m][n][0], layerPoints[m][n][1]);
                    context.lineTo(layerPoints[m][0][0], layerPoints[m][0][1]);
                }
            }
        }
        context.stroke();

        // 绘制比例:
        context.beginPath();
        context.setStrokeStyle("rgba(238,58,67,0.7)");
        context.setFillStyle("rgba(238,58,67,0.7)");

        let isFirstPoint = true;
        let tmpPoints = [];
        for(m = 0; m < angleNum; m++) {
            tmpPoints = centerPoint;
            if(dataArr[m] > 0) {
                for(n = 0; n < layerNum; n++) {
                    if(dataArr[m] == (n + 1)) {
                        tmpPoints = layerPoints[n][m];
                        break;
                    }
                }
            }
            if(isFirstPoint) {
                context.moveTo(tmpPoints[0], tmpPoints[1]);
                isFirstPoint = false;
            } else {
                context.lineTo(tmpPoints[0], tmpPoints[1]);
            }
        }

        context.fill();
        context.stroke();
        context.closePath();

        // 绘制圆点：
       

        for(m = 0; m < angleNum; m++) {
            tmpPoints = centerPoint;
            if(dataArr[m] > 0) {
                for(n = 0; n < layerNum; n++) {
                    if(dataArr[m] == (n + 1)) {
                        tmpPoints = layerPoints[n][m];
                        break;
                    }
                }
            }
            context.beginPath();
            context.setStrokeStyle("rgba(238,58,67,0.9)");
            context.setFillStyle("rgba(238,58,67,0.9)");
            context.closePath();
            context.arc(tmpPoints[0], tmpPoints[1], circleWidth, 0, 2 * Math.PI, false);
            context.closePath();
            context.fill();
            context.stroke();
        }

        wx.drawCanvas({
            canvasId: canvasId,
            actions: context.getActions()
        });
    },
    
};

let rpx = (param) => { 
    if(windowWidth == 0) {
        wx.getSystemInfo({
            success: function (res) {
                windowWidth = res.windowWidth - 60 / (750 / res.screenWidth);
            }
        });
    }
    return Number((windowWidth / 750 * param).toFixed(2));
};

let getXParam = (angle) => {
    let param = 1;
    if(angle >= 0 && angle < 90) {
        param = 1;
    } else if(angle >= 90 && angle < 180) {
        param = -1;
        angle = 180 - angle;
    } else if(angle >= 180 && angle < 270) {
        param = -1;
        angle = angle - 180;
    } else if(angle >= 270 && angle <= 360) {
        param = 1;
        angle = 360 - angle;
    }

    let angleCos = Math.cos(Math.PI / 180 * angle);
    if(angleCos < 0) {
        angleCos = angleCos * -1;
    }
    return angleCos * param;
};

let getYParam = (angle) => {
    let param = 1;
    if(angle >= 0 && angle < 90) {
        param = 1;
    } else if(angle >= 90 && angle < 180) {
        param = 1;
        angle = 180 - angle;
    } else if(angle >= 180 && angle < 270) {
        param = -1;
        angle = angle - 180;
    } else if(angle >= 270 && angle <= 360) {
        param = -1;
        angle = 360 - angle;
    }

    let angleSin = Math.sin(Math.PI / 180 * angle);
    if(angleSin < 0) {
        angleSin = angleSin * -1;
    }
    return angleSin * param;
};

module.exports = {
    radar
};