最近做的项目的主页面需要用到一个仪表盘来动态显示车速，同时改变对应的背景色
仪表盘
开始是想着使用echarts，修修改改拿来用，但是人家客户有规定，必须搞个差不多的，那没办法，自
己动手搞个吧
截图如下：
这是人家的
这是我搞出来的
这样看着似乎差不多了哈，客户没提啥意见，搞定
接下来是代码，考虑到代码的复用性，封装成了组件，及引入的方法，因为要适配不同电脑的分辨率，所以使用了把px根据比例全部换成了rem，这里的1rem=80px，若是不想使用rem，可以把数值乘以80，然后把rem换成px就可以了
代码思路
首先是让UI小伙伴扣了两张图
yibiao5.png
yibiaoBoot.png
1.然后根据找好最外层的父级，根据定位把图片和文字的位置搞个差不多；
2.接着就是刻度了，可以看到刻度是有两层的，外面有一层，里面有一层，这些刻度我想着前端动态生成，然后给这些刻度设置一个默认背景色，然后我就可以通过style样式控制背景色，我看了原图上面的刻度是64个，然后底部有16个是不变色的，被遮罩住了，所以通过css3的旋转，改变下角度，然后只控制其余48个刻度即可，
3.因为最大的速度是200，所以根据200/48即可得出，1速度等于多少个刻度
封装仪表盘组件
代码如下
<template><div class="data-left-1"><div class="box_style"><div class="mybox_wrap"><div class="yibiao_style"><div class="clock_box"><div class="clock_dial"></div><div class="clock_dial2"></div></div><div class="yibiao_boot"></div><div class="yibiao_speed">{{ carSpeed }}</div><div class="yibiao_span">速度(km/h)</div><div class="yibiao_max">200</div></div></div></div></div>
</template>
<script>
export default {props: {isShow: {type: Boolean,default: true,},speed: {type: Number,default: 0,},rate: {default: 0,},},data() {return {carSpeed: 0, //列车速度showTabulation: true,}},computed: {},mounted() {let clock_dial = document.querySelector('.clock_dial')let clock_dial2 = document.querySelector('.clock_dial2')//1 制作表盘for (let i = 0; i < 64; i++) {var div = document.createElement('div')div.setAttribute('class', 'dial')div.innerHTML = '<span></span>'clock_dial.appendChild(div)}let dial = document.querySelectorAll('.dial')for (let i = 0; i < dial.length; i++) {dial[i].style.position = 'absolute'dial[i].style.width = '0.125rem'dial[i].style.height = '100%'dial[i].style.top = '0'dial[i].style.left = '0.625rem'}let dialSpan = document.querySelectorAll('.dial span')for (let i = 0; i < dialSpan.length; i++) {dialSpan[i].style.width = '0.05rem'dialSpan[i].style.height = '0.125rem'dialSpan[i].style.background = '#699B9A';dialSpan[i].style.backgroundImage = ''dialSpan[i].style.display = 'inline-block'dialSpan[i].style.verticalAlign = 'top'dialSpan[i].style.borderRadius = '0.0125rem'}for (let i = 0; i < 64; i++) {var div = document.createElement('div')div.setAttribute('class', 'dial2')div.innerHTML = '<span></span>'clock_dial2.appendChild(div)}let dial2 = document.querySelectorAll('.dial2')for (let i = 0; i < dial2.length; i++) {dial2[i].style.position = 'absolute'dial2[i].style.width = '0.125rem'dial2[i].style.height = '100%'dial2[i].style.top = '0'dial2[i].style.left = '0.5rem'}let dialSpan2 = document.querySelectorAll('.dial2 span')for (let i = 0; i < dialSpan2.length; i++) {dialSpan2[i].style.width = '0.0375rem'dialSpan2[i].style.height = '0.0625rem'dialSpan2[i].style.background = '#699B9A'dialSpan2[i].style.backgroundImage = ''dialSpan2[i].style.display = 'inline-block'dialSpan2[i].style.verticalAlign = 'top'dialSpan2[i].style.borderRadius = '0.0125rem'}for (let i = 0; i < dial.length; i++) {var angle = (360 / 64) * idial[i].style.transform = 'rotate(' + angle + 'deg)'dial2[i].style.transform = 'rotate(' + angle + 'deg)'}},methods: {},watch: {speed(val) {this.carSpeed = vallet basicParam = 200 / 48;let dialSpan = document.querySelectorAll('.dial span')let dialSpan2 = document.querySelectorAll('.dial2 span')let actNum = Math.ceil(this.carSpeed / basicParam);for(let m=0;m<48;m++){dialSpan[m].style.background = "#699B9A";dialSpan2[m].style.background = "#699B9A";}if (this.carSpeed > 0&&this.carSpeed <100) {for (let i = 0; i < actNum; i++) {dialSpan[i].style.background = "#43EDEA"dialSpan2[i].style.background = "#43EDEA"}}else{for (let i = 0; i < 24; i++) {dialSpan[i].style.backgroundImage = "linear-gradient(to right,#43EDEA,#359EC7)"dialSpan2[i].style.backgroundImage = "linear-gradient(to right,#43EDEA,#359EC7)"}for (let j = 24; j< actNum; j++) {dialSpan[j].style.backgroundImage = "linear-gradient(to right,#359EC7,#3B87F3)"dialSpan2[j].style.backgroundImage = "linear-gradient(to right,#359EC7,#3B87F3)"}}},isShow(val) {console.log(val)this.showTabulation = val},},
}
</script>
<style scoped lang="less">
//字体资源，若是没有的话，可以去掉这行代码
//@font-face {
// font-family: 'son';
// src: url('~@/assets/font/son.ttf') format('truetype');
//}.yibiao_speed {position: absolute;left: 34%;top: 37%;font-size: 0.375rem;width: 0.75rem;height: 0.45rem;text-align: center;
}
.yibiao_span {position: absolute;left: 22%;top: 72%;font-size: 0.175rem;width: 1.3rem;height: 0.45rem;text-align: center;z-index: 1000;
}
.yibiao_max {position: absolute;left: 66%;top: 63%;font-size: 0.225rem;width: 0.75rem;height: 0.45rem;text-align: center;
}.yibiao_style {width: 2.25rem;height: 2.25rem;background-image: url(~@/assets/3d2/yibiao5.png);background-size: cover;position: relative;color: #fff;
}
.data-left-1 {width: 100%;height: 2.375rem;// padding: 0.1rem;display: flex;box-sizing: border-box;box-sizing: border-box;justify-content: center;// align-items: center;margin-bottom: 0.0625rem;
}
.mybox_wrap {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}.box_style {width: 2.25rem;height: 2.25rem;
}
.clock_box {width: 1.4375rem;height: 1.4375rem;border-radius: 50%;position: absolute;left: 0.375rem;top: 0.375rem;
}.clock_dial,
.clock_dial2 {width: 100%;height: 100%;position: relative;-moz-transform-origin: center center;-webkit-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;text-align: center;transform: rotate(-132deg);
}.clock_dial2 {width: 1.0625rem;height: 1.0625rem;top: 0.2375rem;left: 0.2375rem;;transform: rotate(-132deg);position: absolute;
}
.clock_dial div {position: absolute;width: 0.125rem;height: 100%;top: 0;left: 0.625rem;
}.dial,
.dial2 {position: absolute;width: 0.125rem;height: 100%;top: 0;left: 0.625rem;
}.dial2 {width: 0.125rem;left: 0.5rem;
}.dial span,
.dial2 span {width: 0.05rem;height: 0.125rem;background: #699b9a;display: inline-block;vertical-align: top;border-radius: 0.0125rem;
}.dial2 span {width: 0.0375rem;height:0.0625rem;
}.yibiao_boot {width: 1.25rem;height: 0.875rem;background-image: url(~@/assets/3d2/yibiaoBoot.png);background-size: contain;color: #fff;position: absolute;z-index: 666;bottom: 0;left: 0.5rem;opacity: 0.9;background-repeat: no-repeat;
}
</style>
页面中使用
<dashboard ref="dashboardwe" :speed="carSpeed" :rate="carRate"></dashboard>
import dashboard from './modules/dashboard' //仪表盘组件data() {return {carSpeed: 0, //列车速度carRate: 0,//百分比}
}let that = this;that.carRate = 100 / 200 * 100;//测试数据that.carSpeed = Math.floor(Math.random()*200);//测试数据
![[sping] spring core - 依赖注入](https://img-blog.csdnimg.cn/a3c76dc697604e5bb00837dc50493e10.png)
