小程序环形进度条爬坑

在做微信小程序的时候,发现用canvas做的环形进度条,在带滚动条的view里面显示有闪动、显示不全的问题,后面改成echart-weixin的pie图实现了,option配置如下


// 表示进度的百分比
var progressValue = 70;

option = {
  series: [
    {
      type: 'pie',
      radius: ['60%', '75%'], // 控制环形大小
      silent: true, // 禁止鼠标事件
      label: {
        show: false, // 不显示标签
      },
      data: [{ value: 100, itemStyle: { color: '#eee' } }], // 灰色背景数据
      animation: false // 禁止动画效果
    },
    {
      type: 'pie',
      radius: ['60%', '75%'], // 控制环形大小
      label: {
        show: false, // 不显示标签
      },
      labelLine: { show: false }, // 不显示标签的连接线
      data: [
        {
          value: progressValue,
          itemStyle: { color: '#33CCFF' } // 进度条颜色
        },
        {
          value: 100 - progressValue,
          itemStyle: { color: 'transparent' } // 剩余部分透明
        }
      ]
    }
  ],
  tooltip: { show: false }, // 关闭提示框组件
  title: {
    text: progressValue + '%',
    left: 'center',
    top: 'middle',
    textStyle: {
      color: '#666',
      fontSize: 24,
      fontFamily: 'Arial',
      fontWeight: 'normal'
    }
  }
};

效果图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GC机制以及Golang的GC机制详解

要了解Golang的GC机制,就需要了解什么事GC,以及GC有哪几种实现方式 一.什么是GC 当一个电脑上的动态内存不再需要时,就应该予以释放,以让出内存,这种内存资源管理,称为垃圾回收(Garbage Collection)&#x…

黑马点评-短信登录业务

原理 模型如下 nginx nginx基于七层模型走的事HTTP协议,可以实现基于Lua直接绕开tomcat访问redis,也可以作为静态资源服务器,轻松扛下上万并发, 负载均衡到下游tomcat服务器,打散流量。 我们都知道一台4核8G的tomca…

RH850P1X芯片学习笔记-Generic Timer Module -ATOM

文章目录 ARU-connected Timer Output Module (ATOM)OverviewGLOBAL CHANNEL CONTROL BLOCK ATOM Channel architectureATOM Channel modesSOMP-Signal Output Mode PWMSOMP - ARUSOMC-Signal Output Mode CompareSOMC - ARUSOMC – COMPARE COMMANDSOMC – OUTPUT ACTIONATOM …

智慧城市中的公共服务创新:让城市生活更便捷

目录 一、引言 二、智慧城市公共服务创新的实践 1、智慧交通系统 2、智慧医疗服务 3、智慧教育系统 4、智慧能源管理 三、智慧城市公共服务创新的挑战 四、智慧城市公共服务创新的前景 五、结论 一、引言 随着信息技术的迅猛发展,智慧城市已成为现代城市发…

failed to connect to ‘127.0.0.1:58526‘: Connection refused

WSA使用体验 链接: 知乎-穿越时间一步到位,教你完美安装Windows 11 Android 安卓子系统 CPU不满足要求 明明是12700H,满足要求,但是应用商店说不满足,在设置(注意不是控制面板的区域)把地区改…

第二天 Kubernetes落地实践之旅

第二天 Kubernetes落地实践之旅 本章学习kubernetes的架构及工作流程,重点介绍如何使用Workload管理业务应用的生命周期,实现服务不中断的滚动更新,通过服务发现和集群内负载均衡来实现集群内部的服务间访问,并通过ingress实现外…

RabbitMQ队列

RabbitMQ队列 1、死信的概念 ​ 先从概念解释上搞清楚这个定义,死信,顾名思义就是无法被消费的消息,字面意思可以这样理解,一般来说,producer将消息投递到broker或者直接到queue里了,consumer 从 queue取出消息进行消…

浅析虚函数的vptr和虚函数表

浅析虚函数的vptr和虚函数表 文章目录 浅析虚函数的vptr和虚函数表前言1. 基础理论2. 实现与内部结构 前言 ​ 为了实现虚函数,C使用一种称为虚拟表的特殊形式的后期绑定。该虚拟表是用于解决在动态/后期绑定方式的函数调用函数的查找表。虚拟表有时会使用其他名称…

