From 9bfedbab72dbeb506c8551b912f6af8feef1acc3 Mon Sep 17 00:00:00 2001 From: jiaming <743192023@qq.com> Date: Tue, 11 Dec 2018 14:11:12 +0800 Subject: [PATCH] optimization --- src/components/concentricArcChart/index.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/concentricArcChart/index.vue b/src/components/concentricArcChart/index.vue index 66483a8..fffcd09 100644 --- a/src/components/concentricArcChart/index.vue +++ b/src/components/concentricArcChart/index.vue @@ -21,6 +21,7 @@ export default { defaultArcRadiusArea: [0.2, 0.8], defaultArcGap: 3, + defaultArcColor: ['#00c0ff', '#3de7c9'], arcRadius: [], arcRadian: [], @@ -114,17 +115,15 @@ export default { this.arcRadian = new Array(data.length).fill(0).map((t, i) => data[i].value * fullRadian - offsetRadian) }, calcArcColor () { - const { ctx, data: { color }, arcRadius: [ radius ], arcLineWidth, arcOriginPos: [x, y] } = this + const { ctx, arcLineWidth, defaultArcColor, canvas: { getLinearGradientColor } } = this - const linearGradientColor = ctx.createLinearGradient(x, y - radius - arcLineWidth, x, y + radius + arcLineWidth) + const { data: { color }, arcRadius: [ radius ], arcOriginPos: [x, y] } = this - const colorGap = 1 / (color.length - 1) + const colors = color || defaultArcColor - color.forEach((c, i) => linearGradientColor.addColorStop(colorGap * i, c)) - - this.arcColor = linearGradientColor - - this.ctx.strokeStyle = linearGradientColor + this.arcColor = getLinearGradientColor(ctx, + [x, y - radius - arcLineWidth], + [x, y + radius + arcLineWidth], colors) }, drawArc () { const { ctx, arcRadius, arcRadian, arcOriginPos, arcLineWidth, arcColor } = this