DemuMesDataV/src/components/radarChart/index.vue

<template>
  <div class="radar-chart">

    <loading v-if="!data" />

    <div class="canvas-container">
      <canvas :ref="ref" />
    </div>

    <label-line :label="data.labelLine" :colors="drawColors" />
  </div>
</template>

<script>
import colorsMixin from '../../mixins/colorsMixin.js'

import canvasMixin from '../../mixins/canvasMixin.js'

export default {
  name: 'RadarChart',
  mixins: [canvasMixin, colorsMixin],
  data () {
    return {
      ref: `radar-chart-${(new Date()).getTime()}`,

      defaultRadius: 0.8,
      defaultRingNum: 4,
      defaultRingType: 'circle',
      defaultRingLineType: 'dashed',
      defaultRingLineColor: '#666',
      defaultRingFillType: 'none',
      defaultRayLineType: 'line',
      defaultRayLineColor: '#666',

      defaultRayLineOffset: Math.PI * -0.5,
      defaultLabelColor: '#fff',
      defaultLabelFS: 10,

      defaultValueFontSize: 10,
      defaultValueColor: '#999',

      drawColors: '',
      radius: '',
      ringType: '',
      rayLineRadianData: [],
      ringRadiusData: [],
      ringPolylineData: [],
      ringLineDash: [],
      ringlineMultipleColor: false,
      ringLineColor: '',
      ringFillType: '',
      ringFillMultipleColor: false,
      ringFillColor: '',
      rayLineColor: '',
      rayLineDash: '',
      rayLineMultipleColor: false,
      labelPosData: [],
      labelColor: '',
      labelFontSize: '',
      labelMultipleColor: false,

      valuePointData: []
    }
  },
  props: ['data', 'colors'],
  watch: {
    data (d) {
      const { reDraw } = this

      reDraw(d)
    },
    color (d) {
      const { reDraw } = this

      reDraw(d)
    }
  },
  methods: {
    async init () {
      const { initCanvas, data, draw } = this

      await initCanvas()

      data && draw()
    },
    draw () {
      const { ctx, canvasWH } = this

      ctx.clearRect(0, 0, ...canvasWH)

      const { initColors, calcRadarRadius, calcRingType } = this

      initColors()

      calcRadarRadius()

      calcRingType()

      const { calcRayLineRadianData, calcRingRadiusData, calcRingPolylineData } = this

      calcRayLineRadianData()

      calcRingRadiusData()

      calcRingPolylineData()

      const { calcRingDrawConfig, calcRingFillConfig, fillRing } = this

      calcRingDrawConfig()

      calcRingFillConfig()

      fillRing()

      const { drawCircleRing, drawPolylineRing, calcRayLineConfig } = this

      drawCircleRing()

      drawPolylineRing()

      calcRayLineConfig()

      const { drawRayLine, calcLabelPosData, calcLabelConfig } = this

      drawRayLine()

      calcLabelPosData()

      calcLabelConfig()

      const { drawLable, caclValuePointData, fillRadar } = this

      drawLable()

      caclValuePointData()

      fillRadar()

      const { fillValueText } = this

      fillValueText()
    },
    calcRadarRadius () {
      const { canvasWH, data: { radius }, defaultRadius } = this

      this.radius = Math.min(...canvasWH) * (radius || defaultRadius) * 0.5
    },
    calcRingType () {
      const { data: { ringType }, defaultRingType } = this

      this.ringType = ringType || defaultRingType
    },
    calcRayLineRadianData () {
      const { data: { label, rayLineOffset }, defaultRayLineOffset } = this

      const { data } = label

      const fullRadian = Math.PI * 2

      const radianGap = fullRadian / data.length

      const radianOffset = rayLineOffset || defaultRayLineOffset

      this.rayLineRadianData = data.map((t, i) => radianGap * i + radianOffset)
    },
    calcRingRadiusData () {
      const { data: { ringNum }, defaultRingNum, radius } = this

      const num = ringNum || defaultRingNum

      const radiusGap = radius / num

      this.ringRadiusData = new Array(num).fill(0).map((t, i) =>
        radiusGap * (i + 1))
    },
    calcRingPolylineData () {
      const { ringRadiusData, rayLineRadianData, centerPos } = this

      const { canvas: { getCircleRadianPoint } } = this

      this.ringPolylineData = ringRadiusData.map((r, i) =>
        rayLineRadianData.map(radian =>
          getCircleRadianPoint(...centerPos, r, radian)))
    },
    calcRingDrawConfig () {
      const { defaultRingLineType, defaultRingLineColor } = this

      const { data: { ringLineType, ringLineColor }, drawColors } = this

      this.ringLineDash = (ringLineType || defaultRingLineType) === 'dashed' ? [5, 5] : [10, 0]

      const trueRingLineColor = ringLineColor === 'colors' ? drawColors : ringLineColor

      this.ringlineMultipleColor = typeof trueRingLineColor === 'object'

      this.ringLineColor = trueRingLineColor || defaultRingLineColor
    },
    calcRingFillConfig () {
      const { data: { ringFillType, ringFillColor }, defaultRingFillType, drawColors } = this

      this.ringFillType = ringFillType || defaultRingFillType

      const trueRingFillColor = this.ringFillColor = (!ringFillColor || ringFillColor === 'colors') ? drawColors : ringFillColor

      this.ringFillMultipleColor = typeof trueRingFillColor === 'object'
    },
    fillRing () {
      const { ringFillType, fillCoverRing, fillMulCoverRing, fillRingRing } = this

      switch (ringFillType) {
        case 'cover': fillCoverRing()
          break

        case 'mulCover': fillMulCoverRing()
          break

        case 'ring': fillRingRing()
          break
      }
    },
    fillCoverRing () {
      const { ctx, centerPos, ringFillColor, ringType, radius, ringPolylineData } = this

      const { canvas: { getRadialGradientColor, drawPolylinePath } } = this

      const color = getRadialGradientColor(ctx, centerPos, 0, radius, ringFillColor)

      ctx.beginPath()

      ringType === 'circle' && ctx.arc(...centerPos, radius, 0, Math.PI * 2)

      ringType === 'polyline' && drawPolylinePath(ctx, ringPolylineData[ringPolylineData.length - 1])

      ctx.closePath()

      ctx.fillStyle = color

      ctx.fill()
    },
    fillMulCoverRing () {
      const { ctx, ringType, ringFillColor, centerPos } = this

      const { ringFillMultipleColor, ringPolylineData, ringRadiusData, deepClone } = this

      const { canvas: { drawPolylinePath } } = this

      !ringFillMultipleColor && (ctx.fillStyle = ringFillColor)

      const colorNum = ringFillColor.length

      const LastRingIndex = ringRadiusData.length - 1

      ringType === 'circle' &&
        deepClone(ringRadiusData).reverse().forEach((radius, i) => {
          ctx.beginPath()

          ctx.arc(...centerPos, radius, 0, Math.PI * 2)

          ringFillMultipleColor && (ctx.fillStyle = ringFillColor[(LastRingIndex - i) % colorNum])

          ctx.fill()
        })

      ringType === 'polyline' &&
        deepClone(ringPolylineData).reverse().forEach((line, i) => {
          drawPolylinePath(ctx, line, true, true)

          ringFillMultipleColor && (ctx.fillStyle = ringFillColor[(LastRingIndex - i) % colorNum])

          ctx.fill()
        })
    },
    fillRingRing () {
      const { ctx, ringType, ringRadiusData, rayLineRadianData, getPointToLineDistance } = this

      const { ringFillMultipleColor, centerPos, ringFillColor, ringPolylineData } = this

      const { canvas: { drawPolylinePath, getCircleRadianPoint } } = this

      let lineWidth = ctx.lineWidth = ringRadiusData[0]

      const halfLineWidth = lineWidth / 2

      const colorNum = ringFillColor.length

      !ringFillMultipleColor && (ctx.strokeStyle = ringFillColor)

      ringType === 'circle' &&
        ringRadiusData.forEach((r, i) => {
          ctx.beginPath()

          ctx.arc(...centerPos, r - halfLineWidth, 0, Math.PI * 2)

          ringFillMultipleColor && (ctx.strokeStyle = ringFillColor[i % colorNum])

          ctx.stroke()
        })

      ctx.lineCap = 'round'

      ctx.lineWidth = getPointToLineDistance(centerPos, ringPolylineData[0][0], ringPolylineData[0][1])

      ringType === 'polyline' &&
        ringRadiusData.map(r => r - halfLineWidth).map(r =>
          rayLineRadianData.map(radian =>
            getCircleRadianPoint(...centerPos, r, radian))).forEach((line, i) => {
          drawPolylinePath(ctx, line, true, true)

          ringFillMultipleColor && (ctx.strokeStyle = ringFillColor[i % colorNum])

          ctx.stroke()
        })
    },
    drawCircleRing () {
      const { data: { ringType }, defaultRingType } = this

      if ((ringType && ringType !== 'circle') || (!ringType && defaultRingType !== 'circle')) return

      const { ctx, ringRadiusData, centerPos, ringLineDash, ringlineMultipleColor, ringLineColor } = this

      ctx.setLineDash(ringLineDash)

      ctx.lineWidth = 1

      !ringlineMultipleColor && (ctx.strokeStyle = ringLineColor)

      const colorNum = ringLineColor.length

      ringRadiusData.forEach((r, i) => {
        ctx.beginPath()

        ctx.arc(...centerPos, r, 0, Math.PI * 2)

        ringlineMultipleColor && (ctx.strokeStyle = ringLineColor[i % colorNum])

        ctx.stroke()
      })
    },
    drawPolylineRing () {
      const { data: { ringType }, defaultRingType } = this

      if ((ringType && ringType !== 'polyline') || (!ringType && defaultRingType !== 'polyline')) return

      const { ctx, ringPolylineData, ringLineDash, ringlineMultipleColor, ringLineColor } = this

      const { canvas: { drawPolyline } } = this

      const colorNum = ringLineColor.length

      ringPolylineData.forEach((line, i) =>
        drawPolyline(ctx, line, 1,
          (ringlineMultipleColor ? ringLineColor[i % colorNum] : ringLineColor),
          true, ringLineDash, true))
    },
    calcRayLineConfig () {
      const { data: { rayLineType, rayLineColor }, defaultRayLineType, defaultRayLineColor, drawColors } = this

      this.rayLineDash = (rayLineType || defaultRayLineType) === 'line' ? [10, 0] : [5, 5]

      const trueRayLineColor = rayLineColor === 'colors' ? drawColors : (rayLineColor || defaultRayLineColor)

      this.rayLineColor = trueRayLineColor

      this.rayLineMultipleColor = typeof trueRayLineColor === 'object'
    },
    drawRayLine () {
      const { ctx, rayLineColor, rayLineDash, ringPolylineData, centerPos, rayLineMultipleColor } = this

      const lastRingLineIndex = ringPolylineData.length - 1

      ctx.setLineDash(rayLineDash)

      !rayLineMultipleColor && (ctx.strokeStyle = rayLineColor)

      ctx.lineWidth = 1

      const colorNum = rayLineColor.length

      ringPolylineData[lastRingLineIndex].forEach((point, i) => {
        ctx.beginPath()

        ctx.moveTo(...centerPos)

        ctx.lineTo(...point)

        rayLineMultipleColor && (ctx.strokeStyle = rayLineColor[i % colorNum])

        ctx.stroke()
      })
    },
    calcLabelPosData () {
      const { rayLineRadianData, radius, centerPos } = this

      const { canvas: { getCircleRadianPoint } } = this

      const labelRadius = radius + 10

      this.labelPosData = rayLineRadianData.map(radian =>
        getCircleRadianPoint(...centerPos, labelRadius, radian))
    },
    calcLabelConfig () {
      const { defaultLabelColor, defaultLabelFS, drawColors } = this

      const { data: { label: { color, fontSize } } } = this

      const trueLabelColor = color === 'colors' ? drawColors : (color || defaultLabelColor)

      this.labelMultipleColor = typeof trueLabelColor === 'object'

      this.labelFontSize = fontSize || defaultLabelFS

      this.labelColor = trueLabelColor
    },
    drawLable () {
      const { ctx, centerPos: [x], labelPosData, labelColor, labelFontSize, labelMultipleColor } = this

      const { data: { label: { data } } } = this

      ctx.font = `${labelFontSize}px Arial`

      !labelMultipleColor && (ctx.fillStyle = labelColor)

      ctx.textBaseline = 'middle'

      const colorNum = labelColor.length

      labelPosData.forEach((pos, i) => {
        ctx.textAlign = 'start'

        pos[0] < x && (ctx.textAlign = 'end')

        labelMultipleColor && (ctx.fillStyle = labelColor[i % colorNum])

        ctx.fillText(data[i], ...pos)
      })
    },
    caclValuePointData () {
      const { data: { data, max }, centerPos, radius, rayLineRadianData } = this

      const { canvas: { getCircleRadianPoint } } = this

      const maxValue = max || Math.max(...data.map(({ data: td }) => Math.max(...td)))

      const valueRadius = data.map(({ data: td }) =>
        td.map(value =>
          Number.isFinite(value)
            ? value / maxValue * radius : false))

      this.valuePointData = valueRadius.map(td =>
        td.map((r, i) =>
          r ? getCircleRadianPoint(...centerPos, r, rayLineRadianData[i]) : false))
    },
    fillRadar () {
      const { ctx, data: { data }, valuePointData, drawColors, filterNull } = this

      const { canvas: { drawPolylinePath } } = this

      const { color: { hexToRgb } } = this

      const colorNum = drawColors.length

      valuePointData.forEach((line, i) => {
        const currentColor = drawColors[i % colorNum]

        const lineColor = data[i].lineColor
        const fillColor = data[i].fillColor

        data[i].dashed ? ctx.setLineDash([5, 5]) : ctx.setLineDash([10, 0])

        drawPolylinePath(ctx, filterNull(line), 1, true, true)

        ctx.strokeStyle = lineColor || currentColor

        ctx.stroke()

        ctx.fillStyle = fillColor || hexToRgb(currentColor, 0.5)

        ctx.fill()
      })
    },
    fillValueText () {
      const { data: { data, showValueText, valueTextFontSize } } = this

      if (!showValueText) return

      const { ctx, defaultValueFontSize } = this

      ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`

      const { fillSeriesText } = this

      data.forEach((item, i) => fillSeriesText(item, i))
    },
    fillSeriesText ({ valueTextColor, lineColor, fillColor, data }, i) {
      const { ctx, drawColors, valuePointData, drawTexts } = this

      const { data: { valueTextOffset, valueTextColor: outerValueTC }, defaultValueColor } = this

      const trueOffset = valueTextOffset || [5, -5]

      const drawColorsNum = drawColors.length

      let currentColor = valueTextColor
      currentColor === 'inherit' && (currentColor = lineColor || fillColor || drawColors[i % drawColorsNum])
      currentColor instanceof Array && (currentColor = currentColor[0])

      ctx.fillStyle = currentColor || outerValueTC || defaultValueColor

      drawTexts(ctx, data, valuePointData[i], trueOffset)
    },
    drawTexts (ctx, values, points, [x, y] = [0, 0]) {
      values.forEach((v, i) => {
        if (!v && v !== 0) return

        ctx.fillText(v, points[i][0] + x, points[i][1] + y)
      })
    },
    reDraw (d) {
      const { draw } = this

      d && draw()
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

<style lang="less">
.radar-chart {
  position: relative;
  display: flex;
  flex-direction: column;

  .canvas-container {
    flex: 1;
  }

  canvas {
    width: 100%;
    height: 100%;
  }
}
</style>