v 1.1.0
This commit is contained in:
jiaming743
434
components/ringChart/index.vue
Normal file
434
components/ringChart/index.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div class="ring-chart">
|
||||
<loading v-if="!status" />
|
||||
|
||||
<div class="canvas-container">
|
||||
<canvas :ref="ref" />
|
||||
|
||||
<div class="center-info" v-if="data.active">
|
||||
<div class="percent-show">{{percent}}</div>
|
||||
<div class="current-label" :ref="labelRef">{{data.series[activeIndex].title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label-line :label="dealAfterLabelLine" :colors="drawColors" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colorsMixin from '../../mixins/colorsMixin.js'
|
||||
import canvasMixin from '../../mixins/canvasMixin.js'
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
props: ['data', 'labelLine', 'colors'],
|
||||
mixins: [colorsMixin, canvasMixin],
|
||||
data () {
|
||||
return {
|
||||
ref: `ring-chart-${(new Date()).getTime()}`,
|
||||
|
||||
status: false,
|
||||
|
||||
labelRef: `label-ref-${(new Date()).getTime()}`,
|
||||
labelDom: '',
|
||||
|
||||
ringRadius: '',
|
||||
ringLineWidth: '',
|
||||
maxRingWidthP: 1.15,
|
||||
|
||||
activeIndex: 1,
|
||||
activePercent: 1,
|
||||
activeAddStatus: true,
|
||||
|
||||
arcData: [],
|
||||
radiusData: [],
|
||||
aroundLineData: [],
|
||||
aroundTextData: [],
|
||||
aroundTextFont: '13px Arial',
|
||||
|
||||
activeIncrease: 0.005,
|
||||
activeTime: 4500,
|
||||
|
||||
offsetAngle: Math.PI * 0.5 * -1,
|
||||
|
||||
dealAfterLabelLine: [],
|
||||
|
||||
percent: 0,
|
||||
totalValue: 0,
|
||||
|
||||
activeAnimationHandler: '',
|
||||
awaitActiveHandler: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data (d) {
|
||||
const { checkData, reDraw } = this
|
||||
|
||||
checkData() && reDraw()
|
||||
},
|
||||
activeIndex () {
|
||||
const { doPercentAnimation, doLabelTextAnimation } = this
|
||||
|
||||
doPercentAnimation()
|
||||
|
||||
doLabelTextAnimation()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
const { initCanvas, initColors, calcRingConfig, checkData, draw } = this
|
||||
|
||||
await initCanvas()
|
||||
|
||||
initColors()
|
||||
|
||||
calcRingConfig()
|
||||
|
||||
checkData() && draw()
|
||||
},
|
||||
calcRingConfig () {
|
||||
const { canvasWH } = this
|
||||
|
||||
const ringRadius = this.ringRadius = Math.min(...canvasWH) * 0.6 / 2
|
||||
|
||||
this.ringLineWidth = ringRadius * 0.3
|
||||
},
|
||||
checkData () {
|
||||
const { data } = this
|
||||
|
||||
this.status = false
|
||||
|
||||
if (!data || !data.series) return false
|
||||
|
||||
this.status = true
|
||||
|
||||
return true
|
||||
},
|
||||
draw () {
|
||||
const { clearCanvas, calcLabelLineData } = this
|
||||
|
||||
clearCanvas()
|
||||
|
||||
calcLabelLineData()
|
||||
|
||||
const { caclArcData, data: { active }, drawActive, drwaStatic } = this
|
||||
|
||||
caclArcData()
|
||||
|
||||
active ? drawActive() : drwaStatic()
|
||||
},
|
||||
calcLabelLineData () {
|
||||
const { labelLine, deepClone, data: { series } } = this
|
||||
|
||||
if (!labelLine) return
|
||||
|
||||
const dealAfterLabelLine = this.dealAfterLabelLine = deepClone(labelLine)
|
||||
|
||||
if (labelLine.labels === 'inherit') dealAfterLabelLine.labels = series.map(({ title }) => title)
|
||||
},
|
||||
caclArcData () {
|
||||
const { data: { series } } = this
|
||||
|
||||
const { getTotalValue, offsetAngle } = this
|
||||
|
||||
const totalValue = getTotalValue()
|
||||
|
||||
const full = 2 * Math.PI
|
||||
|
||||
const aveAngle = full / series.length
|
||||
|
||||
let currentPercent = offsetAngle
|
||||
|
||||
this.arcData = []
|
||||
|
||||
series.forEach(({ value }) => {
|
||||
const valueAngle = totalValue === 0 ? aveAngle : value / totalValue * full
|
||||
|
||||
this.arcData.push([
|
||||
currentPercent,
|
||||
currentPercent += valueAngle
|
||||
])
|
||||
})
|
||||
},
|
||||
getTotalValue () {
|
||||
const { data: { series } } = this
|
||||
|
||||
let totalValue = 0
|
||||
|
||||
series.forEach(({ value }) => (totalValue += value))
|
||||
|
||||
this.totalValue = totalValue
|
||||
|
||||
return totalValue
|
||||
},
|
||||
drawActive () {
|
||||
const { ctx, canvasWH } = this
|
||||
|
||||
ctx.clearRect(0, 0, ...canvasWH)
|
||||
|
||||
const { calcRadiusData, drawRing, drawActive } = this
|
||||
|
||||
calcRadiusData()
|
||||
|
||||
drawRing()
|
||||
|
||||
this.activeAnimationHandler = requestAnimationFrame(drawActive)
|
||||
},
|
||||
calcRadiusData () {
|
||||
const { arcData, activeAddStatus, activePercent, activeIncrease, activeIndex } = this
|
||||
|
||||
const radiusData = new Array(arcData.length).fill(1)
|
||||
|
||||
const activeRadius = (activeAddStatus ? this.activePercent += activeIncrease : activePercent)
|
||||
|
||||
radiusData[activeIndex] = activeRadius
|
||||
|
||||
const { maxRingWidthP, ringRadius, awaitActive } = this
|
||||
|
||||
const prevRadius = maxRingWidthP - activeRadius + 1
|
||||
|
||||
const prevIndex = activeIndex - 1
|
||||
|
||||
radiusData[prevIndex < 0 ? arcData.length - 1 : prevIndex] = prevRadius
|
||||
|
||||
this.radiusData = radiusData.map(v => (v * ringRadius))
|
||||
|
||||
if (activeRadius >= maxRingWidthP && activeAddStatus) awaitActive()
|
||||
},
|
||||
awaitActive () {
|
||||
const { activeTime, turnToNextActive } = this
|
||||
|
||||
this.activeAddStatus = false
|
||||
|
||||
this.awaitActiveHandler = setTimeout(turnToNextActive, activeTime)
|
||||
},
|
||||
turnToNextActive () {
|
||||
const { arcData, activeIndex } = this
|
||||
|
||||
this.activePercent = 1
|
||||
|
||||
this.activeIndex = (activeIndex + 1 === arcData.length ? 0 : activeIndex + 1)
|
||||
|
||||
this.activeAddStatus = true
|
||||
},
|
||||
drawRing () {
|
||||
const { arcData, ctx, centerPos, radiusData } = this
|
||||
|
||||
const { ringLineWidth, drawColors } = this
|
||||
|
||||
const arcNum = arcData.length
|
||||
|
||||
arcData.forEach((arc, i) => {
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.arc(...centerPos, radiusData[i], ...arc)
|
||||
|
||||
ctx.lineWidth = ringLineWidth
|
||||
|
||||
ctx.strokeStyle = drawColors[i % arcNum]
|
||||
|
||||
ctx.stroke()
|
||||
})
|
||||
},
|
||||
doPercentAnimation () {
|
||||
const { totalValue, percent, activeIndex, data: { series }, doPercentAnimation } = this
|
||||
|
||||
if (!totalValue) return
|
||||
|
||||
const currentValue = series[activeIndex].value
|
||||
|
||||
let currentPercent = Math.trunc(currentValue / totalValue * 100)
|
||||
|
||||
currentPercent === 0 && (currentPercent = 1)
|
||||
currentValue === 0 && (currentPercent = 0)
|
||||
|
||||
if (currentPercent === percent) return
|
||||
|
||||
currentPercent > percent ? this.percent++ : this.percent--
|
||||
|
||||
setTimeout(doPercentAnimation, 10)
|
||||
},
|
||||
doLabelTextAnimation () {
|
||||
let { labelDom, $refs, labelRef } = this
|
||||
|
||||
if (!labelDom) labelDom = this.labelDom = $refs[labelRef]
|
||||
|
||||
labelDom.setAttribute('class', 'current-label transform-text')
|
||||
|
||||
setTimeout(() => {
|
||||
labelDom.setAttribute('class', 'current-label')
|
||||
}, 2000)
|
||||
},
|
||||
drwaStatic () {
|
||||
const { drawStaticRing, calcAroundLineData, drawAroundLine, calcAroundTextData, drawAroundText } = this
|
||||
|
||||
drawStaticRing()
|
||||
|
||||
calcAroundLineData()
|
||||
|
||||
drawAroundLine()
|
||||
|
||||
calcAroundTextData()
|
||||
|
||||
drawAroundText()
|
||||
},
|
||||
drawStaticRing () {
|
||||
const { arcData, ringRadius, drawRing } = this
|
||||
|
||||
this.radiusData = new Array(arcData.length).fill(1).map(v => v * ringRadius)
|
||||
|
||||
drawRing()
|
||||
},
|
||||
calcAroundLineData () {
|
||||
const { arcData, ringRadius, ringLineWidth, centerPos: [x, y], data: { series }, canvas, totalValue } = this
|
||||
|
||||
const { getCircleRadianPoint } = canvas
|
||||
|
||||
const radian = arcData.map(([a, b]) => (a + (b - a) / 2))
|
||||
|
||||
const radius = ringRadius + ringLineWidth / 2
|
||||
|
||||
const aroundLineData = radian.map(r => getCircleRadianPoint(x, y, radius, r))
|
||||
|
||||
const lineLength = 35
|
||||
|
||||
this.aroundLineData = aroundLineData.map(([bx, by], i) => {
|
||||
if (!series[i].value && totalValue) return [false, false]
|
||||
|
||||
const lineEndXPos = (bx > x ? bx + lineLength : bx - lineLength)
|
||||
|
||||
return [
|
||||
[bx, by],
|
||||
[lineEndXPos, by]
|
||||
]
|
||||
})
|
||||
},
|
||||
drawAroundLine () {
|
||||
const { aroundLineData, drawColors, ctx, canvas: { drawLine } } = this
|
||||
|
||||
const colorNum = drawColors.length
|
||||
|
||||
aroundLineData.forEach(([lineBegin, lineEnd], i) =>
|
||||
lineBegin !== false &&
|
||||
drawLine(ctx, lineBegin, lineEnd, 1, drawColors[i % colorNum]))
|
||||
},
|
||||
calcAroundTextData () {
|
||||
const { data: { series, fixed }, totalValue } = this
|
||||
|
||||
const aroundTextData = this.aroundTextData = []
|
||||
|
||||
if (!totalValue) return data.forEach(({ v, title }, i) => aroundTextData.push([0, title]))
|
||||
|
||||
const dataLast = series.length - 1
|
||||
|
||||
let totalPercent = 0
|
||||
|
||||
series.forEach(({ value, title }, i) => {
|
||||
if (!value) return aroundTextData.push([false, false])
|
||||
|
||||
let percent = Number((value / totalValue * 100).toFixed(fixed || 1))
|
||||
|
||||
percent < 0.1 && (percent = 0.1)
|
||||
|
||||
const currentPercent = (i === dataLast ? 100 - totalPercent : percent).toFixed(fixed || 1)
|
||||
|
||||
aroundTextData.push([currentPercent, title])
|
||||
|
||||
totalPercent += percent
|
||||
})
|
||||
},
|
||||
drawAroundText () {
|
||||
const { ctx, aroundTextData, aroundTextFont, aroundLineData, centerPos: [x] } = this
|
||||
|
||||
ctx.font = aroundTextFont
|
||||
ctx.fillStyle = '#fff'
|
||||
|
||||
aroundTextData.forEach(([percent, title], i) => {
|
||||
if (percent === false) return
|
||||
|
||||
const currentPos = aroundLineData[i][1]
|
||||
|
||||
ctx.textAlign = 'start'
|
||||
|
||||
currentPos[0] < x && (ctx.textAlign = 'end')
|
||||
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillText(`${percent}%`, ...currentPos)
|
||||
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillText(title, ...currentPos)
|
||||
})
|
||||
},
|
||||
reDraw () {
|
||||
const { activeAnimationHandler, draw } = this
|
||||
|
||||
cancelAnimationFrame(activeAnimationHandler)
|
||||
|
||||
draw()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ring-chart {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
|
||||
.canvas-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.center-info {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
font-family: "Microsoft Yahei", Arial, sans-serif;
|
||||
max-width: 25%;
|
||||
|
||||
.percent-show {
|
||||
font-size: 28px;
|
||||
|
||||
&::after {
|
||||
content: '%';
|
||||
font-size: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.current-label {
|
||||
font-size: 16px;
|
||||
margin-top: 5%;
|
||||
transform: rotateY(0deg);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.transform-text {
|
||||
animation: transform-text 2s linear;
|
||||
}
|
||||
|
||||
@keyframes transform-text {
|
||||
to {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user