微信小程序 纯css画仪表盘

news2024/9/24 21:16:34

在这里插入图片描述

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘，虽然本人的画布用的不是很好但还可以写一写😀。话不多说直接上代码。最后有纯css方法

<!--wxml-->
<canvas canvas-id="circle" class="circle" >

// js
data: {
    canvasWidth: 285, // 画布宽度
    canvasHeight: 285, // 画布高度
    value: 60, // 当前得分
},

  /*
   * 绘制仪表盘
   */
  showCanvasRing() {
    var that = this;
    var ctx = wx.createCanvasContext("circle");
    ctx.clearRect(0, 0, that.data.canvasWidth, that.data.canvasHeight); // 清除画布
    var circle_r = that.data.canvasWidth / 2; //画布的一半，用来找中心点和半径
    var scoreText = that.data.value>=100?100:that.data.value; // 当前得分 最多100分
    var descript = '良好'; // 当前描述
    var date = formatTime(new Date(),'MM-DD'); // 当前日期
    // 圆弧起点
    var startAngle = 0.8 * Math.PI;
    var endAngle = 2.2 * Math.PI;
    //定义起始点
    ctx.translate(that.data.canvasWidth / 2, that.data.canvasHeight / 2);
    // 画圆背景
    ctx.beginPath();
    ctx.setStrokeStyle("#6bb7b9");
    ctx.fillStyle="#6bb7b9";
    ctx.setLineCap("round");
    ctx.arc(0, 0, circle_r,2*Math.PI);
    ctx.fill()
    ctx.stroke();
    ctx.closePath();

    //  白半边圆弧
    ctx.beginPath();
    ctx.setStrokeStyle("#FFFFFF");
    ctx.setLineWidth(10);
    ctx.setLineCap("round");
    ctx.arc(0, 0, circle_r - 20, startAngle, endAngle, false);
    ctx.stroke();
    ctx.closePath();

    // 刻度
    for (let i = 0; i <= 10; i++) {
      let angle = startAngle + (endAngle - startAngle - 0.1) * (i * 10) / 100;
      if (angle > Math.PI * 2) {
        angle = angle - Math.PI * 2
      }
      const point = that.getPoint(0, 0, circle_r - 44, angle);
      const PI_3_2 = Math.PI * 1.5;
      const PI_1_2 = Math.PI * 0.5;
      ctx.save()
      ctx.setFillStyle("#fff");
      ctx.setFontSize(13);
      ctx.translate(point.x, point.y)
      const rotateDegrees = angle >= PI_3_2 ? (angle - PI_3_2) : (angle + PI_1_2);
      ctx.rotate(rotateDegrees)
      ctx.fillText(i * 10, 0, 0)
      ctx.restore()
    }

    // 当前得分内圆弧
    ctx.beginPath();
    ctx.setStrokeStyle("#FFA64D");
    ctx.setLineWidth(10);
    ctx.setLineCap("round");
    ctx.arc(0, 0, circle_r - 20, startAngle, startAngle + (endAngle - startAngle) * scoreText / 100, false);
    ctx.stroke();
    ctx.closePath();


    // 分数
    ctx.setTextAlign("center"); // 字体位置
    ctx.setFillStyle("#fff");
    ctx.font = "900 50px Arial"
    ctx.fillText(scoreText, 0, -20);

    // 描述
    ctx.setTextAlign("center"); // 字体位置
    ctx.font = "400 15px Arial"
    ctx.fillText(descript, 0, 15);

    // 日期
    ctx.setTextAlign("center");
    ctx.setLineWidth(8);
    ctx.setFontSize(14);
    ctx.fillText(date + ' 更新', 0, 35);

    // 绘图
    ctx.draw();
  },
  getPoint: function (x, y, r, angle) {
    const x1 = x + r * Math.cos(angle);
    const y1 = y + r * Math.sin(angle);
    return {
      x: x1,
      y: y1
    }
  },

到此仪表盘就画完了，最后需求有变动需要再仪表盘上加文本，众所周知canvas在小程序中的层级很高。但是官方说可以使用cover-view | cover-image

 <canvas canvas-id="circle" class="circle" >
 	<cover-view class="lowScore" wx-if="{{showView}}">
      目前信用分过低
    </cover-view>
 </canvas>

经过验证cover-view可以做到在canvas上悬浮，但是不能满足所有需求；
比如要悬浮scroll-view ，总不能把内容全部用画布来写吧 ~ ~。也有人说可以将绘画完成后的canvas转成图片进行显示wx.canvasToTempFilePath。我同样也试过但是会报错：canvasToTempFilePath:fail fail canvas is empty，怎么解决试了好半天，由于项目着急也没用太多时间研究了。所有最后我决定使用最原始的方法来实现。来看代码吧 ↓ ↓

 <!--wxml-->
