2018-12-09 16:50:02 +08:00
|
|
|
<template>
|
|
|
|
<div class="concentric-arc-chart">
|
|
|
|
<loading v-if="!data" />
|
|
|
|
|
|
|
|
<canvas :ref="ref" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'ConcentricArcChart',
|
|
|
|
props: ['data'],
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
ref: `concentric-arc-chart-${(new Date()).getTime()}`,
|
|
|
|
canvasDom: '',
|
|
|
|
canvasWH: [0, 0],
|
|
|
|
ctx: '',
|
|
|
|
|
|
|
|
arcOriginPos: [],
|
|
|
|
|
|
|
|
defaultArcRadiusArea: [0.2, 0.8],
|
|
|
|
defaultArcGap: 3,
|
2018-12-11 14:11:12 +08:00
|
|
|
defaultArcColor: ['#00c0ff', '#3de7c9'],
|
2018-12-09 16:50:02 +08:00
|
|
|
|
|
|
|
arcRadius: [],
|
|
|
|
arcRadian: [],
|
|
|
|
arcLineWidth: 0,
|
|
|
|
arcColor: ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
data (d) {
|
|
|
|
const { draw } = this
|
|
|
|
|
|
|
|
d && draw()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
init () {
|
|
|
|
const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
|
|
|
|
|
|
|
|
$nextTick(e => {
|
|
|
|
initCanvas()
|
|
|
|
|
|
|
|
calcArcConfig()
|
|
|
|
|
|
|
|
data && draw()
|
|
|
|
})
|
|
|
|
},
|
|
|
|
initCanvas () {
|
|
|
|
const { $refs, ref, labelRef, canvasWH } = this
|
|
|
|
|
|
|
|
const canvas = this.canvasDom = $refs[ref]
|
|
|
|
|
|
|
|
this.labelDom = $refs[labelRef]
|
|
|
|
|
|
|
|
canvasWH[0] = canvas.clientWidth
|
|
|
|
canvasWH[1] = canvas.clientHeight
|
|
|
|
|
|
|
|
canvas.setAttribute('width', canvasWH[0])
|
|
|
|
canvas.setAttribute('height', canvasWH[1])
|
|
|
|
|
|
|
|
this.ctx = canvas.getContext('2d')
|
|
|
|
},
|
|
|
|
calcArcConfig () {
|
|
|
|
const { canvasWH, arcOriginPos } = this
|
|
|
|
|
|
|
|
arcOriginPos[0] = canvasWH[0] / 2
|
|
|
|
arcOriginPos[1] = canvasWH[1] / 2
|
|
|
|
},
|
|
|
|
draw () {
|
|
|
|
const { ctx, canvasWH, calcArcRadius, calcArcRadian, calcArcColor, drawArc, drawTitle } = this
|
|
|
|
|
|
|
|
ctx.clearRect(0, 0, ...canvasWH)
|
|
|
|
|
|
|
|
calcArcRadius()
|
|
|
|
|
|
|
|
calcArcRadian()
|
|
|
|
|
|
|
|
calcArcColor()
|
|
|
|
|
|
|
|
drawArc()
|
|
|
|
|
|
|
|
drawTitle()
|
|
|
|
},
|
|
|
|
calcArcRadius () {
|
|
|
|
const { data: { data, arcArea, arcGap }, arcOriginPos, defaultArcRadiusArea, defaultArcGap } = this
|
|
|
|
|
|
|
|
const arcNum = data.length
|
|
|
|
|
|
|
|
const fullRadius = (arcOriginPos[0] > arcOriginPos[1] ? arcOriginPos[1] : arcOriginPos[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: { data } } = this
|
|
|
|
|
|
|
|
const fullRadian = Math.PI / 2 * 3
|
|
|
|
|
|
|
|
const offsetRadian = Math.PI * 0.5
|
|
|
|
|
|
|
|
this.arcRadian = new Array(data.length).fill(0).map((t, i) => data[i].value * fullRadian - offsetRadian)
|
|
|
|
},
|
|
|
|
calcArcColor () {
|
2018-12-11 14:11:12 +08:00
|
|
|
const { ctx, arcLineWidth, defaultArcColor, canvas: { getLinearGradientColor } } = this
|
2018-12-09 16:50:02 +08:00
|
|
|
|
2018-12-11 14:11:12 +08:00
|
|
|
const { data: { color }, arcRadius: [ radius ], arcOriginPos: [x, y] } = this
|
2018-12-09 16:50:02 +08:00
|
|
|
|
2018-12-11 14:11:12 +08:00
|
|
|
const colors = color || defaultArcColor
|
2018-12-09 16:50:02 +08:00
|
|
|
|
2018-12-11 14:11:12 +08:00
|
|
|
this.arcColor = getLinearGradientColor(ctx,
|
|
|
|
[x, y - radius - arcLineWidth],
|
|
|
|
[x, y + radius + arcLineWidth], colors)
|
2018-12-09 16:50:02 +08:00
|
|
|
},
|
|
|
|
drawArc () {
|
|
|
|
const { ctx, arcRadius, arcRadian, arcOriginPos, arcLineWidth, arcColor } = this
|
|
|
|
|
|
|
|
const offsetRadian = Math.PI / -2
|
|
|
|
|
|
|
|
ctx.lineWidth = arcLineWidth
|
|
|
|
ctx.strokeStyle = arcColor
|
|
|
|
|
|
|
|
arcRadius.forEach((radius, i) => {
|
|
|
|
ctx.beginPath()
|
|
|
|
|
|
|
|
ctx.arc(...arcOriginPos, radius, offsetRadian, arcRadian[i])
|
|
|
|
|
|
|
|
ctx.stroke()
|
|
|
|
})
|
|
|
|
},
|
|
|
|
drawTitle () {
|
|
|
|
const { ctx, data: { data, fontSize }, arcRadius, arcOriginPos: [ 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()
|
|
|
|
|
|
|
|
data.forEach(({ title }, i) => {
|
|
|
|
ctx.fillText(title, textEndX, y - arcRadius[i])
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
const { init } = this
|
|
|
|
|
|
|
|
init()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
.concentric-arc-chart {
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|