extend draw echelon column

This commit is contained in:
JM 2018-12-23 22:33:45 +08:00
parent dea174d3f6
commit 34771fe562
1 changed files with 225 additions and 46 deletions

View File

@ -29,6 +29,8 @@ export default {
mulValueAdd: true, mulValueAdd: true,
horizon: false, horizon: false,
echelonOffset: 10,
columnData: [], columnData: [],
columnItemSeriesNum: 0, columnItemSeriesNum: 0,
columnItemAllWidth: 0, columnItemAllWidth: 0,
@ -158,33 +160,27 @@ export default {
labelAxisTagPos, labelAxisTagPos,
horizon horizon
)) ))
console.error(this.valuePointPos)
}, },
drawFigure () { drawFigure () {
const { data: { data, roundColumn }, valuePointPos } = this const { data: { data }, valuePointPos } = this
const { drawColumn, drawRoundColumn, drawLeftEchelon, drawRightEchelon, drawPolyline, drawSmoothline } = this const { drawColumn, drawEchelon, drawline } = this
data.forEach((series, i) => { data.forEach((series, i) => {
switch (series.type) { switch (series.type) {
case 'leftEchelon': drawLeftEchelon(series, valuePointPos[i], i) case 'leftEchelon':
break case 'rightEchelon': drawEchelon(series, valuePointPos[i], i)
case 'rightEchelon': drawRightEchelon(series, valuePointPos[i], i)
break
case 'polyline': drawPolyline(series, valuePointPos[i], i)
break
case 'smoothline': drawSmoothline(series, valuePointPos[i], i)
break break
default: roundColumn ? drawRoundColumn(series, valuePointPos[i], i) : drawColumn(series, valuePointPos[i], i) case 'polyline':
case 'smoothline': drawline(series, valuePointPos[i], i)
break
default: drawColumn(series, valuePointPos[i], i)
break break
} }
}) })
}, },
getCurrentColor (i) {
// const { drawColors } = this
},
getGradientColor (value, colors) { getGradientColor (value, colors) {
const { data: { localGradient }, axisAnglePos, horizon } = this const { data: { localGradient }, axisAnglePos, horizon } = this
@ -205,46 +201,60 @@ export default {
} }
}, },
drawColumn ({ fillColor }, points, i) { drawColumn ({ fillColor }, points, i) {
const { columnItemWidth, columnItemOffset, labelAxisTagPos, getOffsetPoint } = this const { ctx, columnItemWidth, drawColors } = this
const { ctx, drawColors, getGradientColor, deepClone } = this
ctx.setLineDash([10, 0]) ctx.setLineDash([10, 0])
ctx.lineWidth = columnItemWidth ctx.lineWidth = columnItemWidth
const currentColor = fillColor || drawColors[i] const color = fillColor || drawColors[i]
const colorNum = color.length
const drawColorNum = drawColors.length
const { columnItemOffset, labelAxisTagPos, getOffsetPoint } = this
const currentOffset = columnItemOffset.shift() const currentOffset = columnItemOffset.shift()
const offsetTagPos = labelAxisTagPos.map(p => getOffsetPoint(p, currentOffset))
const offsetTagPos = deepClone(labelAxisTagPos).map(p => getOffsetPoint(p, currentOffset)) const { getGradientColor, getRoundColumnPoint, data: { roundColumn } } = this
points.forEach((point, i) => { ctx.lineCap = roundColumn ? 'round' : 'butt'
if (point[0] instanceof Array) {
const seriesColumn = points[0][0] instanceof Array
seriesColumn && points.forEach((series, i) => {
let lastEnd = offsetTagPos[i] let lastEnd = offsetTagPos[i]
point.forEach((item, j) => { series.forEach((item, j) => {
const beginPoint = getOffsetPoint(item, currentOffset) const currentPoint = getOffsetPoint(item, currentOffset)
// if (j === 0) return let columnPoint = [lastEnd, currentPoint]
if (j === 1) return
if (j === 2) return
ctx.beginPath() roundColumn && (columnPoint = getRoundColumnPoint(columnPoint))
ctx.strokeStyle = 'blue'
ctx.moveTo(...beginPoint)
ctx.lineTo(...lastEnd)
ctx.stroke()
lastEnd = deepClone(beginPoint) if (typeof color === 'string') {
}) ctx.strokeStyle = drawColors[(i + j) % drawColorNum]
return } else {
ctx.strokeStyle = color[(i + j) % colorNum]
} }
ctx.beginPath() ctx.beginPath()
ctx.strokeStyle = getGradientColor(point, currentColor) ctx.moveTo(...columnPoint[0])
ctx.moveTo(...getOffsetPoint(point, currentOffset)) ctx.lineTo(...columnPoint[1])
ctx.lineTo(...offsetTagPos[i]) ctx.stroke()
lastEnd = currentPoint
})
})
!seriesColumn && points.forEach((point, i) => {
let columnPoint = [offsetTagPos[i], getOffsetPoint(point, currentOffset)]
roundColumn && (columnPoint = getRoundColumnPoint(columnPoint))
ctx.beginPath()
ctx.strokeStyle = getGradientColor(point, color)
ctx.moveTo(...columnPoint[0])
ctx.lineTo(...columnPoint[1])
ctx.stroke() ctx.stroke()
}) })
}, },
@ -255,11 +265,180 @@ export default {
? [x, y + offset] ? [x, y + offset]
: [x + offset, y] : [x + offset, y]
}, },
drawRoundColumn () {}, getRoundColumnPoint ([pa, pb]) {
drawLeftEchelon () {}, const { horizon, columnItemWidth } = this
drawRightEchelon () {},
drawPolyline () {}, const radius = columnItemWidth / 2
drawSmoothline () {},
let [a, b, c, d] = [0, 0, 0, 0]
if (horizon) {
a = pa[0] + radius
b = pa[1]
c = pb[0] - radius
d = pb[1]
} else {
a = pa[0]
b = pa[1] - radius
c = pb[0]
d = pb[1] + radius
}
return horizon ? [
[a > c ? c : a, b],
[c, d]
] : [
[a, b],
[c, b > d ? d : b]
]
},
drawline ({ lineColor, fillColor, pointColor, lineType, lineDash, type }, points, i) {
const { drawColors, ctx, axisOriginPos: [x, y], horizon } = this
const { color: { hexToRgb }, getGradientColor, getTopPoint } = this
const drawColorNum = drawColors.length
const currentColor = drawColors[i % drawColorNum]
let currentLineColor = hexToRgb(currentColor, 0.6)
let currentPointColor = currentColor
lineColor && (currentLineColor = lineColor)
pointColor && (currentPointColor = pointColor)
let currentLineType = lineType || 'line'
let currentLineDash = currentLineType === 'dashed' ? (lineDash || [5, 5]) : [10, 0]
ctx.strokeStyle = currentLineColor
const { canvas: { drawPolylinePath, drawPolyline, drawPoints } } = this
const { canvas: { drawSmoothlinePath, drawSmoothline } } = this
const lineFun = type === 'polyline' ? [drawPolylinePath, drawPolyline] : [drawSmoothlinePath, drawSmoothline]
if (fillColor) {
const lastPoint = points[points.length - 1]
ctx.fillStyle = getGradientColor(getTopPoint(points), fillColor)
lineFun[0](ctx, points, false, true, true)
ctx.lineTo(...(horizon ? [x, lastPoint[1]] : [lastPoint[0], y]))
ctx.lineTo(...(horizon ? [x, points[0][1]] : [points[0][0], y]))
ctx.closePath()
ctx.fill()
}
lineFun[1](ctx, points, 1, currentLineColor, false, currentLineDash, true, true)
drawPoints(ctx, points, 2, currentPointColor)
},
getTopPoint (points) {
const { horizon } = this
let topIndex = 0
const xPos = points.map(([x]) => x)
const yPos = points.map(([, y]) => y)
if (horizon) {
const top = Math.max(...xPos)
topIndex = xPos.findIndex(v => v === top)
}
if (!horizon) {
const top = Math.min(...yPos)
topIndex = yPos.findIndex(v => v === top)
}
console.error(topIndex)
return points[topIndex]
},
drawEchelon ({ fillColor, type }, points, i) {
const { data: { roundColumn } } = this
const seriesColumn = points[0][0] instanceof Array
if (seriesColumn || roundColumn) return
const { ctx, columnItemOffset, labelAxisTagPos, getOffsetPoint } = this
const currentOffset = columnItemOffset.shift()
const offsetTagPos = labelAxisTagPos.map(p => getOffsetPoint(p, currentOffset))
const { drawColors, getGradientColor, getEchelonPoints } = this
const drawColorsNum = drawColors.length
const color = fillColor || drawColors[i % drawColorsNum]
const { canvas: { drawPolylinePath } } = this
points.forEach((point, i) => {
const topPoint = getOffsetPoint(point, currentOffset)
const bottomPoint = offsetTagPos[i]
const echelonPoints = getEchelonPoints(topPoint, bottomPoint, type)
drawPolylinePath(ctx, echelonPoints, true, true)
ctx.fillStyle = getGradientColor(point, color)
ctx.fill()
})
},
getEchelonPoints ([tx, ty], [bx, by], type) {
const { columnItemWidth, echelonOffset, horizon } = this
const halfWidth = columnItemWidth / 2
const echelonPoint = []
if (horizon) {
let enhance = tx - bx < echelonOffset
if (type === 'leftEchelon') {
echelonPoint[0] = [tx, ty + halfWidth]
echelonPoint[1] = [bx, ty + halfWidth]
echelonPoint[2] = [bx + echelonOffset, by - halfWidth]
echelonPoint[3] = [tx, ty - halfWidth]
}
if (type === 'rightEchelon') {
echelonPoint[0] = [tx, ty - halfWidth]
echelonPoint[1] = [bx, ty - halfWidth]
echelonPoint[2] = [bx + echelonOffset, by + halfWidth]
echelonPoint[3] = [tx, ty + halfWidth]
}
if (enhance) echelonPoint.splice(2, 1)
}
if (!horizon) {
let enhance = by - ty < echelonOffset
if (type === 'leftEchelon') {
echelonPoint[0] = [tx + halfWidth, ty]
echelonPoint[1] = [tx + halfWidth, by]
echelonPoint[2] = [tx - halfWidth, by - echelonOffset]
echelonPoint[3] = [tx - halfWidth, ty]
}
if (type === 'rightEchelon') {
echelonPoint[0] = [tx - halfWidth, ty]
echelonPoint[1] = [tx - halfWidth, by]
echelonPoint[2] = [tx + halfWidth, by - echelonOffset]
echelonPoint[3] = [tx + halfWidth, ty]
}
if (enhance) echelonPoint.splice(2, 1)
}
return echelonPoint
},
drawCenterOriginTypeColumnChart () {} drawCenterOriginTypeColumnChart () {}
// draw () { // draw () {
// const { clearCanvas, initColors, initAxis, drawAxis, calcColumnConfig, drawColumnBG } = this // const { clearCanvas, initColors, initAxis, drawAxis, calcColumnConfig, drawColumnBG } = this