动态刻度

ant.design 的进度条组件 关联 动态刻度

Html react写的 变量对着下面的js看

import { Progress  } from 'antd';
                

                    

                        
                        

                            
                        
                        

                            {
                                setVisible_rule(true)
                            }}>
                                查看信用评估规则  
                             
                        
                    
                





>Js

let indicator = {
x: 0,
y: 0,
radius: 5
}
let currentAngle = 0;
let lines = [];
let label = {
x1: 0,
y1: 0,
x2: 0,
y2: 0
};
function init() {
//起始角度
let startAngle = 0;
//结束角度
let endAngle = 359;
//步长
let step = 6;
//半径
let r1 = 185;
//半径2
let r2 = r1 - 20;
let defaultColor = "rgba(72, 126, 251, 0.3)"; //"#487EFB"
let activeColor = "rgba(247, 181, 0)";//rgba(247, 181, 0, 0.3) "#F7B500"
let labelColor = "#535353";
let progress = 0.5; //进度

let range = endAngle - startAngle;
let currentAngle = range * progress + startAngle;
currentAngle = currentAngle;
if (currentAngle < startAngle) {
    currentAngle = startAngle
}
if (currentAngle > endAngle) {
    currentAngle = endAngle
}

indicator.x = (r1 + (r1 - 5) * Math.cos(currentAngle * Math.PI / 180));
indicator.y = (r1 + (r1 - 5) * Math.sin(currentAngle * Math.PI / 180));

for (let i = startAngle; i <= endAngle; i += step) {
    let color = defaultColor;
    if (i <= currentAngle) {
        color = activeColor;
    } else {
        color = defaultColor;
    }
    let x = (r1 + (r1 - 11) * Math.cos(i * Math.PI / 180));
    let y = (r1 + (r1 - 11) * Math.sin(i * Math.PI / 180));

    let x2 = (r1 + (r2 - 11) * Math.cos(i * Math.PI / 180));
    let y2 = (r1 + (r2 - 11) * Math.sin(i * Math.PI / 180));

    lines.push({
        angle: i,
        x1: x,
        y1: y,
        x2: x2,
        y2: y2,
        color: color
    })
}
label.x1 = (r1 + r1 * Math.cos(startAngle * Math.PI / 180));
label.y1 = (r1 + r1 * Math.sin(startAngle * Math.PI / 180)) + 20;

label.x2 = (r1 + r1 * Math.cos(endAngle * Math.PI / 180)) - 20;
label.y2 = (r1 + r1 * Math.sin(endAngle * Math.PI / 180)) + 20;

}
init();

参考：[https://blog.csdn.net/u012282382/article/details/83687959](https://blog.csdn.net/u012282382/article/details/83687959)