仪表盘样式百分比显示准确率等信息，通过旋转实现

仪表盘样式百分比显示准确率等信息，通过旋转实现

通过旋转进度条实现
设置一个div盒子放置进度条
最开始进度条位于盒子底部，超过盒子的部分设置为隐藏，获取num，得到旋转角度进行旋转，进度条逐渐旋转上来并显示，视觉上实现进度条的变化

<div class="r-border">
                <div :class="[title]" style="transform-origin: 50% 0%; transition-duration: .5s;"></div>
                <div class="circle-num">{{ num }}%</div>
            </div>
1
2
3
4

mounted() {
        let _this=this;
        this.revolve(0, 100, _this.num, _this.title)
    },
1
2
3
4

 revolve(min, max, num, name) {
            let diff = max - min;
            let diffItem = diff / 4;
            this.numList.forEach((item, index) => {
                item.num = min + diffItem * index;
                item.num = item.num.toFixed(0);
            });
            let proportion = 0;
            if (num < 0 && num >= min) {
                proportion =
                    (Math.abs(min) - Math.abs(num)) / diff;
            } else {
                proportion = (num - min) / diff;
            }
            // let degDiff = 1.5;
            let angle = 0;
            if (proportion <= 1) {
                // angle = 180 * proportion - degDiff;
                angle = 180 * proportion;
            } else {
                angle = 180 * 1;
            }
            name='.'+name
            // console.log("旋转角度", angle, name);
              document.querySelector(name).style.transform =
             "rotate(" + angle + "deg)";
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27