From 19dcc5e52de738cf5877c110173e181ec21dfad4 Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Tue, 25 Dec 2018 17:29:42 +0800
Subject: [PATCH] some optmization
---
src/components/pointChart/index.vue | 94 +++++++++++-
src/plugins/methodsExtend.js | 2 +
src/views/demo/chart/pointChartDemo.vue | 182 ++++++++++++++++++++++--
3 files changed, 259 insertions(+), 19 deletions(-)
diff --git a/src/components/pointChart/index.vue b/src/components/pointChart/index.vue
index f8b43fc..78c2dea 100644
--- a/src/components/pointChart/index.vue
+++ b/src/components/pointChart/index.vue
@@ -5,6 +5,10 @@
+
+
+
+
@@ -26,22 +30,103 @@ export default {
// axis base config
boundaryGap: true,
horizon: false,
- mulValueAdd: true
+ mulValueAdd: false,
+
+ defaultPointRadius: 2,
+
+ valuePointPos: []
}
},
methods: {
async init () {
- const { initCanvas, initColors, initAxis } = this
+ const { initCanvas, initColors, data, draw } = this
await initCanvas()
initColors()
+ data && draw()
+ },
+ draw () {
+ const { clearCanvas } = this
+
+ clearCanvas()
+
+ const { initAxis, drawAxis, calcValuePointPos } = this
+
initAxis()
- const { drawAxis } = this
-
drawAxis()
+
+ calcValuePointPos()
+
+ const { drawPoints } = this
+
+ drawPoints()
+ },
+ calcValuePointPos () {
+ const { data: { data }, valueAxisMaxMin, getAxisPointsPos } = this
+
+ const { axisOriginPos, axisWH, labelAxisTagPos } = this
+
+ this.valuePointPos = data.map(({ data: td }, i) =>
+ getAxisPointsPos(
+ valueAxisMaxMin,
+ td,
+ axisOriginPos,
+ axisWH,
+ labelAxisTagPos,
+ false
+ ))
+ },
+ drawPoints () {
+ const { data: { data }, drawSeriesPoint, ctx } = this
+
+ ctx.setLineDash([10, 0])
+
+ data.forEach((series, i) => drawSeriesPoint(series, i))
+ },
+ drawSeriesPoint ({ color: cr, edgeColor, fillColor, radius, opacity }, i) {
+ const { drawColors, defaultPointRadius, valuePointPos, drawPoint } = this
+
+ const { color: { hexToRgb }, data: { radius: outerRadius } } = this
+
+ const drawColorsNum = drawColors.length
+
+ const baseColor = drawColors[i % drawColorsNum]
+
+ const trueEdgeColor = edgeColor || cr || baseColor
+
+ let trueFillColor = fillColor || cr || baseColor
+
+ opacity && (trueFillColor = hexToRgb(trueFillColor, opacity))
+
+ const trueRadius = radius || outerRadius || defaultPointRadius
+
+ valuePointPos[i].forEach(cp => {
+ if (!cp && cp !== 0) return
+
+ const isSeries = cp[0] instanceof Array
+
+ isSeries && cp.forEach(p => (p || p === 0) && drawPoint(p, trueEdgeColor, trueFillColor, trueRadius))
+
+ !isSeries && drawPoint(cp, trueEdgeColor, trueFillColor, trueRadius)
+ })
+ },
+ drawPoint (pos, edgeColor, fillColor, radius) {
+ const { ctx } = this
+
+ ctx.beginPath()
+
+ ctx.arc(...pos, radius, 0, Math.PI * 2)
+
+ ctx.closePath()
+
+ ctx.strokeStyle = edgeColor
+ ctx.fillStyle = fillColor
+
+ ctx.fill()
+ ctx.stroke()
}
},
mounted () {
@@ -56,6 +141,7 @@ export default {
.point-chart {
position: relative;
display: flex;
+ flex-direction: column;
.canvas-container {
flex: 1;
diff --git a/src/plugins/methodsExtend.js b/src/plugins/methodsExtend.js
index 21316c7..589c6e6 100644
--- a/src/plugins/methodsExtend.js
+++ b/src/plugins/methodsExtend.js
@@ -108,6 +108,8 @@ export function getAxisPointsPos ([max, min], values, axisOriginPos, axisWH, tag
}
export function getAxisPointPos ([max, min], value, axisOriginPos, axisWH, tagPos, horizon) {
+ if (!value && value !== 0) return false
+
const minus = max - min
const percent = (value - min) / minus
diff --git a/src/views/demo/chart/pointChartDemo.vue b/src/views/demo/chart/pointChartDemo.vue
index fc03c70..eb05fce 100644
--- a/src/views/demo/chart/pointChartDemo.vue
+++ b/src/views/demo/chart/pointChartDemo.vue
@@ -11,6 +11,72 @@
data: {
+ data: [
+ {
+ data: [
+ '', '',
+ [280, 265, 240, 200, 180],...
+ ]
+ },
+ {
+ data: [
+ '', '', '', '', '',
+ '', '', '', '', '',
+ [357, 222, 82, 355],...
+ ]
+ }
+ ],
+ x: {
+ data: [ '', '',
+ '西峡', '', '', '周口', '', '',
+ '南阳', '', '', '驻马店', '', '',
+ '郑州', '', '', '洛阳', '', ''
+ ],
+ grid: true,
+ gridLineType: 'dashed',
+ gridLineDash: [2, 2]
+ },
+ y: {
+ min: 0,
+ num: 6,
+ max: 500
+ }
+}
+
+
+
+
+
+
+
+
+
Point-Chart
+
+<point-chart :data="data" :colors="colors" />
+
+
+
+// 相同配置不再赘述
+data: {
+ data: [
+ {
+ data: ...,
+ // 非必须 设置该项 点内部自动透明
+ // 如果设置了fillColor 其应该为16进制色 否则无法进行透明计算
+ opacity: 0.5
+ },
+ {
+ data: ...,
+ // 非必须 设置局部点半径
+ radius: 5,
+ // 非必须 设置边线颜色
+ edgeColor: '#ff5ca9',
+ // 非必须 设置点内部填充色
+ fillColor: 'rgba(0, 186, 255, 0.5)'
+ }
+ ],
+ // 非必须 设置全局点半径
+ radius: 4
}