diagnosis.admin/src/components/ParkingPanel.vue

<template>

    <div class="parking-body">
        <div class="item">
            <div id="canvas"></div>
            <div class="title">可用车位</div>
        </div>
        <div class="item">
            <div id="canvas1"></div>
            <div class="title">已停车辆</div>
        </div>
        <div class="item">
            <div id="canvas2"></div>
            <div class="title">全部车位</div>
        </div>
    </div>

</template>
<script>
    export default {
        props: {

            num: {
                type: Number,
                default: 120
            },
            totalNum: {
                type: Number,
                default: 200
            }


        },
        created() {
            let percent1 = (this.num / this.totalNum) * 100
            let percent2 = ((this.totalNum - this.num) / this.totalNum) * 100

            this.draw('canvas', percent1, this.num)
            this.draw('canvas1', percent2, this.totalNum - this.num)
            this.draw('canvas2', 100, this.totalNum)

        },

        methods: {
            draw(id, percent, num) {
                let canvas = document.createElement('canvas')
                let ctx = canvas.getContext('2d')
                const PI = Math.PI;

                canvas.width = 200;
                canvas.height = 200;
                canvas.style.cssText = 'width: 90px;height: 90px; '

                ctx.scale(1.5, 1.5)
                this.drawCircle(ctx, PI, 65, 65, '#1DC2FF', percent, num)
                setTimeout(() => {
                    let divCanvas = document.getElementById(id)
                    divCanvas.appendChild(canvas)
                }, 1000)

            },

            drawCircle(ctx, PI, x, y, color, percent, num) {
                ctx.save();
                ctx.translate(x, y);
                ctx.lineWidth = 1;
                ctx.fillStyle = '#fff';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = '18px arial';

                // circle4
                let linearGradient = ctx.createLinearGradient(0, 0, 0, 100);
                linearGradient.addColorStop(0, 'rgb(45, 194, 252)');
                linearGradient.addColorStop(0.5, 'rgb(40, 134, 252)');
                linearGradient.addColorStop(1, 'rgb(45, 194, 252)');
                ctx.save();
                ctx.strokeStyle = linearGradient;
                ctx.rotate(-PI / 2);
                ctx.beginPath();
                ctx.arc(0, 0, 57, 0, PI * 2, false);
                ctx.stroke();
                ctx.restore();

                ctx.setLineDash([3, 3]);
                ctx.lineWidth = 3;
                ctx.save();
                ctx.strokeStyle = 'rgb(20, 80, 135)';
                ctx.rotate(-PI / 2);
                ctx.beginPath();
                ctx.arc(0, 0, 64, 0, PI * 100 / 50, false);
                ctx.stroke();
                ctx.restore();

                ctx.setLineDash([10, 8]);
                ctx.lineWidth = 3;
                // circle4
                let linearGradient1 = ctx.createLinearGradient(0, 0, 0, 100);
                linearGradient1.addColorStop(0, 'rgb(45, 194, 252)');
                linearGradient1.addColorStop(0.5, 'rgb(40, 134, 252)');
                linearGradient1.addColorStop(1, 'rgb(45, 194, 252)');

                ctx.save();
                ctx.strokeStyle = linearGradient1;
                ctx.rotate(-PI / 2);
                ctx.beginPath();
                ctx.arc(0, 0, 50, 0, PI * percent / 50, false);
                ctx.stroke();
                ctx.restore();
                // text1
                ctx.font = "bold  40px '微软雅黑'";
                ctx.fillStyle = linearGradient1;
                ctx.fillText(num, 0, 4); // 
                ctx.restore();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .parking-body {

        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
            flex: 1;
            text-align: center;

        }

        .title {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-top: -0px;

        }


    }
</style>