ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

completed

This commit is contained in:
jiaming 2018-12-16 17:57:09 +08:00
parent fab280117a
commit 0890156e73
1 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/radarChart/index.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div class="radar-chart"> <div class="radar-chart">
<loading v-if="!data" />
<div class="canvas-container"> <div class="canvas-container">
<canvas :ref="ref" /> <canvas :ref="ref" />
</div> </div>
@ -118,7 +120,7 @@ export default {
ctx.clearRect(0, 0, ...canvasWH) ctx.clearRect(0, 0, ...canvasWH)
const { initColor, calcRadarRadius, calcRingType, calcRayLineRadianData } = this const { initColor, calcRadarRadius, calcRingType } = this
initColor() initColor()
@ -126,51 +128,45 @@ export default {
calcRingType() calcRingType()
calcRayLineRadianData() const { calcRayLineRadianData, calcRingRadiusData, calcRingPolylineData } = this
const { calcRingRadiusData, calcRingPolylineData, calcRingDrawConfig } = this calcRayLineRadianData()
calcRingRadiusData() calcRingRadiusData()
calcRingPolylineData() calcRingPolylineData()
calcRingDrawConfig() const { calcRingDrawConfig, calcRingFillConfig, fillRing } = this
const { calcRingFillConfig, fillRing, drawCircleRing } = this calcRingDrawConfig()
calcRingFillConfig() calcRingFillConfig()
fillRing() fillRing()
drawCircleRing() const { drawCircleRing, drawPolylineRing, calcRayLineConfig } = this
const { drawPolylineRing, calcRayLineConfig, drawRayLine, calcLabelPosData, calcLabelConfig } = this drawCircleRing()
drawPolylineRing() drawPolylineRing()
calcRayLineConfig() calcRayLineConfig()
const { drawRayLine, calcLabelPosData, calcLabelConfig } = this
drawRayLine() drawRayLine()
calcLabelPosData() calcLabelPosData()
calcLabelConfig() calcLabelConfig()
const { drawLable } = this const { drawLable, caclValuePointData, fillRadar } = this
drawLable() drawLable()
// drawRadarCircle() caclValuePointData()
// drawRayLine() fillRadar()
// const { drawLable, caclValuePointData, fillRadar } = this
// drawLable()
// caclValuePointData()
// fillRadar()
}, },
initColor () { initColor () {
const { colors, defaultColors } = this const { colors, defaultColors } = this
@ -188,9 +184,9 @@ export default {
this.ringType = ringType || defaultRingType this.ringType = ringType || defaultRingType
}, },
calcRayLineRadianData () { calcRayLineRadianData () {
const { data: { label }, defaultRayLineOffset } = this const { data: { label, rayLineOffset }, defaultRayLineOffset } = this
const { rayLineOffset, data } = label const { data } = label
const fullRadian = Math.PI * 2 const fullRadian = Math.PI * 2
@ -394,11 +390,11 @@ export default {
this.rayLineDash = (rayLineType || defaultRayLineType) === 'line' ? [10, 0] : [5, 5] this.rayLineDash = (rayLineType || defaultRayLineType) === 'line' ? [10, 0] : [5, 5]
const trueRayLineColor = rayLineColor === 'colors' ? drawColors : rayLineColor const trueRayLineColor = rayLineColor === 'colors' ? drawColors : (rayLineColor || defaultRayLineColor)
this.rayLineMultipleColor = typeof trueRingFillColor === 'object' this.rayLineColor = trueRayLineColor
this.rayLineColor = trueRayLineColor || defaultRayLineColor this.rayLineMultipleColor = typeof trueRayLineColor === 'object'
}, },
drawRayLine () { drawRayLine () {
const { ctx, rayLineColor, rayLineDash, ringPolylineData, arcOriginPos, rayLineMultipleColor } = this const { ctx, rayLineColor, rayLineDash, ringPolylineData, arcOriginPos, rayLineMultipleColor } = this
@ -471,13 +467,12 @@ export default {
ctx.fillText(data[i], ...pos) ctx.fillText(data[i], ...pos)
}) })
}, },
caclValuePointData () { caclValuePointData () {
const { data: { data }, arcOriginPos, radius, rayLineRadianData } = this const { data: { data, max }, arcOriginPos, radius, rayLineRadianData } = this
const { canvas: { getCircleRadianPoint } } = this const { canvas: { getCircleRadianPoint } } = this
const maxValue = Math.max(...data.map(({ data: td }) => Math.max(...td))) const maxValue = max || Math.max(...data.map(({ data: td }) => Math.max(...td)))
const valueRadius = data.map(({ data: td }) => const valueRadius = data.map(({ data: td }) =>
td.map(value => td.map(value =>
@ -489,26 +484,29 @@ export default {
r ? getCircleRadianPoint(...arcOriginPos, r, rayLineRadianData[i]) : false)) r ? getCircleRadianPoint(...arcOriginPos, r, rayLineRadianData[i]) : false))
}, },
fillRadar () { fillRadar () {
const { ctx, data: { data }, valuePointData, drawColors, canvas, color, filterNull } = this const { ctx, data: { data }, valuePointData, drawColors, filterNull } = this
const { drawPolylinePath } = canvas const { canvas: { drawPolylinePath } } = this
const { hexToRgb } = color const { color: { hexToRgb } } = this
const colorNum = drawColors.length const colorNum = drawColors.length
valuePointData.forEach((line, i) => { valuePointData.forEach((line, i) => {
const lineColor = data[i].color || drawColors[i % colorNum] 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]) data[i].dashed ? ctx.setLineDash([5, 5]) : ctx.setLineDash([10, 0])
drawPolylinePath(ctx, filterNull(line), 1, true, true) drawPolylinePath(ctx, filterNull(line), 1, true, true)
ctx.strokeStyle = lineColor ctx.strokeStyle = lineColor || currentColor
ctx.stroke() ctx.stroke()
ctx.fillStyle = hexToRgb(lineColor, 0.5) ctx.fillStyle = fillColor || hexToRgb(currentColor, 0.5)
ctx.fill() ctx.fill()
}) })