小程序环形进度条爬坑

在做微信小程序的时候,发现用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'
    }
  }
};

效果图

相关推荐
tuanyuan99o7 小时前
2026商城小程序的安全怎么保障?防止黑客攻击和数据泄露
安全·小程序
facetarzan11 小时前
微信小程序文件下载
小程序·文件预览·文件下载
橘子海全栈攻城狮11 小时前
【最新源码】鸟博士微信小程序 023
spring boot·后端·web安全·微信小程序·小程序
Yuujs11 小时前
微信小程序反编译保姆级教程
微信小程序·小程序
m0_6470579611 小时前
微信小程序同声传译(WechatSI)通用接入教程
微信小程序·小程序·notepad++
梁辰兴11 小时前
微信小程序开发者工具下载与安装
微信·微信小程序·小程序·教程·软件安装·开发者工具
2501_9159090615 小时前
深入解析Mock.js:功能、应用及实战案例,提升前端开发效率
android·ios·小程序·https·uni-app·iphone·webview
于先生吖15 小时前
前后端分离体育服务项目,场馆计费+线下赛事排行小程序部署开发教程
java·小程序·uni-app
黄华SJ520it15 小时前
上门回收旧衣小程序开发全流程解析
小程序·系统开发
万岳科技系统开发16 小时前
互联网医院小程序搭建如何快速上线?完整建设方案解析
小程序·apache