<view class="dashboard">
  <view class="dashboard-arc">
    <view class="dashboard-scale">
      <view wx:for="{{[0,10,20,30,40,50,60,70,80,90,100]}}" wx:key="item">{{item}}</view>
    </view>
    <view class="dashboard-arc-active" style="background: conic-gradient(#FFA64D 0, #FFA64D {{(value*0.75)}}%, transparent 0, transparent);">
      <view class="dashboard-arc-active-end" style="transform: translateX(-50%) rotate({{(value/100)*270}}deg);"></view>
    </view>
  </view>
  <view class="dashboard-content">
    <view class="dashboard-content-title">{{value}}</view>
    <view class="dashboard-content-text">{{state}}</view>
    <view class="dashboard-content-desc">{{tool.formatTime(date,'MM-DD')}} 更新</view>
  </view>
  <view class="lowScore" wx-if="{{showView}}">目前信用分过低</view>
...要悬浮的内容
</view>

	/* 仪表盘 */
	.dashboard {
	    width: 750rpx;
	    height: 600rpx;
	    background: rgba(70, 165, 168, 1);
	    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
	    text-align: center;
	    position: relative;
	}
	.dashboard::before{
	  content: '';
	  width: 570rpx;
	  height: 570rpx;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background-color: #6bb7b9;
	  border-radius: 50%;
	}
	.dashboard-arc{
	  width: 520rpx;
	  height: 520rpx;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%) rotate(-135deg);
	  border-radius: 50%;
	  background: conic-gradient(#fff 0, #fff 75%, transparent 0, transparent);
	}
	.dashboard-arc::before,
	.dashboard-arc::after{
	  content: "";
	  position: absolute;
	  width: 20rpx;
	  height: 20rpx;
	  border-radius: 50%;
	  background: #fff;
	}
	.dashboard-arc::before{
	  left: 50%;
	  top: 0;
	  background-color: #FFA64D;
	  transform: translateX(-50%);
	}
	.dashboard-arc::after{
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.dashboard-arc-active{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  top: 0;
	  left: 0;
	}
	.dashboard-arc-active-end{
	  position: absolute;
	  width: 20rpx;
	  height:100%;
	  top: 0;
	  left: 50%;
	  z-index: 1;
	}
	.dashboard-arc-active-end::before{
	  content: '';
	  width: 20rpx;
	  height: 20rpx;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background: #FFA64D;
	  border-radius: 50%;
	}
	.dashboard-scale{
	  background-color: #6bb7b9;
	  width: 480rpx;
	  height: 480rpx;
	  border-radius: 50%;
	  position: relative;
	  top: 50%;
	  left: 50%;
	  z-index: 99;
	  font-size: 20rpx;
	  transform: translate(-50%, -50%);
	  color: #fff;
	}
	.dashboard-scale>view{
	  position: absolute;
	  top: 50%;
	  height:calc(100% - 10rpx);
	  left: 50%;
	  transform: translate(-50%,-50%);
	}
	.dashboard-scale>view:nth-child(2){
	  transform:translate(-50%,-50%)rotate(27deg);
	}
	.dashboard-scale>view:nth-child(3){
	  transform:translate(-50%,-50%)rotate(54deg);
	}
	.dashboard-scale>view:nth-child(4){
	  transform:translate(-50%,-50%)rotate(81deg);
	}
	.dashboard-scale>view:nth-child(5){
	  transform:translate(-50%,-50%)rotate(108deg);
	}
	.dashboard-scale>view:nth-child(6){
	  transform:translate(-50%,-50%)rotate(135deg);
	}
	.dashboard-scale>view:nth-child(7){
	  transform:translate(-50%,-50%)rotate(162deg);
	}
	.dashboard-scale>view:nth-child(8){
	  transform:translate(-50%,-50%)rotate(189deg);
	}
	.dashboard-scale>view:nth-child(9){
	  transform:translate(-50%,-50%)rotate(216deg);
	}
	.dashboard-scale>view:nth-child(10){
	  transform:translate(-50%,-50%)rotate(243deg);
	}
	.dashboard-scale>view:nth-child(11){
	  transform:translate(-50%,-50%)rotate(270deg);
	}
	.dashboard-content{
	  position: absolute;
	  width: 300rpx;
	  height: 300rpx;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: #fff;
	  border-radius: 50%;
	  padding: 20rpx;
	}
	.dashboard-content-title{
	  font-size: 115rpx;
	  font-weight: 900;
	}
	.dashboard-content-text{
	  font-size: 25rpx;
	}
	.dashboard-content-desc{
	  font-size: 20rpx;
	}

以上就是所有代码了，觉得对你有用的话就点个赞吧 ！
最后给大家推荐一个在线题库小程序包含了阿里云认证、腾讯云认证、华为云认证、思科认证、锐捷认证、瓴羊认证、红帽认证、软考、IT认证等等
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1285130.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑富氧燃烧技术的电–气–热综合能源系统低碳经济调度》

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑富氧燃烧技术的电–气–热综合能源系统低碳经济调度》

这个标题涉及到一个关于能源系统和经济调度的复杂主题。让我们逐步解读&#xff1a; 电–气–热综合能源系统&#xff1a; 指的是一个综合的能源系统&#xff0c;包括了电力、气体&#xff08;可能是天然气等&#xff09;、热能等多个能源形式。这种系统的设计和优化旨在使不同…
阅读更多...
【数据结构(六)】排序算法介绍和算法的复杂度计算（1）

【数据结构(六)】排序算法介绍和算法的复杂度计算（1）

文章目录 1. 排序算法的介绍1.1. 排序的分类 2. 算法的时间复杂度2.1. 度量一个程序(算法)执行时间的两种方法2.2. 时间频度2.2.1. 忽略常数项2.2.2. 忽略低次项2.2.2. 忽略系数 2.3. 时间复杂度2.4. 常见的时间复杂度2.5. 平均时间复杂度和最坏时间复杂度 3. 算法的空间复杂度…
阅读更多...
编码器-解码器(seq-seq)

编码器-解码器(seq-seq)

1. 背景 encoder-decoder和seq-seq模型可以解决输入与输出都是不定长序列的问题。它们都用到了两个循环NN&#xff0c;分别叫做编码器(用来分析输入序列)与解码器(用来生成输出序列)。 2. 编码器 把一个不定长的输入序列变换成一个定长的背景变量c&#xff0c;并在其中编码输入…
阅读更多...
分享72个节日PPT，总有一款适合您

分享72个节日PPT，总有一款适合您

分享72个节日PPT&#xff0c;总有一款适合您 72个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/17Lmlvd_xN-xRSKu3FZUS9w?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易…
阅读更多...
驱动开发--内核添加新功能

驱动开发--内核添加新功能

Ubuntu下这个文件为开发板ls命令的结果 内核的内容&#xff1a; mm&#xff1a;内存管理 fs&#xff1a;文件系统 net&#xff1a;网络协议栈 drivers&#xff1a;驱动设备 arch与init&#xff1a;跟启动相关 kernel与ipc&#xff1a;任务&#xff0c;进程相关 向内核增…
阅读更多...
java项目日常运维需要的文档资料

java项目日常运维需要的文档资料

一、前言 java项目开发完成&#xff0c;部署上线&#xff0c;进入项目运维阶段&#xff0c;日常工作需要准备哪些资料和文档?当项目上线后&#xff0c;运行一段时间&#xff0c;或多或少会遇到一些运维上的问题&#xff0c;比如服务器磁盘饱满&#xff0c;服务器CPU&#xff0…
阅读更多...
分享 | 顶刊高质量论文插图配色（含RGB值及16进制HEX码）（第一期）

分享 | 顶刊高质量论文插图配色（含RGB值及16进制HEX码）（第一期）

我在很早之前出过一期高质量论文绘图配色&#xff0c;但当时觉得搜集太麻烦于是就没继续做&#xff0c;后来用MATLAB爬了上万张顶刊绘图&#xff0c;于是又想起来做这么一个系列&#xff0c;拿了一个多小时写了个提取论文图片颜色并得出RGB值和16进制码并标注在原图的代码&…
阅读更多...
GPTs每日推荐--生化危机【典藏版】

GPTs每日推荐--生化危机【典藏版】

今天给大家推荐一个游戏性质的GPTs&#xff0c;叫做生化危机典藏版&#xff0c;国内点击可玩。 开篇&#xff1a;玩家从末日中醒来。 选择&#xff1a;玩家会遇到各种资源、任务、剧情&#xff0c;需要自行选择相关的分支剧情&#xff0c;一旦选错&#xff0c;无法重选。 结局…
阅读更多...
一次北斗接收机调试总结

一次北斗接收机调试总结

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 最近项目中要用到北斗接收机&#xff0c;它的样子是长这样的&#xff1a; 这部机器里面是没有操作系统的&#xff0c;由单片机控制。最近我们要根据协议…
阅读更多...
Linux socket编程(10):UDP详解、聊天室实现及进阶知识

Linux socket编程(10):UDP详解、聊天室实现及进阶知识

首先来回顾以下TCP的知识&#xff0c;TCP是一种面向连接的、可靠的传输协议&#xff0c;具有以下特点&#xff1a; TCP通过三次握手建立连接&#xff0c;确保通信的可靠性和完整性使用流控制和拥塞控制机制&#xff0c;有效地调整数据传输的速率&#xff0c;防止网络拥塞TCP提…
阅读更多...
使用 PyTorch 进行 K 折交叉验证

使用 PyTorch 进行 K 折交叉验证

一、说明 中号机器学习模型在训练后必须使用测试集进行评估。我们这样做是为了确保模型不会过度拟合&#xff0c;并确保它们适用于现实生活中的数据集&#xff0c;与训练集相比&#xff0c;现实数据集的分布可能略有偏差。 但为了使您的模型真正稳健&#xff0c;仅仅通过训练/测…
阅读更多...
OneNote for Windows10 彻底删除笔记本

OneNote for Windows10 彻底删除笔记本

找了超多方法&#xff0c;都没有用&#xff0c;我的OneNote都没有文件选项&#xff0c;要在OneDrive中删除&#xff0c;但是一直登不进&#xff0c;然后又找到一个方法&#xff1a; 在网页中打开Office的控制面板 "Sign in to your Microsoft account" 在“最近”一…
阅读更多...
k8s volumes and data

k8s volumes and data

Overview 传统上&#xff0c;容器引擎(Container Engine)不提供比容器寿命更长的存储。由于容器被认为是瞬态(transient)的&#xff0c;这可能会导致数据丢失或复杂的外部存储选项。Kubernetes卷共享 Pod 生命周期&#xff0c;而不是其中的容器。如果容器终止&#xff0c;数据…
阅读更多...
ctfhub技能树_web_信息泄露

ctfhub技能树_web_信息泄露

目录 二、信息泄露 2.1、目录遍历 2.2、Phpinfo 2.3、备份文件下载 2.3.1、网站源码 2.3.2、bak文件 2.3.3、vim缓存 2.3.4、.DS_Store 2.4、Git泄露 2.4.1、log 2.4.2、stash 2.4.3、index 2.5、SVN泄露 2.6、HG泄露 二、信息泄露 2.1、目录遍历 注&#xff1…
阅读更多...
POI Excel导入导出(下)

POI Excel导入导出(下)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 上一篇通过四个简单的小…
阅读更多...
力扣刷题day1（两数相加，回文数，罗马数转整数）

力扣刷题day1（两数相加，回文数，罗马数转整数）

题目1&#xff1a;1.两数之和 思路1和解析&#xff1a; //1.暴力枚举解法(历遍两次数组&#xff0c;时间复杂度O&#xff08;N^2)&#xff0c;空间复杂度O&#xff08;1&#xff09; int* twoSum(int* nums, int numsSize, int target, int* returnSize) {for (int i 0; i &…
阅读更多...
短波红外相机的原理及应用场景

短波红外相机的原理及应用场景

短波红外 (简称SWIR&#xff0c;通常指0.9~1.7μm波长的光线) 是一种比可见光波长更长的光。这些光不能通过“肉眼”看到&#xff0c;也不能用“普通相机”检测到。由于被检测物体的材料特性&#xff0c;一些在可见光下无法看到的特性&#xff0c;却能在近红外光下呈现出来&…
阅读更多...
使用Python Flask搭建Web问答应用程序并发布到公网远程访问

使用Python Flask搭建Web问答应用程序并发布到公网远程访问

使用Python Flask搭建web问答应用程序框架&#xff0c;并发布到公网上访问 文章目录 使用Python Flask搭建web问答应用程序框架&#xff0c;并发布到公网上访问前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程…
阅读更多...
AI Agent 结构与分类

AI Agent 结构与分类

一、什么是AI agent 在人工智能中&#xff0c;智能代理AI Agent是以智能方式行事的代理&#xff1b;它感知环境&#xff0c;自主采取行动以实现目标&#xff0c;并可以通过学习或获取知识来提高其性能。人其实就是一种复杂代理。 为了理解智能代理的结构&#xff0c;我们应该熟…
阅读更多...
go写文件后出现大量NUL字符问题记录

go写文件后出现大量NUL字符问题记录

目录 背景 看看修改前 修改后 原因 背景 写文件完成后发现&#xff1a; size明显也和正常的不相等。 看看修改前 buf : make([]byte, 64) buffer : bytes.NewBuffer(buf)// ...其它逻辑使得buffer有值// 打开即将要写入的文件&#xff0c;不存在则创建 f, err : os.Open…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023