2022.8.23

riku

2022-08-23 8fbd6b8d09e70494d920cc0b77812e9643be3196

 component/progress/progress.js

@@ -12,6 +12,8 @@
   */
  data: {
    progress_txt: '信用较差',
    progress_txt_color1: '#f1fefc',
    progress_txt_color2: '#b4f7ec',
    count: 0, // 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    x: 100,
@@ -25,17 +27,30 @@

  observers: {
    'progress': function (progress) {
      if (progress >= 90) {
        this.setData({
          progress_txt: '信用优秀'
        })
      } else if (progress >= 60) {
        this.setData({
          progress_txt: '信用一般'
        })
      if (progress) {
        if (progress >= 90) {
          this.setData({
            progress_txt_color1: '#f2fff7',
            progress_txt_color2: '#96f3bd',
            progress_txt: '信用优秀'
          })
        } else if (progress >= 60) {
          this.setData({
            progress_txt_color1: '#f6f2e3',
            progress_txt_color2: '#f6e59f',
            progress_txt: '信用一般'
          })
        } else {
          this.setData({
            progress_txt_color1: '#fff6f6',
            progress_txt_color2: '#f29696',
            progress_txt: '信用较差'
          })
        }
      } else {
        this.setData({
          progress_txt: '信用较差'
          progress_txt_color1: '#f1fefc',
          progress_txt_color2: '#b4f7ec',
        })
      }
      this.drawProgressCircle(progress / 100)
@@ -95,7 +110,7 @@

          ctx.setStrokeStyle('#76ECD3');
          ctx.setFillStyle('#76ECD3')
          for (let i = 0; i <5; i++) {
          for (let i = 0; i < 5; i++) {
            var radian = Math.PI / 4 * i
            var x1 = x - Math.sin(radian) * (r - 10)
            var y1 = y + Math.cos(radian) * (r - 10)
@@ -114,7 +129,7 @@
              var text = i / 4 * 100 + ''
              var metrics = ctx.measureText(text)
              var w = metrics.width
              ctx.fillText(text, x3 - w / 2, y3+4)
              ctx.fillText(text, x3 - w / 2, y3 + 4)

            }
          }
@@ -139,10 +154,11 @@
          console.log("节点实例：", res); // 节点对应的 Canvas 实例。
          ctx = res.context;
          // 设置渐变
          var gradient = ctx.createLinearGradient(200, 100, 100, 200);
          gradient.addColorStop("0", "#76ECD3");
          gradient.addColorStop("0.5", "#76ECD3");
          gradient.addColorStop("1.0", "#76ECD3");
          var gradient = ctx.createLinearGradient(0, 0, 0, 200);
          gradient.addColorStop("0", "#96f3bd");
          gradient.addColorStop("0.1", "#f6e59f");
          gradient.addColorStop("0.4", "#f6e59f");
          gradient.addColorStop("1.0", "#f29696");

          ctx.setLineWidth(10);
          ctx.setStrokeStyle(gradient);