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

<template>
  <view class="box">
		<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.drawChart(val)
          })
        },
        deep: true
      },
    },
    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();

        })
      },
      createFgPath(ctx, x, y, startAngle, R, arr) {

        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.closePath();

        return points
      },
      drawChart(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.save()

            ctx.lineWidth = 3 * Ratio;
            ctx.strokeStyle = '#DACEFE';
            this.drawRing(ctx, x, y, startAngle, 132 * Ratio)
            ctx.fillStyle = '#F9F7FF'
            ctx.fill()

            ctx.restore()
            ctx.save()
            this.createFgPath(ctx, x, y, startAngle, R, arr)
            ctx.fillStyle = '#F9F7FF';
            ctx.fill()

            ctx.restore()
            ctx.save()
            ctx.lineWidth = 2 * Ratio;
            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.save()
            ctx.lineWidth = 2 * Ratio;
            ctx.strokeStyle = '#E1E0E6';
            this.drawLine(ctx, x, y, startAngle, 132 * Ratio, 8 * Ratio)

            ctx.restore()
            ctx.save()
            let x0 = width, y0 = height, x1 = 0, y1 = 0
            let points = this.createFgPath(ctx, x, y, startAngle, R, arr)
            points.forEach(point => {
              const { x, y } = point

              if (x < x0) {
                x0 = x
              }
              if (y < y0) {
                y0 = y
              }
              if (x > x1) {
                x1 = x
              }
              if (y > y1) {
                y1 = y
              }

            })
            console.log('points', points)
            console.log([x0, y0], [x1, y1])
            let _x = (x0 + x1) / 2
            let _y = (y0 + y1) / 2
            let _r_arr = [Math.abs(x0 - _x), Math.abs(x1 - _x), Math.abs(y0 - _y), Math.abs(y1 - _y)]
            let _r_max = Math.max(..._r_arr)
            let _r_min = Math.min(..._r_arr) - 40 * Ratio || 0
            console.log('_x', _x, '_y', _y, '_r', _r_max, _r_min)
            let radialGradient = ctx.createRadialGradient(_x, _y, 0, _x, _y, _r_max);
            radialGradient.addColorStop(0, 'rgba(188, 167, 255, 0.1)');
            radialGradient.addColorStop(1, 'rgba(99, 52, 238, 0.2)')
            ctx.fillStyle = radialGradient;
            ctx.fill()
            
            ctx.restore()
            ctx.save()
            this.createFgPath(ctx, x, y, startAngle, R, arr)
            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 = 13.9 * Ratio;
            ctx.shadowColor = "rgba(99, 52, 238, 0.4)";
            ctx.stroke();
          })
      },
    },
  }
</script>

<style scoped lang="scss">

$size: 526rpx;

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

  .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>