微信小程序实现带刻度简易仪表盘

一、需求：

实现如图样式的仪表盘，要求分数向下取整、进度精确展示。

 二、实现步骤：

1、首先画出环形进度条，通过大圆包小圆的方式实现：大圆（circle1）背景浅色，小圆（circle2）背景白色

2、在小圆内部画刻度，根据UI图确认一共有12个刻度，其中长短刻度交叉显示（如图），

定义一个长度为12的数组（emptyArray: new Array(12)）遍历出12个刻度，通过判断索引奇偶分别设置长短刻度，由于仪表盘不是整个环形，就用一个白色背景的盒子盖住下面三个刻度。

刻度实现主要使用css3特性：transform-origin（transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的）结合transform: rotate（旋转），通过transform-origin控制中心点位置，计算transform: rotate（旋转）角度实现刻度的效果

3、以上已实现初步表盘的样式，重点是进度条的展示，这时候就用到了神奇的 conic-gradient 圆锥渐变

给它的一些属性根据角度大小动态赋值就能实现进度条的效果

（1）这个地方的判断是由于conic-gradient是从180deg开始的（环形最底部），截掉下半部分后需要重新定位0的位置，根据刻度的划分，0的位置在原来的位置+60，代码写61是因为有一些偏差，同理element > 4 ? element * 0.18 : element * 0.22这个判断也是为了进度条精确展示

 （2）刻度

1：定位到环形最底部是第一个刻度，每个刻度*30定位各个刻度的位置

2：长短刻度

3：头部和尾部部分的进度处理

4、中间的指针是自己画的，一个固定在中心的圆，再用伪元素加个三角形指针，通过旋转相应度数来实现，最初的指针指向是正左边，让它指向刻度1的位置，所以每次都-30deg即可实现，根据分子是多少去动态改变指针的指向。

5、详细代码如下（element是0<=element<=8的数字，因为分母固定为8）：

wxml:

<view class="g-container" style="background: conic-gradient(from 180deg, #FF7E00 0deg, #FF7E00 {{element > 0 && (element < 8 ? ((element * 30) + 61 + ((element > 4 ? element * 0.18 : element * 0.22)) + 'deg') : (element * 30) + 120 + 'deg')}},rgb(255, 126, 0, 0.3) 0deg);">
    <view class="g-content">
        <view wx:for="{{emptyArray}}" wx:key="index" class="g-item" style="transform: rotate({{(index - 6) * 30 + 'deg'}}); height: {{index % 2 != 0 ? '12rpx' : ''}}; background-color: {{element > 0 && (element >= (index - 2)) ? '#FF7E00' : ''}};"></view>
    </view>
    <image src="https://externalimage.1hai.cn/160/227cebe0793b49deba48ad26059d3363.png" class="oil-icon" />
    <view class="oil-pointer">
        <view class="circle" style="transform: rotate({{(element * 30) - 30}}deg);"></view>
    </view>
</view>复制

 wxss:

.g-container {
  position: relative;
  width: 274rpx;
  height: 274rpx;
  left: 50%;
  /* transform: translate(-50%, 0); */
  margin-left: -137rpx;
  border-radius: 50%;
  background-color: rgb(255, 126, 0, 0.3);
  transform: rotate(-0.7deg);
}
 
.g-content {
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 
.g-item {
  position: absolute;
  width: 4rpx;
  height: 18rpx;
  background: #FFCB99;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  transform-origin: 0 131rpx;
  z-index: 3;
  box-sizing: border-box;
}复制