some modify
This commit is contained in:
jiaming
parent
83f1a68164
commit
807fdd25a8
|
|
@ -0,0 +1 @@
|
|||
12
|
||||
|
|
@ -0,0 +1 @@
|
|||
12
|
||||
Binary file not shown.
|
|
@ -10,9 +10,6 @@ html, body{
|
|||
}
|
||||
|
||||
body {
|
||||
background-size: 100%;
|
||||
background-image: url('../img/bg.png');
|
||||
background-repeat: repeat;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,334 +0,0 @@
|
|||
<template>
|
||||
<div class="arc-ring-chart">
|
||||
<loading v-if="!data" />
|
||||
|
||||
<div class="label-line" v-else>
|
||||
<div class="label-item" v-for="(label, i) in data.data" :key="label.title">
|
||||
<div :style="`background-color: ${data.color[i % data.color.length]};`"></div>
|
||||
<div>{{ label.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas :ref="ref" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArcRingChart',
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
ref: `concentric-arc-chart-${(new Date()).getTime()}`,
|
||||
canvasDom: '',
|
||||
canvasWH: [0, 0],
|
||||
ctx: '',
|
||||
|
||||
arcOriginPos: [],
|
||||
|
||||
defaultDecorationCircleRadius: 0.55,
|
||||
defaultArcRadiusArea: [0.3, 0.4],
|
||||
defaultArcWidthArea: [2, 10],
|
||||
defaultLabelFontSize: 12,
|
||||
|
||||
decorationRadius: '',
|
||||
|
||||
radianOffset: Math.PI / -2,
|
||||
|
||||
totalValue: 0,
|
||||
|
||||
arcRadius: [],
|
||||
arcRadian: [],
|
||||
arcWidth: [],
|
||||
|
||||
labelLinePoints: []
|
||||
}
|
||||
},
|
||||
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, drawDecorationCircle } = this
|
||||
|
||||
ctx.clearRect(0, 0, ...canvasWH)
|
||||
|
||||
drawDecorationCircle()
|
||||
|
||||
const { calcArcRadius, calcArcRadian, calcArcWidth, drawArc } = this
|
||||
|
||||
calcArcRadius()
|
||||
|
||||
calcArcRadian()
|
||||
|
||||
calcArcWidth()
|
||||
|
||||
drawArc()
|
||||
|
||||
const { calcLableLinePoints, drawLabelLine, drawLabelText } = this
|
||||
|
||||
calcLableLinePoints()
|
||||
|
||||
drawLabelLine()
|
||||
|
||||
drawLabelText()
|
||||
},
|
||||
drawDecorationCircle () {
|
||||
const { ctx, data: { decorationCircleRadius }, defaultDecorationCircleRadius, arcOriginPos } = this
|
||||
|
||||
const radius = this.decorationRadius = Math.min(...arcOriginPos) * (decorationCircleRadius || defaultDecorationCircleRadius)
|
||||
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.strokeStyle = 'rgba(250, 250, 250, 0.2)'
|
||||
|
||||
ctx.lineWidth = 4
|
||||
|
||||
ctx.arc(...arcOriginPos, radius, 0, Math.PI * 2)
|
||||
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.lineWidth = 1
|
||||
|
||||
ctx.arc(...arcOriginPos, radius - 7, 0, Math.PI * 2)
|
||||
|
||||
ctx.closePath()
|
||||
|
||||
ctx.stroke()
|
||||
},
|
||||
calcArcRadius () {
|
||||
const { data: { data, arcRadiusArea }, defaultArcRadiusArea, arcOriginPos, randomExtend } = this
|
||||
|
||||
const fullRadius = Math.min(...arcOriginPos)
|
||||
|
||||
const currentArcRaidusArea = arcRadiusArea || defaultArcRadiusArea
|
||||
|
||||
const maxRadius = fullRadius * Math.max(...currentArcRaidusArea)
|
||||
const minRadius = fullRadius * Math.min(...currentArcRaidusArea)
|
||||
|
||||
this.arcRadius = data.map(t => randomExtend(minRadius, maxRadius))
|
||||
},
|
||||
calcArcRadian () {
|
||||
const { data: { data }, multipleSum, radianOffset } = this
|
||||
|
||||
const valueSum = this.totalValue = multipleSum(...data.map(({ value }) => value))
|
||||
|
||||
let radian = radianOffset
|
||||
|
||||
const fullRadian = Math.PI * 2
|
||||
|
||||
this.arcRadian = data.map(({ value }) => {
|
||||
const currentRadian = value / valueSum * fullRadian
|
||||
|
||||
return [radian, (radian += currentRadian)]
|
||||
})
|
||||
},
|
||||
calcArcWidth () {
|
||||
const { data: { data, arcWidthArea }, defaultArcWidthArea, randomExtend } = this
|
||||
|
||||
const currentArea = arcWidthArea || defaultArcWidthArea
|
||||
|
||||
const maxWidth = Math.max(...currentArea)
|
||||
const minWidth = Math.min(...currentArea)
|
||||
|
||||
this.arcWidth = data.map(t => randomExtend(minWidth, maxWidth))
|
||||
},
|
||||
drawArc () {
|
||||
const { ctx, arcRadius, arcRadian, arcWidth, data: { color }, arcOriginPos } = this
|
||||
|
||||
const colorNum = color.length
|
||||
|
||||
arcRadius.forEach((radius, i) => {
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.arc(...arcOriginPos, radius, ...arcRadian[i])
|
||||
|
||||
ctx.strokeStyle = color[i % colorNum]
|
||||
|
||||
ctx.lineWidth = arcWidth[i]
|
||||
|
||||
ctx.stroke()
|
||||
})
|
||||
},
|
||||
calcLableLinePoints () {
|
||||
const { arcRadian, arcRadius, arcOriginPos: [x, y] } = this
|
||||
|
||||
const { sin, cos } = Math
|
||||
|
||||
let [leftlabelLineNum, rightLabelLineNum] = [0, 0]
|
||||
|
||||
const arcMiddlePoints = arcRadian.map((radian, i) => {
|
||||
const middleRadian = (radian[1] - radian[0]) / 2 + radian[0]
|
||||
|
||||
const point = [x + cos(middleRadian) * arcRadius[i], y + sin(middleRadian) * arcRadius[i]]
|
||||
|
||||
point[0] > x && rightLabelLineNum++
|
||||
point[0] < x && leftlabelLineNum++
|
||||
|
||||
return point
|
||||
})
|
||||
|
||||
const { getYPos, decorationRadius } = this
|
||||
|
||||
const labelLineYArea = [y - decorationRadius + 10, y + decorationRadius - 10]
|
||||
|
||||
const leftYPos = getYPos(labelLineYArea, leftlabelLineNum)
|
||||
const rightYPos = getYPos(labelLineYArea, rightLabelLineNum)
|
||||
|
||||
const offsetX = decorationRadius - 10
|
||||
|
||||
const leftlabelLineEndX = x - offsetX
|
||||
const rightLableLineEndX = x + offsetX
|
||||
|
||||
this.labelLinePoints = arcMiddlePoints.map(([px, py]) => {
|
||||
if (px > x) {
|
||||
const yPos = rightYPos.shift()
|
||||
|
||||
return [
|
||||
[px, py],
|
||||
[px + 5, yPos],
|
||||
[rightLableLineEndX, yPos]
|
||||
]
|
||||
} else {
|
||||
const ypos = leftYPos.pop()
|
||||
|
||||
return [
|
||||
[px, py],
|
||||
[px - 5, ypos],
|
||||
[leftlabelLineEndX, ypos]
|
||||
]
|
||||
}
|
||||
})
|
||||
},
|
||||
getYPos (area, num) {
|
||||
let gap = 0
|
||||
|
||||
const minus = area[1] - area[0]
|
||||
|
||||
if (num === 1) {
|
||||
return [area[0] + gap]
|
||||
} else if (num === 2) {
|
||||
const offset = minus * 0.1
|
||||
|
||||
return [area[0] + offset, area[1] - offset]
|
||||
} else {
|
||||
gap = minus / (num - 1)
|
||||
|
||||
return new Array(num).fill(0).map((t, i) => area[0] + i * gap)
|
||||
}
|
||||
},
|
||||
drawLabelLine () {
|
||||
const { ctx, labelLinePoints, canvas: { drawPolyline }, data: { color } } = this
|
||||
|
||||
const colorNum = color.length
|
||||
|
||||
labelLinePoints.forEach((polyline, i) => drawPolyline(ctx, polyline, 2, color[i % colorNum]))
|
||||
},
|
||||
drawLabelText () {
|
||||
const { ctx, labelLinePoints, data: { data, labelFontSize }, totalValue, defaultLabelFontSize, arcOriginPos: [x] } = this
|
||||
|
||||
ctx.font = `${labelFontSize || defaultLabelFontSize}px Arial`
|
||||
|
||||
ctx.fillStyle = '#fff'
|
||||
|
||||
data.forEach(({ value, title }, i) => {
|
||||
const currentPercent = Math.trunc(value / totalValue * 100) + '%'
|
||||
|
||||
const textPos = labelLinePoints[i][2]
|
||||
|
||||
const isLeft = textPos[0] < x
|
||||
|
||||
ctx.textAlign = isLeft ? 'end' : 'start'
|
||||
|
||||
ctx.textBaseline = 'bottom'
|
||||
|
||||
ctx.fillText(currentPercent, ...textPos)
|
||||
|
||||
ctx.textBaseline = 'top'
|
||||
|
||||
ctx.fillText(title, ...textPos)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.arc-ring-chart {
|
||||
position: relative;
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.label-line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0px 3px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
|
||||
:nth-child(1) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -119,6 +119,10 @@ export default {
|
|||
this.ringLineWidth = ringRadius * 0.3
|
||||
},
|
||||
draw () {
|
||||
const { ctx, canvasWH } = this
|
||||
|
||||
ctx.clearRect(0, 0, ...canvasWH)
|
||||
|
||||
const { caclArcData, data: { active }, drawActive, drwaStatic } = this
|
||||
|
||||
caclArcData()
|
||||
|
|
@ -134,19 +138,19 @@ export default {
|
|||
|
||||
const full = 2 * Math.PI
|
||||
|
||||
const aveAngle = full / data.length
|
||||
|
||||
let currentPercent = offsetAngle
|
||||
|
||||
this.arcData = []
|
||||
|
||||
data.forEach(({ value }) => {
|
||||
const currentAngle = value / totalValue * full + currentPercent
|
||||
const valueAngle = totalValue === 0 ? aveAngle : value / totalValue * full
|
||||
|
||||
this.arcData.push([
|
||||
currentPercent,
|
||||
currentAngle
|
||||
currentPercent += valueAngle
|
||||
])
|
||||
|
||||
currentPercent = currentAngle
|
||||
})
|
||||
},
|
||||
getTotalValue () {
|
||||
|
|
@ -232,7 +236,11 @@ export default {
|
|||
doPercentAnimation () {
|
||||
const { totalValue, percent, activeIndex, data: { data }, doPercentAnimation } = this
|
||||
|
||||
const currentPercent = Math.trunc(data[activeIndex].value / totalValue * 100)
|
||||
if (!totalValue) return
|
||||
|
||||
let currentPercent = Math.trunc(data[activeIndex].value / totalValue * 100)
|
||||
|
||||
currentPercent === 0 && (currentPercent = 1)
|
||||
|
||||
if (currentPercent === percent) return
|
||||
|
||||
|
|
@ -252,10 +260,6 @@ export default {
|
|||
}, 2000)
|
||||
},
|
||||
drwaStatic () {
|
||||
const { ctx, canvasWH } = this
|
||||
|
||||
ctx.clearRect(0, 0, ...canvasWH)
|
||||
|
||||
const { drawStaticRing, calcAroundLineData, drawAroundLine, calcAroundTextData, drawAroundText } = this
|
||||
|
||||
drawStaticRing()
|
||||
|
|
@ -276,19 +280,21 @@ export default {
|
|||
drawRing()
|
||||
},
|
||||
calcAroundLineData () {
|
||||
const { arcData, ringRadius, ringLineWidth, ringOriginPos: [x, y] } = this
|
||||
const { arcData, ringRadius, ringLineWidth, ringOriginPos: [x, y], data: { data }, canvas, totalValue } = this
|
||||
|
||||
const { sin, cos } = Math
|
||||
const { getCircleRadianPoint } = canvas
|
||||
|
||||
const radian = arcData.map(([a, b]) => (a + (b - a) / 2))
|
||||
|
||||
const radius = ringRadius + ringLineWidth / 2
|
||||
|
||||
const aroundLineData = radian.map(r => [x + cos(r) * radius, y + sin(r) * radius])
|
||||
const aroundLineData = radian.map(r => getCircleRadianPoint(x, y, radius, r))
|
||||
|
||||
const lineLength = 35
|
||||
|
||||
this.aroundLineData = aroundLineData.map(([bx, by]) => {
|
||||
this.aroundLineData = aroundLineData.map(([bx, by], i) => {
|
||||
if (!data[i].value && totalValue) return [false, false]
|
||||
|
||||
const lineEndXPos = (bx > x ? bx + lineLength : bx - lineLength)
|
||||
|
||||
return [
|
||||
|
|
@ -302,42 +308,49 @@ export default {
|
|||
|
||||
const colorNum = color.length
|
||||
|
||||
aroundLineData.forEach(([lineBegin, lineEnd], i) => drawLine(ctx, lineBegin, lineEnd, 1, color[i % colorNum]))
|
||||
aroundLineData.forEach(([lineBegin, lineEnd], i) =>
|
||||
lineBegin !== false &&
|
||||
drawLine(ctx, lineBegin, lineEnd, 1, color[i % colorNum]))
|
||||
},
|
||||
calcAroundTextData () {
|
||||
const { ctx, data: { data }, totalValue, aroundLineData } = this
|
||||
const { data: { data }, totalValue } = this
|
||||
|
||||
const { ringOriginPos: [x], aroundTextFont } = this
|
||||
|
||||
ctx.font = aroundTextFont
|
||||
|
||||
this.aroundTextData = []
|
||||
const aroundTextData = this.aroundTextData = []
|
||||
|
||||
data.forEach(({ value, title }, i) => {
|
||||
const percent = Math.trunc(value / totalValue * 100) + '%'
|
||||
if (!value && totalValue) return aroundTextData.push([false, false])
|
||||
|
||||
const percentWidth = ctx.measureText(percent).width
|
||||
const titleWidth = ctx.measureText(title).width
|
||||
let percent = value / totalValue * 100
|
||||
|
||||
const lineEndXPos = aroundLineData[i][1][0]
|
||||
const lineEndYPos = aroundLineData[i][1][1]
|
||||
percent < 1 ? (percent = percent.toFixed(2)) : (percent = Math.trunc(percent))
|
||||
|
||||
const leftTrue = lineEndXPos < x
|
||||
percent += '%'
|
||||
|
||||
this.aroundTextData.push(
|
||||
[percent, (leftTrue ? lineEndXPos - percentWidth : lineEndXPos), lineEndYPos],
|
||||
[title, (leftTrue ? lineEndXPos - titleWidth : lineEndXPos), lineEndYPos + 15]
|
||||
)
|
||||
!totalValue && (percent = '0%')
|
||||
|
||||
aroundTextData.push([percent, title])
|
||||
})
|
||||
},
|
||||
drawAroundText () {
|
||||
const { ctx, aroundTextData, aroundTextFont } = this
|
||||
const { ctx, aroundTextData, aroundTextFont, aroundLineData, ringOriginPos: [x] } = this
|
||||
|
||||
ctx.font = aroundTextFont
|
||||
ctx.fillStyle = '#fff'
|
||||
|
||||
aroundTextData.forEach(item => {
|
||||
ctx.fillText(...item)
|
||||
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 () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="demo">
|
||||
<div class="menu-bar">
|
||||
<div @click="status = 'borderBox'">Border-Box</div>
|
||||
<div @click="status = 'decoration'">Decoration</div>
|
||||
<div @click="status = 'chart'">Charts</div>
|
||||
<div @click="status = 'other'">Other</div>
|
||||
</div>
|
||||
|
||||
<border-box-demo v-if="status === 'borderBox'" />
|
||||
<decoration-demo v-if="status === 'decoration'" />
|
||||
<chart-demo v-if="status === 'chart'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import borderBoxDemo from './borderBoxDemo'
|
||||
import decorationDemo from './decorationDemo'
|
||||
import chartDemo from './chartDemo'
|
||||
|
||||
export default {
|
||||
name: 'Demo',
|
||||
components: {
|
||||
borderBoxDemo,
|
||||
decorationDemo,
|
||||
chartDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 'borderBox'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.menu-bar {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 10px 0px;
|
||||
|
||||
div {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
margin: 0px 20px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #00baff;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
color: #00baff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
module.exports = {
|
||||
devServer: {
|
||||
port: 6661
|
||||
port: 6661,
|
||||
proxy: {
|
||||
'/rest': {
|
||||
// target: 'http://yd.jdyw.prod.hndfsj.net',
|
||||
target: 'http://192.168.10.122:38088', //mashuai
|
||||
// target: 'http://192.168.10.125:38080', //qianshuo
|
||||
pathRewrite: {
|
||||
'^/rest': '/rest'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue