v 1.1.0

components/concentricArcChart/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="concentric-arc-chart">
+    <loading v-if="!status" />
+
+    <div class="canvas-container">
+      <canvas :ref="ref" />
+    </div>
+  </div>
+</template>
+
+<script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+import canvasMixin from '../../mixins/canvasMixin.js'
+
+export default {
+  name: 'ConcentricArcChart',
+  props: ['data', 'colors'],
+  mixins: [colorsMixin, canvasMixin],
+  data () {
+    return {
+      ref: `concentric-arc-chart-${(new Date()).getTime()}`,
+
+      status: false,
+
+      arcOriginPos: [],
+
+      defaultArcRadiusArea: [0.2, 0.8],
+      defaultArcGap: 3,
+      defaultArcColor: ['#00c0ff', '#3de7c9'],
+
+      arcRadius: [],
+      arcRadian: [],
+      arcLineWidth: 0,
+      arcColor: ''
+    }
+  },
+  watch: {
+    data () {
+      const { checkData, draw } = this
+
+      checkData() && draw()
+    }
+  },
+  methods: {
+    async init () {
+      const { initCanvas, initColors, checkData, draw } = this
+
+      await initCanvas()
+
+      initColors()
+
+      checkData() && draw()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
+    },
+    draw () {
+      const { clearCanvas, calcArcRadius, calcArcRadian, calcArcColor, drawArc, drawTitle } = this
+
+      clearCanvas()
+
+      calcArcRadius()
+
+      calcArcRadian()
+
+      calcArcColor()
+
+      drawArc()
+
+      drawTitle()
+    },
+    calcArcRadius () {
+      const { data: { series, arcArea, arcGap }, centerPos, defaultArcRadiusArea, defaultArcGap } = this
+
+      const arcNum = series.length
+
+      const fullRadius = (centerPos[0] > centerPos[1] ? centerPos[1] : centerPos[0])
+
+      const currentArcArea = arcArea || defaultArcRadiusArea
+
+      const maxRadius = fullRadius * Math.max(...currentArcArea)
+      const minRadius = fullRadius * Math.min(...currentArcArea)
+
+      const currentArcGap = arcGap || defaultArcGap
+
+      const arcLineWidth = this.arcLineWidth = (maxRadius - minRadius - currentArcGap * (arcNum - 1)) / arcNum
+
+      const fullArcLineWidth = arcLineWidth + currentArcGap
+      const halfArcLineWidth = arcLineWidth / 2
+
+      this.arcRadius = new Array(arcNum).fill(0).map((t, i) => maxRadius - halfArcLineWidth - fullArcLineWidth * i)
+    },
+    calcArcRadian () {
+      const { data: { series } } = this
+
+      const fullRadian = Math.PI / 2 * 3
+
+      const offsetRadian = Math.PI * 0.5
+
+      this.arcRadian = new Array(series.length).fill(0).map((t, i) => series[i].value * fullRadian - offsetRadian)
+    },
+    calcArcColor () {
+      const { ctx, arcLineWidth, defaultArcColor, canvas: { getLinearGradientColor } } = this
+
+      const { drawColors, arcRadius: [ radius ], centerPos: [x, y] } = this
+
+      const colors = drawColors || defaultArcColor
+
+      this.arcColor = getLinearGradientColor(ctx,
+        [x, y - radius - arcLineWidth],
+        [x, y + radius + arcLineWidth], colors)
+    },
+    drawArc () {
+      const { ctx, arcRadius, arcRadian, centerPos, arcLineWidth, arcColor } = this
+
+      const offsetRadian = Math.PI / -2
+
+      ctx.lineWidth = arcLineWidth
+      ctx.strokeStyle = arcColor
+
+      arcRadius.forEach((radius, i) => {
+        ctx.beginPath()
+
+        ctx.arc(...centerPos, radius, offsetRadian, arcRadian[i])
+
+        ctx.stroke()
+      })
+    },
+    drawTitle () {
+      const { ctx, data: { series, fontSize }, arcRadius, centerPos: [ x, y ], arcLineWidth } = this
+
+      const textEndX = x - 10
+
+      ctx.font = `${fontSize || arcLineWidth}px Arial`
+      ctx.textAlign = 'right'
+      ctx.textBaseline = 'middle'
+      ctx.fillStyle = '#fff'
+
+      ctx.beginPath()
+
+      series.forEach(({ title }, i) => {
+        ctx.fillText(title, textEndX, y - arcRadius[i])
+      })
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+.concentric-arc-chart {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .canvas-container {
+    position: relative;
+    flex: 1;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>