health-front/pages_order/report/result/radarChart.vue

<template>
  <view class="box">
		<canvas class="radar-bg" :canvas-id="`cpbg${code}`" type="2d"></canvas>
		<canvas class="radar-fg" :canvas-id="`cpfg${code}`" type="2d"></canvas>
    <div
      v-for="(item, index) in score" 
      :key="index" 
      :class="['axis', `axis-${index}`]"
    >
      <div class="flex title">
        <div class="line"></div>
        <div class="label">{{ axis[index] }}</div>
      </div>
      <div class="flex desc">
        指数<text class="highlight">{{ item }}</text>分
      </div>
    </div>
  </view>
</template>

<script>
  export default {
    props: {
      score: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        code: Math.floor(Math.random() * 100).toString(),
        axis: ['饮食', '运动', '心理', '体质', '作息']
      }
    },
    watch: {
      score: {
        handler(val) {
          console.log('watch score', val)
          this.$nextTick(() => {
            this.drawFg(val)
          })
        },
        deep: true
      },
    },
    mounted() {
      this.drawBg();
    },
    methods: {
      drawRing(ctx, x, y, startAngle, r) {
          
        let x0 = x + r * Math.cos(startAngle)
        let y0 = y - r * Math.sin(startAngle)

        let lineStartX = x0
        let lineStartY = y0
        let lineEndX = null
        let lineEndY = null

        ctx.beginPath(); //开始一个新的路径
        ctx.moveTo(lineStartX, lineStartY);

        for (let i = 1; i < 5; i++) {
        

          let angle = startAngle - Math.PI * 2 * i / 5

          lineEndX = x + r * Math.cos(angle)
          lineEndY = y - r * Math.sin(angle)
      
          ctx.lineTo(lineEndX, lineEndY);
          ctx.stroke();

          lineStartX = lineEndX
          lineStartY = lineEndY
        }

        lineEndX = x0
        lineEndY = y0
        ctx.moveTo(lineStartX, lineStartY);
        ctx.lineTo(lineEndX, lineEndY);
        ctx.stroke();
        ctx.closePath();

      },
      drawLine(ctx, x, y, startAngle, R, r) {
        let lines = new Array(5).fill(0).map(() => [{}, {}])
        let arr = [R, r]

        arr.forEach((len, index) => {
          for (let i = 0; i < 5; i++) {
          
            let angle = startAngle - Math.PI * 2 * i / 5

            lines[i][index].x = x + len * Math.cos(angle)
            lines[i][index].y = y - len * Math.sin(angle)
          }
        })

        lines.forEach(line => {
          const [point1, point2] = line

          ctx.beginPath(); //开始一个新的路径
          ctx.moveTo(point1.x, point1.y);
          ctx.lineTo(point2.x, point2.y);
          ctx.stroke();
          ctx.closePath();

        })
      },
      drawBg() {

        uni.createSelectorQuery().in(this)
        .select('.radar-bg')
        .fields({
          node: true,
          size: true
        })
        .exec(async (res) => {
          const canvas = res[0].node
          // Canvas 画布的实际绘制宽高
          const width = res[0].width
          const height = res[0].height
          //根据dpr调整
          const dpr = wx.getWindowInfo().pixelRatio
          canvas.width = width * dpr
          canvas.height = height * dpr

          let Ratio = width / 526
          
          // 渲染上下文
          const ctx = canvas.getContext('2d')

          ctx.scale(dpr, dpr)
          ctx.clearRect(0, 0, width, height)

          let x = width / 2
          let y = height / 2
          let startAngle = Math.PI / 2

          ctx.lineWidth = 2 * Ratio;
          ctx.save()
          
          ctx.lineWidth = 3 * Ratio;
          ctx.strokeStyle = '#DACEFE';
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 0;
          ctx.shadowBlur = 6;
          ctx.shadowColor = "rgba(211, 210, 229, 0.6)";
          this.drawRing(ctx, x, y, startAngle, 132 * Ratio)
          ctx.fillStyle = '#F9F7FF'
          ctx.fill()

          ctx.restore()
          ctx.save()
          ctx.setLineDash([2]);
          ctx.strokeStyle = '#E1E0E6';
          let dividers = [100, 68, 36, 8]
          dividers.forEach(r => {
            this.drawRing(ctx, x, y, startAngle, r * Ratio)
          })

          ctx.restore()
          // ctx.setLineDash([]);
          ctx.strokeStyle = '#E1E0E6';
          this.drawLine(ctx, x, y, startAngle, 132 * Ratio, 8 * Ratio)
        })

      },
      drawFg(arr) {
        uni.createSelectorQuery().in(this)
          .select('.radar-fg')
          .fields({
            node: true,
            size: true
          })
          .exec(async (res) => {
            console.log('radar-fg', res)
            const canvas = res[0].node
            // Canvas 画布的实际绘制宽高
            const width = res[0].width
            const height = res[0].height
            //根据dpr调整
            const dpr = wx.getWindowInfo().pixelRatio
            canvas.width = width * dpr
            canvas.height = height * dpr

            let Ratio = width / 526
            
            // 渲染上下文
            const ctx = canvas.getContext('2d')

            ctx.scale(dpr, dpr)
            ctx.clearRect(0, 0, width, height)

            let x = width / 2
            let y = height / 2
            let R = 100 * Ratio
            console.log('R', R)
            let startAngle = Math.PI / 2

            ctx.lineWidth = 3 * Ratio;
            let gradient = ctx.createLinearGradient(x - R, y, x + R, y);
            gradient.addColorStop('0', '#7451DE');
            gradient.addColorStop('1.0', '#B1A4FF');
            ctx.strokeStyle = gradient;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowBlur = 23.9;
            ctx.shadowColor = "rgba(99, 52, 238, 0.4)";

            let points = arr.map((score, i) => {
              let r = R * score / 100
              let angle = startAngle - Math.PI * 2 * i / 5

              return {
                x: x + r * Math.cos(angle),
                y: y - r * Math.sin(angle)
              }
            })

            let lineStartX = points[0].x
            let lineStartY = points[0].y
            let lineEndX = null
            let lineEndY = null

            ctx.beginPath(); //开始一个新的路径
            ctx.moveTo(lineStartX, lineStartY);

            for (let i = 1; i < 5; i++) {

              lineEndX = points[i].x
              lineEndY = points[i].y
          
              ctx.lineTo(lineEndX, lineEndY);
              ctx.stroke();

              lineStartX = lineEndX
              lineStartY = lineEndY
            }

            lineEndX = points[0].x
            lineEndY = points[0].y
            ctx.moveTo(lineStartX, lineStartY);
            ctx.lineTo(lineEndX, lineEndY);
            ctx.stroke();
            ctx.closePath();

            ctx.fillStyle = 'rgba(188, 167, 255, 0.2)'
            ctx.fill()
            
          })
      },
    },
  }
