微信小程序 纯css画仪表盘

在这里插入图片描述

刚看到设计稿的时候第一时间想到的就是用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.hqwc.cn/news/247422.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

经验分享｜MySQL分区实战（RANGE）

经验分享｜MySQL分区实战（RANGE）

概述 分区概述 在 MySQL 中&#xff0c; InnoDB存储引擎长期以来一直支持表空间的概念。在 MySQL 8.0 中&#xff0c;同一个分区表的所有分区必须使用相同的存储引擎。但是&#xff0c;也可以为同一 MySQL 服务器甚至同一数据库中的不同分区表使用不同的存储引擎。 通俗地讲…
阅读更多...
学习php中使用composer下载安装firebase/php-jwt 以及调用方法

学习php中使用composer下载安装firebase/php-jwt 以及调用方法

学习php中使用composer下载安装firebase/php-jwt 以及调用方法 1、安装firebase/php-jwt2、封装jwt类 1、安装firebase/php-jwt composer require firebase/php-jwt安装好以后出现以下文件: 2、封装jwt类 根据所使用的php框架&#xff0c;在指定目录创建 Token.php <?ph…
阅读更多...
DevOps搭建(二)-VMware安装虚拟机详细步骤

DevOps搭建(二)-VMware安装虚拟机详细步骤

1、下载Centos镜像 官方下载地址： Download 这里我们使用Centos7镜像 下载地址： Index of /centos/7.9.2009/isos/x86_64/ 2、设置固定IP 2.1、VMware的配置 首先打开编辑里面的 虚拟网络编辑器，如图： 进入更改设置之后，进行后面的操作，
阅读更多...
UNDERSTANDING AND IMPROVING INFORMATION TRANSFER IN MULTI-TASK LEARNING

UNDERSTANDING AND IMPROVING INFORMATION TRANSFER IN MULTI-TASK LEARNING

Z i _i i​ X i R i X_iR_i Xi​Ri​&#xff0c; X X X是Task embedding layers&#xff0c; R R R是Alignment matrices 辅助信息 作者未提供代码
阅读更多...
Vue框架学习笔记——列表渲染：v-for

Vue框架学习笔记——列表渲染：v-for

文章目录 前文提要代码正文 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 主要学习链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 代码正文 <body><div id"box"><ul><li v-for"(p,index)…
阅读更多...
EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【EI级】Matlab实现TCN-GRU-Multihead-Attention…
阅读更多...
视频剪辑转码：mp4批量转成wmv视频，高效转换格式

视频剪辑转码：mp4批量转成wmv视频，高效转换格式

在视频编辑和处理的领域&#xff0c;转换格式是一项常见的任务。在某些编辑和发布工作中&#xff0c;可能需要使用WMV格式。提前将素材转换为WMV可以节省在编辑过程中的时间和精力。从MP4到WMV的批量转换&#xff0c;不仅能使视频素材在不同的平台和设备上得到更好的兼容性&…
阅读更多...
ESP32 freeRTOS笔记 参数传递、任务优先级

ESP32 freeRTOS笔记 参数传递、任务优先级

一、四种参数传递方式 1.1 整数传递 使用 (void *) 任何类型传递参数&#xff0c;通过地址传递给任务。 #include <stdio.h> #include "sdkconfig.h" #include "freertos/FreeRTOS.h" #include "freertos/task.h"void myTask(void *pvP…
阅读更多...
前端笔记（三）CSS 盒子模型

前端笔记（三）CSS 盒子模型

结构伪类选择器 基本的结构伪类选择器 可以根据元素的结构关系来查找元素 比如列标签 li&#xff0c;使用 li:first-child { background-color: green; }就可以选中第一个该标签。 <!DOCTYPE html> <html lang"en"> <head><meta charset&q…
阅读更多...
JavaWeb 前端工程化

JavaWeb 前端工程化

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。 前端工程化实现技术栈 前端工程化实现的技术栈有很多,我们采用ES6nodejsnpmViteVUE3routerpiniaaxiosElement-plus组合来实现 ECMAScri…
阅读更多...
spring cloud 整合Feign经行远程调用

spring cloud 整合Feign经行远程调用

文章目录 Feign远程调用Feign替代RestTemplate1&#xff09;引入依赖2&#xff09;添加注解3&#xff09;编写Feign的客户端4&#xff09;测试5&#xff09;总结 自定义配置配置文件方式Java代码方式 Feign使用优化 Feign远程调用 先来看我们以前利用RestTemplate发起远程调用…
阅读更多...
【Vue】使用 Vue CLI 脚手架创建 Vue 项目（使用GUI创建）

【Vue】使用 Vue CLI 脚手架创建 Vue 项目（使用GUI创建）

前言 在开始使用Vue进行开发之前&#xff0c;我们需要先创建一个Vue项目。Vue CLI&#xff08;Command Line Interface&#xff09;是一个官方提供的脚手架工具&#xff0c;可以帮助我们快速创建Vue项目。Vue CLI也提供了一个可视化的GUI界面来创建和管理Vue项目。 步骤 打开终…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023