forestry_jian/mybusiness/target/classes/static/visualization/js/hxjdt.js

//进度条1
function hxjdt1(total,now){
    var radius = 60 //外环半径
    var thickness = 7 //圆环厚度
    var innerRadius = radius - thickness //内环半径
    var startAngle = 0 //开始角度
    var endAngle = 360 //结束角度
    var x = 0 //圆心x坐标
    var y = 0 //圆心y坐标
    var canvas = document.getElementById('tutorial1');
    canvas.width = 133;
    canvas.height = 133;

    var ctx = canvas.getContext('2d');
    ctx.translate(canvas.width / 2, canvas.height / 2); //将绘图原点移到画布中央
    ctx.rotate(angle2Radian(225)) //将画布旋转225度
    ctx.fillStyle = "#eee"; //初始填充颜色
    renderRing(startAngle, endAngle)

    //渲染函数
    function renderRing(startAngle, endAngle) {
        ctx.beginPath();

        //绘制外环
        ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

        //计算外环与内环第一个连接处的中心坐标
        var oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

        //绘制外环与内环第一个连接处的圆环
        ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        // //绘制内环
        ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

        //计算外环与内环第二个连接处的中心坐标
        var twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

        //绘制外环与内环第二个连接处的圆环
        ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        ctx.fill()
        // ctx.stroke()
    }

    //计算圆环上点的坐标
    function calcRingPoint(x, y, radius, angle) {
        var res = {}
        res.x = x + radius * Math.cos(angle * Math.PI / 180)
        res.y = y + radius * Math.sin(angle * Math.PI / 180)
        return res
    }

    //弧度转角度
    function radian2Angle(radian) {
        return 180 * radian / Math.PI
    }

    //角度转弧度
    function angle2Radian(angle) {
        return angle * Math.PI / 180
    }


    //进度条颜色
    var lingrad = ctx.createLinearGradient(0, 0, 150, 0);
    lingrad.addColorStop(0, '#11adff');
    lingrad.addColorStop(1, '#621dff');
    ctx.fillStyle = lingrad

    //开始绘画
    var tempAngle = startAngle
    var total = Number(total) ; //总分
    var now = Number(now) ; //当前分数
    var percent = now / total //百分比
    var twoEndAngle = percent * 360 + startAngle
    var step = (twoEndAngle - startAngle) / 80
    var numberSpan = document.querySelector('.number1')
    var inter = setInterval(() => {
        if (tempAngle > twoEndAngle) {
        clearInterval(inter)
    } else {
        numberSpan.innerText = now
        tempAngle += step
//            numberSpan.innerText = percent * 100
//            tempAngle += step
    }
    renderRing(startAngle, tempAngle)
}, 20)

}