</script>

<style scoped lang="scss">

$size: 526rpx;

.box {
  position: relative;
  width: $size;
  height: $size;

  .radar-bg,
  .radar-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.axis {
  position: absolute;
  width: 128rpx;

  .title {
    justify-content: flex-start;
  }

  .line {
    width: 4rpx;
    height: 18rpx;
    border-radius: 2rpx;
    margin-right: 8rpx;
  }

  .label {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 1;
    color: #252545;
  }

  .desc {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 1;
    color: #8B8B8B;

    .highlight {
      margin: 0 8rpx;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 1.4;
      color: #7451DE;
    }
  }

  &-0 {
    top: 54rpx;
    left: 232rpx;
    
    .title {
      padding-left: 11rpx;
    }

    .line {
      background: #ECB501;
    }
  }

  &-1 {
    top: 205rpx;
    right: 0;
    
    .line {
      background: #009CEF;
    }
  }

  &-2 {
    bottom: 66rpx;
    right: 74rpx;

    .line {
      background: #DA629F;
    }
  }

  &-3 {
    bottom: 66rpx;
    left: 76rpx;
    
    .title {
      padding-right: 22rpx;
      justify-content: flex-end;
    }

    .line {
      background: #43B741;
    }
  }

  &-4 {
    top: 205rpx;
    left: 0rpx;
    
    .title {
      padding-right: 22rpx;
      justify-content: flex-end;
    }

    .line {
      background: #EB7F09;
    }
  }
}
</style>