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

some optmization

This commit is contained in:
jiaming 2018-12-25 17:29:42 +08:00
parent 10d470a91a
commit 19dcc5e52d
3 changed files with 259 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/pointChart/index.vue
View File

@ -5,6 +5,10 @@
<div class="canvas-container">
<canvas :ref="ref" />
</div>
<label-line :label="data.labelLine" :colors="drawColors" />
<for-slot><slot></slot></for-slot>
</div>
</template>
@ -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;

2
src/plugins/methodsExtend.js
View File

@ -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

182
src/views/demo/chart/pointChartDemo.vue
View File

@ -11,6 +11,72 @@
<highlight-code>
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
}
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<point-chart :data="pointChartData2" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Point-Chart</div>
<highlight-code>
&lt;point-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
data: [
{
data: ...,
// 非必须 设置该项 点内部自动透明
// 如果设置了fillColor 其应该为16进制色 否则无法进行透明计算
opacity: 0.5
},
{
data: ...,
// 非必须 设置局部点半径
radius: 5,
// 非必须 设置边线颜色
edgeColor: '#ff5ca9',
// 非必须 设置点内部填充色
fillColor: 'rgba(0, 186, 255, 0.5)'
}
],
// 非必须 设置全局点半径
radius: 4
}
</highlight-code>
</div>
@ -27,35 +93,121 @@ export default {
return {
pointChartData1: {
data: [
{
data: [123, 156, 290, 400, 169, 435]
},
{
data: [
[230, 123, 56],
[111, 22, 66],
[56, 25, 156],
[79, 52, 40],
[60, 56, 56],
[23, 45, 78]
'', '',
[280, 265, 240, 200, 180],
[320, 200, 190, 255, 260],
[330, 222, 190, 255, 270],
[325, 260, 220, 190, 255],
[300, 245, 215, 255, 270],
[280, 250, 190, 255, 270]
]
},
{
data: [15, 20, 27, 35, 27, 17],
againstAxis: true
data: [
'', '',
'', '',
'', '',
'', '',
'', '',
[357, 222, 82, 355],
[56, 25, 156],
[70, 251, 425, 300, 278, 315],
[79, 52, 40, 250, 160],
[70, 251, 425, 300, 278, 315],
[79, 52, 40, 180, 240],
[79, 52, 40],
[60, 56, 56],
'', ''
]
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
data: [ '', '',
'西峡', '', '',
'周口', '', '',
'南阳', '', '',
'驻马店', '', '',
'郑州', '', '',
'洛阳', '', ''
],
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2]
},
y: {
min: 0,
num: 6,
max: 500
},
ax: {
},
ay: {
labelLine: {
data: ['同期', '环期'],
type: 'rectangle'
}
},
pointChartData2: {
data: [
{
data: [
'', '',
[280, 265, 240, 200, 180],
[320, 200, 190, 255, 260],
[330, 222, 190, 255, 270],
[325, 260, 220, 190, 255],
[300, 245, 215, 255, 270],
[280, 250, 190, 255, 270]
],
opacity: 0.5
},
{
data: [
'', '',
'', '',
'', '',
'', '',
'', '',
[357, 222, 82, 355],
[56, 25, 156],
[70, 251, 425, 300, 278, 315],
[79, 52, 40, 250, 160],
[70, 251, 425, 300, 278, 315],
[79, 52, 40, 180, 240],
[79, 52, 40],
[60, 56, 56],
'', ''
],
radius: 5,
edgeColor: '#ff5ca9',
fillColor: 'rgba(0, 186, 255, 0.5)'
}
],
x: {
data: [ '', '',
'西峡', '', '',
'周口', '', '',
'南阳', '', '',
'驻马店', '', '',
'郑州', '', '',
'洛阳', '', ''
],
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2]
},
y: {
min: 0,
num: 6,
max: 500
},
labelLine: {
data: ['同期', '环期'],
type: 'rectangle'
},
radius: 4
},
colors: ''
}
}