关于小程序wxml引用js中变量的疑问

我是个入门小程序的新手，最近遇到了一点疑惑，请各路大神解答一下，十分感谢。
xxx.wxml

<!--pages/analys/analys.wxml-->
<view class="contain_title">垃圾桶实时剩余容量 </view>
<text>{
    
    {
    
    list.recy_left}}</text>
<circle draw='circwewle1' per = "{
    
    {list.recy_left}}" r = '375'/>
<view class="circle_label">可回收垃圾 </view>
<circle draw='circwewle1' per = '78.56' r = '375'/>
<view class="circle_label">有害垃圾 </view>
<circle draw='circwewle1' per = '62' r = '375'/>
<view class="circle_label">干垃圾 </view>
<circle draw='circwewle1' per = '53' r = '375'/>
<view class="circle_label">湿垃圾 </view>

在这个代码中，第三行可以取出来值，但是在为per赋值时不可以。
如果直接在js中data中赋值，这是可以取出来了，刚开始定义为空，后面setdata就不行了。
在js中setdata后输出打印也是有值的。
请问一下怎么解决。

效果图：

下面是相关代码
xxx.js

// pages/analys/analys.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
     list:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效
    var that = this;
    
    wx.cloud.callFunction({
    
    
      name: "read_contain",
      success(res) {
    
    

        var arry = JSON.stringify(res.result)
        arry = arry.replace(/可回收垃圾/g, "recy_left")
        arry = arry.replace(/有害垃圾/g, "haza_left")
        arry = arry.replace(/干垃圾/g, "dry_left")
        arry = arry.replace(/湿垃圾/g, "wet_left")
        console.log(arry)
        arry = JSON.parse(arry)
        console.log(arry[0])
        that.setData({
    
    
          list: arry[0]
        })
      },

下面是circle组件的代码
circle.js

/* components/circle/circle.js */
Component({
    
    
  options: {
    
    
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    
    
    draw: {
    
    //画板元素名称id
      type: String,
      value: 'draw'
    },
    per: {
    
     //百分比 通过此值转换成step
      type: String,
      value: '0'
    },
    r: {
    
    //半径
      type: String,
      value: '50'
    }

  },

  data: {
    
     /*  私有数据，可用于模版渲染 */
    step: 1, //用来算圆的弧度0-2
    size: 0, //画板大小
    screenWidth: 750, //实际设备的宽度
    txt: 0
  },
  methods: {
    
    

    /**
     * el:画圆的元素
     * r:圆的半径
     * w:圆的宽度
     * 功能:画背景
     */
    drawCircleBg: function (el, r, w) {
    
    
      const ctx = wx.createCanvasContext(el, this);
      ctx.setLineWidth(w);// 设置圆环的宽度
      ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色
      ctx.setLineCap('round') // 设置圆环端点的形状
      ctx.beginPath();//开始一个新的路径
      ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
      //设置一个原点(110,110)，半径为100的圆的路径到当前路径
      ctx.stroke();//对当前路径进行描边
      ctx.draw();

    },
    /**
 * el:画圆的元素
 * r:圆的半径
 * w:圆的宽度
 * step:圆的弧度 (0-2)
 * 功能:彩色圆环
 */
    drawCircle: function (el, r, w, step) {
    
    
      var context = wx.createCanvasContext(el, this);
      // 设置渐变
      var gradient = context.createLinearGradient(2 * r, r, 0);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1.0", "#5956CC");
      context.setLineWidth(w);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath();//开始一个新的路径
      // step 从0到2为一周
      context.arc(r, r, r - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke();//对当前路径进行描边
      context.draw()
    }

  },

  lifetimes: {
    
    
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
    
    
      const _this = this;
      //获取屏幕宽度
      wx.getSystemInfo({
    
    
        success: function (res) {
    
    
          _this.setData({
    
    
            screenWidth: res.windowWidth
          });
        },
      });

      //初始化
      const el = _this.data.draw; //画板元素
      var per = _this.data.per; //圆形进度
      const r = Number(_this.data.r); //圆形半径

      _this.setData({
    
    
        step: (2 * Number(_this.data.per)) / 100,
        txt: _this.data.per
      });


      //获取屏幕宽度(并把真正的半径px转成rpx)
      let rpx = (_this.data.screenWidth / 750) * r;
      //计算出画板大小
      this.setData({
    
    
        size: rpx * 2
      });
      const w = 50;//圆形的宽度

      //组件入口,调用下面即可绘制 背景圆环和彩色圆环。
      _this.drawCircleBg(el + 'bg', rpx, w);//绘制 背景圆环
      _this.drawCircle(el, rpx, w, _this.data.step);//绘制 彩色圆环

    }

  }


})