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

这篇具有很好参考价值的文章主要介绍了微信小程序实现带刻度简易仪表盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求：

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

微信小程序仪表盘,踩坑日记,微信小程序,css3

二、实现步骤：

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

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

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

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

微信小程序仪表盘,踩坑日记,微信小程序,css3

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

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

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

微信小程序仪表盘,踩坑日记,微信小程序,css3

（2）刻度

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

2：长短刻度

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

微信小程序仪表盘,踩坑日记,微信小程序,css3

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

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;
}

文章来源地址https://www.toymoban.com/news/detail-669405.html

到了这里，关于微信小程序实现带刻度简易仪表盘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！