可以动态改变刻度背景色的车速仪表盘

最近做的项目的主页面需要用到一个仪表盘来动态显示车速，同时改变对应的背景色

仪表盘

开始是想着使用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 = ''
      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 = ''
      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);//测试数据