//进度条2
function hxjdt2(total,now){
    var radius = 60 //外环半径
    var thickness = 7 //圆环厚度
    var innerRadius = radius - thickness //内环半径
    var startAngle = 0 //开始角度
    var endAngle = 360 //结束角度
    var x = 0 //圆心x坐标
    var y = 0 //圆心y坐标
    var canvas = document.getElementById('tutorial2');
    canvas.width = 133;
    canvas.height = 133;

    var ctx = canvas.getContext('2d');
    ctx.translate(canvas.width / 2, canvas.height / 2); //将绘图原点移到画布中央
    ctx.rotate(angle2Radian(225)) //将画布旋转225度
    ctx.fillStyle = "#eee"; //初始填充颜色
    renderRing(startAngle, endAngle)

    //渲染函数
    function renderRing(startAngle, endAngle) {
        ctx.beginPath();

        //绘制外环
        ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

        //计算外环与内环第一个连接处的中心坐标
        var oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

        //绘制外环与内环第一个连接处的圆环
        ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        // //绘制内环
        ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

        //计算外环与内环第二个连接处的中心坐标
        var twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

        //绘制外环与内环第二个连接处的圆环
        ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        ctx.fill()
        // ctx.stroke()
    }

    //计算圆环上点的坐标
    function calcRingPoint(x, y, radius, angle) {
        var res = {}
        res.x = x + radius * Math.cos(angle * Math.PI / 180)
        res.y = y + radius * Math.sin(angle * Math.PI / 180)
        return res
    }

    //弧度转角度
    function radian2Angle(radian) {
        return 180 * radian / Math.PI
    }

    //角度转弧度
    function angle2Radian(angle) {
        return angle * Math.PI / 180
    }


    //进度条颜色
    var lingrad = ctx.createLinearGradient(0, 0, 150, 0);
    lingrad.addColorStop(0, '#009a66');
    lingrad.addColorStop(1, '#31fb66');
    ctx.fillStyle = lingrad

    //开始绘画
    var tempAngle = startAngle
    var total = Number(total); //总分
    var now = Number(now); //当前分数
    var percent = now / total //百分比
    var twoEndAngle = percent * 360 + startAngle
    var step = (twoEndAngle - startAngle) / 80
    var numberSpan = document.querySelector('.number2')
    var inter = setInterval(function() {
        if (tempAngle > twoEndAngle) {
            clearInterval(inter)
        } else {
            numberSpan.innerText = now
            tempAngle += step

        }
        renderRing(startAngle, tempAngle)
    }, 20);

}
//进度条3
function hxjdt3(total,now) {


    var radius = 60 //外环半径
    var thickness = 7 //圆环厚度
    var innerRadius = radius - thickness //内环半径
    var startAngle = 0 //开始角度
    var endAngle = 360 //结束角度
    var x = 0 //圆心x坐标
    var y = 0 //圆心y坐标
    var canvas = document.getElementById('tutorial3');
    canvas.width = 133;
    canvas.height = 133;

    var ctx = canvas.getContext('2d');
    ctx.translate(canvas.width / 2, canvas.height / 2); //将绘图原点移到画布中央
    ctx.rotate(angle2Radian(225)) //将画布旋转225度
    ctx.fillStyle = "#eee"; //初始填充颜色
    renderRing(startAngle, endAngle)

    //渲染函数
    function renderRing(startAngle, endAngle) {
        ctx.beginPath();

        //绘制外环
        ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

        //计算外环与内环第一个连接处的中心坐标
        var oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

        //绘制外环与内环第一个连接处的圆环
        ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        // //绘制内环
        ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

        //计算外环与内环第二个连接处的中心坐标
        var twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

        //绘制外环与内环第二个连接处的圆环
        ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

        ctx.fill()
        // ctx.stroke()
    }

    //计算圆环上点的坐标
    function calcRingPoint(x, y, radius, angle) {
        var res = {}
        res.x = x + radius * Math.cos(angle * Math.PI / 180)
        res.y = y + radius * Math.sin(angle * Math.PI / 180)
        return res
    }

    //弧度转角度
    function radian2Angle(radian) {
        return 180 * radian / Math.PI
    }

    //角度转弧度
    function angle2Radian(angle) {
        return angle * Math.PI / 180
    }


    //进度条颜色
    var lingrad = ctx.createLinearGradient(0, 0, 150, 0);
    lingrad.addColorStop(0, '#ffbd11');
    lingrad.addColorStop(1, '#ff981e');
    ctx.fillStyle = lingrad

    //开始绘画
    var tempAngle = startAngle
    var total = Number(total); //总分
    var now = Number(now); //当前分数
    var percent = now / total //百分比
    var twoEndAngle = percent * 360 + startAngle
    var step = (twoEndAngle - startAngle) / 80
    var numberSpan = document.querySelector('.number3')
    var inter = setInterval(function () {
        if (tempAngle > twoEndAngle) {
            clearInterval(inter)
        } else {
            numberSpan.innerText = now
            tempAngle += step

        }
        renderRing(startAngle, tempAngle)
    }, 20);
}