最近做的项目的主页面需要用到一个仪表盘来动态显示车速，同时改变对应的背景色
仪表盘
开始是想着使用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) * i
dial[i].style.transform = 'rotate(' + angle + 'deg)'
dial2[i].style.transform = 'rotate(' + angle + 'deg)'
}
},
methods: {},
watch: {
speed(val) {
this.carSpeed = val
let 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);//测试数据