【STM32+HAL】七针OLED(SSD1306)配置(SPI版)

一、前言 关于四针OLED的I2C版配置方式,请转至【STM32HAL】OLED显示初始化配置 二、实现功能: 用SPI通信方式初始化OLED显示(相较于I2C速度更快) 三、方法一:硬件SPI通信 1、打开SPI通信(仅传输&#xf…

互联网加竞赛 车位识别车道线检测 - python opencv

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) …

苍穹外卖Day05——总结5

前期文章 文章标题地址苍穹外卖Day01——总结1https://lushimeng.blog.csdn.net/article/details/135466359苍穹外卖Day01——解决总结1中存在的问题https://lushimeng.blog.csdn.net/article/details/135473412苍穹外卖Day02——总结2https://lushimeng.blog.csdn.net/articl…

STM32-SPI通信协议

串行外设接口SPI(Serial Peripheral Interface)是由Motorola公司开发的一种通用数据总线。 在某些芯片上,SPI接口可以配置为支持SPI协议或者支持I2S音频协议。 SPI接口默认工作在SPI方式,可以通过软件把功能从SPI模式切换…

【计算机网络】HTTPS 协议原理

https 一、HTTPS 是什么二、加密1. 加密概念2. 加密的原因3. 常见的加密方式(1)对称加密(2)非对称加密 三、数据摘要(数据指纹)四、HTTPS 的工作原理探究1. 只使用对称加密2. 只使用非对称加密3. 双方都使用非对称加密4. 非对称加…

java 实现图片新增水印(动态计算水印背景 + 水印文字),附带文字乱码解决方案

文章目录 概要实现流程代码如下小结 概要 图片增加水印背景以及水印文字,根据文字内容是否换行,以及文字行高大小自适应计算背景大小 结果图如下: 实现流程 定义图片来源,以及读取字体来源(防止中文乱码)计算文字所需高度 与…

云上攻防-云原生篇KubernetesK8s安全APIKubelet未授权访问容器执行

知识点 1、云原生-K8s安全-名词架构&各攻击点 2、云原生-K8s安全-Kubelet未授权访问 3、云原生-K8s安全-API Server未授权访问 章节点: 云场景攻防:公有云,私有云,混合云,虚拟化集群,云桌面等 云厂商…

PyInstaller 打包 Python 应用程序一键双击运行

PyInstaller 打包 Python 应用程序一键双击运行 作为一个词语,“活着”在语言里充满了力量,它的力量不是来自于喊叫,也不是来自于进攻,而是忍受,去忍受生命赋予我们的责任,去忍受现实给予我们的幸福和苦难、…

独立游戏《星尘异变》UE5 C++程序开发日志2——创建并编写一个C++类

在本篇日志中,我们将要用一个C类来实现一个游戏内的物品,同时介绍UCLASS、USTRUCT、UPROPERTY的使用 一、创建一个C类 我们在UE5的"内容侧滑菜单"中,在右侧空白中右键选择"新建C类",然后可以选择一个想要的…

基础二分学习笔记

模板 : 个人倾向第一种 ; 整数二分 : 最大化查找 : 可行区域在左侧 : 查找最后一个<q的数的下标 : int find(int q){// 查找最后一个 < q 的下标 int l 0 , r n 1 ;while(l 1 < r){int mid l r >> 1 ;if(a[mid]<q) l mid ;else r mid ;}return…

【设计模式 01】单例模式

单例模式&#xff0c;是一种创建型设计模式&#xff0c;他的核心思想是保证一个类只有一个实例&#xff08;即&#xff0c;在整个应用程序中&#xff0c;只存在该类的一个实例对象&#xff0c;而不是创建多个相同类型的对象&#xff09;&#xff0c;并提供一个全局访问点来访问…

深入了解 JavaScript 混淆加密和环境检测

JavaScript混淆加密是一种通过修改代码结构和命名约定来增加代码的复杂性&#xff0c;使其难以被理解和逆向工程的技术。在这篇文章中&#xff0c;我们将深入探讨JS混淆加密的一些逻辑&#xff0c;并介绍如何通过环境检测来提高代码的安全性。我们将使用案例代码演示这些概念。…