cfc/cfc-frontend/components/RadarChart.vue

<template>
  <view class="radar-chart-wrap">
    <view
      class="radar-container"
      :style="containerStyle"
    >
      <canvas
        id="radarCanvas"
        type="2d"
        class="radar-canvas"
      ></canvas>
      <!-- 透明点击感应层 -->
      <view class="radar-tap-layer" @click="onCanvasTap"></view>
    </view>
  </view>
</template>

<script>
/**
 * RadarChart - 六维雷达图 Canvas 组件
 *
 * 基于 HTML5 Canvas 2D 渲染，支持 DPR 适配、入场动画、点击事件。
 * 用于「心智」页面展示六维认知能力评分。
 *
 * 用法：
 *   <RadarChart
 *     :dimensions="dimList"
 *     :scores="[85, 72, 68, 90, 55, 78]"
 *     childName="小明"
 *     @dimensionClick="onDimClick"
 *   />
 */
export default {
  props: {
    /** 六维标签 [{label, key}, ...]，顺序：感知/专注/记忆/逻辑/空间/加工速度 */
    dimensions: {
      type: Array,
      default: function() {
        return []
      }
    },
    /** 六维分值 0-100，与 dimensions 顺序一一对应 */
    scores: {
      type: Array,
      default: function() {
        return []
      }
    },
    /** 图表标题（显示在中心） */
    childName: {
      type: String,
      default: ''
    },
    /** 图表宽度（rpx） */
    width: {
      type: Number,
      default: 600
    },
    /** 图表高度（rpx） */
    height: {
      type: Number,
      default: 600
    }
  },
  data: function() {
    return {
      canvasReady: false,
      canvasWidth: 0,
      canvasHeight: 0,
      ctx: null,
      dpr: 1,
      _canvasNode: null,
      _canvasLeft: 0,
      _canvasTop: 0,
      /** 动画插值中的分数 [0..100] */
      _animScores: [0, 0, 0, 0, 0, 0],
      _animId: null
    }
  },
  computed: {
    /** 容器内联样式 */
    containerStyle: function() {
      return {
        width: this.width + 'rpx',
        height: this.height + 'rpx'
      }
    },
    /** 六边形 6 个顶点的标准角度（弧度），从顶部顺时针 */
    vertexAngles: function() {
      var angles = []
      for (var i = 0; i < 6; i++) {
        angles.push(-Math.PI / 2 + (i * 2 * Math.PI) / 6)
      }
      return angles
    }
  },
  watch: {
    scores: {
      handler: function() {
        if (this.canvasReady) {
          this._startAnimation()
        }
      },
      deep: true
    }
  },
  mounted: function() {
    var self = this
    // 等 DOM 布局完成后初始化 Canvas
    setTimeout(function() {
      self.initCanvas()
    }, 100)
  },
  beforeDestroy: function() {
    if (this._animId) {
      this._cancelAnim(this._animId)
      this._animId = null
    }
  },
  methods: {
    /* ===========================
     * Canvas 初始化
     * =========================== */

    initCanvas: function() {
      var self = this
      uni.createSelectorQuery().in(this)
        .select('#radarCanvas')
        .fields({ node: true, size: true, rect: true })
        .exec(function(res) {
          if (!res || !res[0]) { return }
          var info = res[0]
          if (!info.node) { return }

          var canvas = info.node
          var width = info.width
          var height = info.height
          if (!width || !height) { return }

          var system = uni.getSystemInfoSync()
          var pixelRatio = system.pixelRatio || 2

          canvas.width = width * pixelRatio
          canvas.height = height * pixelRatio

          var ctx = canvas.getContext('2d')
          ctx.scale(pixelRatio, pixelRatio)

          self.ctx = ctx
          self._canvasNode = canvas
          self.canvasWidth = width
          self.canvasHeight = height
          self.dpr = pixelRatio
          self._canvasLeft = info.left || 0
          self._canvasTop = info.top || 0
          self.canvasReady = true

          // 有分数则播放动画，否则只画网格
          if (self.scores && self.scores.length >= 6) {
            self._startAnimation()
          } else {
            self._doRender()
          }
        })
    },

    /* ===========================
     * 渲染
     * =========================== */

    _doRender: function() {
      if (!this.ctx) { return }
      var ctx = this.ctx
      var w = this.canvasWidth
      var h = this.canvasHeight
      var cx = w / 2
      var cy = h / 2
      var outerR = Math.min(w, h) * 0.38
      var angles = this.vertexAngles

      ctx.clearRect(0, 0, w, h)

      // 1. 绘制背景网格
      this._drawGrid(ctx, cx, cy, outerR, angles)

      // 2. 绘制分数区域
      this._drawScoreArea(ctx, cx, cy, outerR, angles)

      // 3. 绘制顶点标记
      this._drawVertices(ctx, cx, cy, outerR, angles)

      // 4. 绘制分数文字
      this._drawScoreText(ctx, cx, cy, outerR, angles)

      // 5. 绘制维度标签
      this._drawLabels(ctx, cx, cy, outerR, angles)

      // 6. 绘制中心标题
      this._drawCenterText(ctx, cx, cy)
    },

    /**
     * 绘制同心六边形网格 + 辐射线
     */
    _drawGrid: function(ctx, cx, cy, outerR, angles) {
      var levels = [0.25, 0.5, 0.75, 1.0]

      // 同心六边形
      ctx.strokeStyle = '#E2E8F0'
      ctx.lineWidth = 1

      for (var li = 0; li < levels.length; li++) {
        var r = outerR * levels[li]
        ctx.beginPath()
        for (var ai2 = 0; ai2 < 6; ai2++) {
          var vx_ = cx + r * Math.cos(angles[ai2])
          var vy_ = cy + r * Math.sin(angles[ai2])
          if (ai2 === 0) {
            ctx.moveTo(vx_, vy_)
          } else {
            ctx.lineTo(vx_, vy_)
          }
        }
        ctx.closePath()
        ctx.stroke()
      }

      // 辐射线（中心到各顶点）
      ctx.strokeStyle = '#E2E8F0'
      ctx.lineWidth = 1
      ctx.beginPath()
      for (var ai3 = 0; ai3 < 6; ai3++) {
        ctx.moveTo(cx, cy)
        ctx.lineTo(
          cx + outerR * Math.cos(angles[ai3]),
          cy + outerR * Math.sin(angles[ai3])
        )
      }
      ctx.stroke()
    },

    /**
     * 绘制分数填充多边形
     */
    _drawScoreArea: function(ctx, cx, cy, outerR, angles) {
      var scores = this._animScores
      if (!scores || scores.length < 6) { return }

      // 构建顶点数据
      var points = []
      for (var i = 0; i < 6; i++) {
        var score = scores[i] || 0
        var r = outerR * Math.max(0, Math.min(1, score / 100))
        points.push({
          x: cx + r * Math.cos(angles[i]),
          y: cy + r * Math.sin(angles[i])
        })
      }

      // 填充多边形
      ctx.beginPath()
      for (var pi = 0; pi < points.length; pi++) {
        if (pi === 0) {
          ctx.moveTo(points[pi].x, points[pi].y)
        } else {
          ctx.lineTo(points[pi].x, points[pi].y)
        }
      }
      ctx.closePath()

      // 径向渐变填充
      var gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, outerR)
      gradient.addColorStop(0, 'rgba(249, 115, 22, 0.12)')
      gradient.addColorStop(0.5, 'rgba(249, 115, 22, 0.20)')
      gradient.addColorStop(1, 'rgba(249, 115, 22, 0.32)')
      ctx.fillStyle = gradient
      ctx.fill()

      // 描边
      ctx.strokeStyle = '#F97316'
      ctx.lineWidth = 2.5
      ctx.stroke()
    },

    /**
     * 在各顶点绘制小圆点
     */
    _drawVertices: function(ctx, cx, cy, outerR, angles) {
      var scores = this._animScores
      if (!scores || scores.length < 6) { return }

      ctx.fillStyle = '#F97316'
      ctx.shadowColor = 'rgba(249, 115, 22, 0.3)'
      ctx.shadowBlur = 6

      for (var i = 0; i < 6; i++) {
        var score = scores[i] || 0
        var r = outerR * Math.max(0, Math.min(1, score / 100))
        var vx = cx + r * Math.cos(angles[i])
        var vy = cy + r * Math.sin(angles[i])
        ctx.beginPath()
        ctx.arc(vx, vy, 4.5, 0, 2 * Math.PI)
        ctx.fill()
      }

      ctx.shadowColor = 'transparent'
      ctx.shadowBlur = 0
    },

    /**
     * 在各顶点附近显示分值（百分比）
     */
    _drawScoreText: function(ctx, cx, cy, outerR, angles) {
      var scores = this._animScores
      if (!scores || scores.length < 6) { return }

      ctx.font = '11px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif'
      ctx.fillStyle = '#F97316'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'

      for (var i = 0; i < 6; i++) {
        var score = scores[i] || 0
        // 分数文字放在顶点向外偏移 16px 处
        var vertexR = outerR * Math.max(0, Math.min(1, score / 100))
        var textR = vertexR + 16
        var tx = cx + textR * Math.cos(angles[i])
        var ty = cy + textR * Math.sin(angles[i])

        var intScore = Math.round(score)
        ctx.fillText(intScore + '%', tx, ty)
      }
    },

    /**
     * 绘制维度名称标签（在六边形外围）
     */
    _drawLabels: function(ctx, cx, cy, outerR, angles) {
      var dims = this.dimensions
      if (!dims || dims.length < 6) { return }

      var labelOffset = 36

      for (var i = 0; i < 6; i++) {
        var dim = dims[i]
        if (!dim) { continue }

        var angle = angles[i]
        var labelR = outerR + labelOffset
        var lx = cx + labelR * Math.cos(angle)
        var ly = cy + labelR * Math.sin(angle)

        // 根据角度确定文字对齐方式
        var align = 'center'
        var baseline = 'middle'

        // 将角度归一化到 0 ~ 2PI
        var a = ((angle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)

        if (a < (1 * Math.PI) / 6 || a >= (11 * Math.PI) / 6) {
          // 右侧（-30°~30°）：上右 / 下右
          if (a < Math.PI / 2) {
            // 下右
            align = 'left'
            baseline = 'top'
          } else {
            // 上右
            align = 'left'
            baseline = 'bottom'
          }
        } else if (a < (5 * Math.PI) / 6) {
          // 底部（30°~150°）
          align = 'center'
          baseline = 'top'
        } else if (a < (7 * Math.PI) / 6) {
          // 左侧（150°~210°）
          if (a < Math.PI) {
            // 下左
            align = 'right'
            baseline = 'top'
          } else {
            // 上左
            align = 'right'
            baseline = 'bottom'
          }
        } else {
          // 顶部（210°~330°）
          align = 'center'
          baseline = 'bottom'
        }

        ctx.font = 'bold 13px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif'
        ctx.fillStyle = '#1E293B'
        ctx.textAlign = align
        ctx.textBaseline = baseline
        ctx.fillText(dim.label || '', lx, ly)
      }
    },

    /**
     * 在图表中心绘制孩子名字
     */
    _drawCenterText: function(ctx, cx, cy) {
      var name = this.childName
      if (!name) { return }

      ctx.font = 'bold 15px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif'
      ctx.fillStyle = '#F97316'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(name, cx, cy)
    },

    /* ===========================
     * 动画控制
     * =========================== */

    _startAnimation: function() {
      var self = this
      var target = this.scores.slice(0, 6)
      var start = [0, 0, 0, 0, 0, 0]
      var startTime = Date.now()
      var duration = 600

      if (this._animId) {
        this._cancelAnim(this._animId)
        this._animId = null
      }

      function tick() {
        var elapsed = Date.now() - startTime
        var progress = Math.min(1, elapsed / duration)
        // ease-out cubic
        var eased = 1 - Math.pow(1 - progress, 3)

        for (var i = 0; i < 6; i++) {
          self._animScores[i] = start[i] + (target[i] - start[i]) * eased
        }

        self._doRender()

        if (progress < 1) {
          self._animId = self._requestAnim(tick)
        } else {
          // 确保最终为精确值
          for (var j = 0; j < 6; j++) {
            self._animScores[j] = target[j]
          }
          self._doRender()
          self._animId = null
        }
      }

      self._animId = self._requestAnim(tick)
    },

    /**
     * 跨环境 requestAnimationFrame
     */
    _requestAnim: function(callback) {
      if (this._canvasNode && typeof this._canvasNode.requestAnimationFrame === 'function') {
        return this._canvasNode.requestAnimationFrame(callback)
      }
      // fallback
      return setTimeout(callback, 16)
    },

    /**
     * 跨环境 cancelAnimationFrame
     */
    _cancelAnim: function(id) {
      if (this._canvasNode && typeof this._canvasNode.cancelAnimationFrame === 'function') {
        this._canvasNode.cancelAnimationFrame(id)
      } else {
        clearTimeout(id)
      }
    },

    /* ===========================
     * 点击检测
     * =========================== */

    onCanvasTap: function(e) {
      if (!this.canvasReady) { return }

      var pageX
      var pageY

      // 从事件中获取页面坐标
      if (e.detail && typeof e.detail.x === 'number') {
        pageX = e.detail.x
        pageY = e.detail.y
      } else if (e.touches && e.touches[0]) {
        pageX = e.touches[0].x || e.touches[0].clientX || 0
        pageY = e.touches[0].y || e.touches[0].clientY || 0
      } else if (e.changedTouches && e.changedTouches[0]) {
        pageX = e.changedTouches[0].x || e.changedTouches[0].clientX || 0
        pageY = e.changedTouches[0].y || e.changedTouches[0].clientY || 0
      } else {
        return
      }

      // 转为 canvas 相对坐标
      var relX = pageX - (this._canvasLeft || 0)
      var relY = pageY - (this._canvasTop || 0)
      if (relX < 0 || relY < 0 || relX > this.canvasWidth || relY > this.canvasHeight) {
        return
      }

      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var outerR = Math.min(this.canvasWidth, this.canvasHeight) * 0.38
      var angles = this.vertexAngles
      var labelOffset = 36
      var hitRadius = 44

      // 检测点击是否落在某个维度标签附近
      for (var i = 0; i < 6; i++) {
        var dim = this.dimensions[i]
        if (!dim) { continue }

        var angle = angles[i]
        var labelR = outerR + labelOffset
        var lx = cx + labelR * Math.cos(angle)
        var ly = cy + labelR * Math.sin(angle)

        var dx = relX - lx
        var dy = relY - ly
        var dist = Math.sqrt(dx * dx + dy * dy)

        if (dist < hitRadius) {
          this.$emit('dimensionClick', dim.key || '')
          return
        }
      }
    }
  }
}
</script>

<style scoped>
.radar-chart-wrap {
  margin: 20rpx 30rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16rpx 0;
}

.radar-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.radar-tap-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
</style>