小程序环形进度条爬坑

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

效果图

相关推荐
smartpi_ai9 小时前
JL-17T 能接传感器并把数据发到小程序吗?GPIO/ADC/UART 平台可做,I2C/SPI 要二开
人工智能·小程序·语音识别
andrsted11 小时前
在线刷小程序推荐
学习·微信小程序·小程序·学习方法
Mark1085911 小时前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
深瞳智检13 小时前
深瞳智检(小程序)正式上线!【免费/快捷/方便】获取YOLO检测数据集
人工智能·yolo·目标检测·小程序·数据集·cv数据收集
2601_9638702114 小时前
【计算机毕业设计】基于微信小程序的电子家谱的设计与实现
微信小程序·小程序·课程设计
zww894911115 小时前
外卖CPS小程序系统:从返利链路到订单回填的技术实现
小程序
lhldsg15 小时前
酒吧点餐小程序开发:从需求分析到技术落地实战
java·前端·小程序·架构·交友
2601_949950631 天前
考研英语资料太散?用小程序把真题、词汇和错题放到一起
人工智能·学习·考研·小程序·刷题·小程序推荐
lhldsg2 天前
树洞倾诉的核心需求与产品定位误区
java·前端·小程序
lhldsg2 天前
宠物同城领养平台开发实战:从需求分析到上线部署指南
java·前端·小程序·需求分析·宠物