-
Notifications
You must be signed in to change notification settings - Fork 272
/
index.html
131 lines (131 loc) · 5.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas大面积数据展示</title>
<style>
#canvas {
background-color: #fff;
border: 1px solid #ccc;
margin: 0 auto;
display: block
}
</style>
</head>
<body>
<canvas height="400" width="600" id="canvas"></canvas>
<script>
var data = [Math.random() * 300];
for (var i = 1; i < 50; i++) { //按照echarts
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
canvas:{
id: 'canvas'
},
series: {
name: '模拟数据',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: 'rgb(255, 158, 68)'
},
data: data
}
};
function LinearGradient(option) {
this.canvas = document.getElementById(option.canvas.id)
this.ctx = this.canvas.getContext('2d')
this.width = this.canvas.width
this.height = this.canvas.height
this.tooltip = option.tooltip
this.title = option.text
this.xAxis = option.data
this.series = option.series
}
LinearGradient.prototype.draw = function() {
// dataMax = yMax; dataMin = yMin
var dataMax = 0,
dataMin = this.series.data[0],
diffY = 0,
diffX = 0,
self = this
this.series.data.forEach(function (obj, i) {
if (dataMax < obj) dataMax = obj
if (dataMin > obj) dataMin = obj
})
diffY = this.height / (dataMax - dataMin)
diffX = this.width / this.series.data.length
this.ctx.beginPath()
this.ctx.lineTo(0, this.height)
this.series.data.forEach(function(item, index) { //找到前一个点到下一个点中间的控制点
var scale = 0.1
var last1X = diffX * (index - 1),
last1Y = Math.floor(self.height - diffY * (self.series.data[index - 1] - dataMin)),
last2X = diffX * (index - 2),
last2Y = Math.floor(self.height - diffY * (self.series.data[index - 2] - dataMin)),
nowX = diffX * (index),
nowY = Math.floor(self.height - diffY * (self.series.data[index] - dataMin)),
nextX = diffX * (index + 1),
nextY = Math.floor(self.height - diffY * (self.series.data[index + 1] - dataMin)),
cAx = last1X + (nowX - last2X) * scale,
cAy = last1Y + (nowY - last2Y) * scale,
cBx = nowX - (nextX - last1X) * scale,
cBy = nowY - (nextY - last1Y) * scale
if(index === 0) {
self.ctx.lineTo(nowX, nowY)
return
} else if(index ===1) {
cAx = last1X + (nowX - 0) * scale
cAy = last1Y + (nowY - self.height) * scale
} else if(index === self.series.data.length - 1) {
cBx = nowX - (nowX - last1X) * scale
cBy = nowY - (nowY - last1Y) * scale
}
self.ctx.bezierCurveTo(cAx, cAy, cBx, cBy, nowX, nowY);
})
var lingrad = this.ctx.createLinearGradient(0,0,0,this.width);
lingrad.addColorStop(0, this.series.areaStyle.color);
lingrad.addColorStop(1, this.series.itemStyle.color);
this.ctx.lineTo(this.width, this.height)
this.ctx.lineTo(0, this.height)
this.ctx.strokeStyle = this.series.itemStyle.color
this.ctx.stroke()
}
LinearGradient.prototype.draw1 = function() { //折线参考线
// dataMax = yMax; dataMin = yMin
var dataMax = 0,
dataMin = this.series.data[0],
diffY = 0,
diffX = 0,
self = this
this.series.data.forEach(function (obj, i) {
if (dataMax < obj) dataMax = obj
if (dataMin > obj) dataMin = obj
})
diffY = this.height / (dataMax - dataMin)
diffX = this.width / this.series.data.length
this.ctx.beginPath()
this.ctx.lineTo(0, this.height)
this.series.data.forEach(function(item, index) {
var x = diffX * index,
y = Math.floor(self.height - diffY * (item - dataMin))
self.ctx.lineTo(x, y)
})
var lingrad = this.ctx.createLinearGradient(0,0,0,this.width);
lingrad.addColorStop(0, this.series.areaStyle.color);
lingrad.addColorStop(1, this.series.itemStyle.color);
this.ctx.lineTo(this.width, this.height)
this.ctx.lineTo(0, this.height)
this.ctx.strokeStyle = '#000'
this.ctx.stroke()
}
var newMap = new LinearGradient(option)
newMap.draw()
// newMap.draw1()
</script>
</body>
</html>