微信小程序canvas 画动态圆环百分比进度条实例根据手机屏幕宽度自适应放大缩小

本文链接：https://blog.csdn.net/qq_39517820/article/details/79195862

本文通过微信小程序的canvas组件，详细介绍了如何创建一个根据手机屏幕宽度自适应放大缩小的动态圆环百分比进度条实例。包括wxml、wxss和js代码实现。

摘要由CSDN通过智能技术生成

这里写图片描述

这里是wxml代码：

<component-analysis-report active="0" bindselectReport="selectReport"></component-analysis-report>
<component-no-data text="小喜正在统计中，敬请期待噢～" wx:if="{
   {!params.allAmount}}"></component-no-data>
<view class="wrap" hidden="{
   {!params.allAmount}}">

    <!-- <view class="top" style="z-index:1;">{
   {
   reportName}}询盘统计报告</view> -->
    <view class="circle">
        <canvas class="more" canvas-id="canvasCircles"></canvas>
        <canvas class="more" canvas-id="canvasCircle"></canvas>
        <canvas class="more" canvas-id="canvasArcCir"></canvas>
        <view class="more circles" wx:if="{
   {
   current==0}}">
            <view>
                <view class="circleone">
                    <text>{
   {
   params.gmvPercent}}</text> %
                </view>
                <view class="circletwo">成交占比</view>
            </view>
        </view>

        <!-- <view class="more circles" wx:if="{
   {
   current==1}}">
            <view>
                <view class="circleone">
                    <text>{
   {
   params.effectivePercent}}</text> %
                </view>
                <view class="circletwo">有效询盘占比</view>
            </view>
        </view> -->

        <!-- <view class="more circles bottom" wx:if="{
   {
   current==0}}">
            <view class="ONE"></view>
            <view class="TWO"></view>
        </view>
        <view class="more circles bottom" wx:if="{
   {
   current==1}}">
            <view class="TWO"></view>
            <view class="ONE"></view>
        </view> -->
    </view>
    <swiper class="circle-box" bindchange="currentChange">
        <block>
            <swiper-item>
            </swiper-item>
            <!-- <swiper-item>
            </swiper-item> -->
        </block>
    </swiper>
    <view class="mainS">
        <view class="deal" wx:if="{
   {
   current==0}}">
            <view class="block">
                <view class="pic">
                    <image src="{
   {
   images.totalValue}}" />
                </view>
                <view class="name"> {
   {
   enquireName.totalValue}} <