php 折线图canvas,canvas绘制折线图(仿echarts)

1

2

3

4

5

echarts绘制

6

7

8

9

10 varscale= 2;11 varcanvas遇新是直朋能到=document.getElementById('canvas');12 varconfig={13 width: canvas.width,14 height: canvas.height,15 Left:70,16 Top:90,17 Right:30,18 Bottom:60,19 color: ["#5266d7"],20 yLine:{21 splitcount:8,22 data:[0,100,200,300,400,500,600,700,800]23 },24 xLine:{25 splitcount:9,26 data:[1,2,3,4,5,6,7,8,9,10]27 },28 series:{29 data:[0,532,555,700,500,800,300,270,358,160,453,577,639,758,233,299,120,188,158,176,333,257,120,199,573,430,111,300,700,80,50,30,40,10,22,37,77,100,240,183,143,377,133,445,345,321,111,12,3,34,456,235,214,43,21]30 }31 }32 varctx=canvas.getContext('2d');33 //绘制title

34 drawText('单位: 次', config.Left, config.Top- 30,'normal 22px Arial','#a3a2a7');35 //绘制网格线

36 darwBackLine('#cccccc', config.yLine.splitcount,1, config.yLine.data);37 //绘制x轴

38 drawXLine('#939099', config.xLine.splitcount,2, config.xLine.data);39 //绘制线条

40 drawLines(config.color[0],2,config.series.data);41 //绘制图例

42 drawItem('test', config.color[0],2);43

44

45 functiondarwBackLine(color, splitcount, linewidth, data) {46 varlen=Math.floor((config.height-config.Top-config.Bottom)/splitcount);

47 varstart遇新是直朋能到=config.Top;48 for(vari= 0; i

51 drawText(data[splitcount-i],10, point,'normal 22px Arial','#605d68');52 }53 drawText(data[splitcount-i],10, point+len,'normal 22px Arial','#605d68');54 }55

56 functiondrawXLine(color, splitcount, linewidth, data) {57 varleft=config.Left;58 vartop=config.height-config.Bottom;59 varright遇新是直朋能到=(config.width/2 - config.Right)*scale;

60 drawLine(config.Left, top, right, top, color, linewidth);61 varlen=(right-left)/splitcount;

62

63 for(vari= 0; i

71 functiondrawLines(color, linewidth, data) {72 varcount=data.length;73 varleft=config.Left;74 vartop=config.height-config.Bottom;75 varright遇新是直朋能到=(config.width/2 - config.Right)*scale;

76 varlen=(right-left)/(count - 1);

77 vari= 0;78

79 varinterval=setInterval(function() {80 if(i>=count- 1){81 clearInterval(interval);82 return;83 }84 drawLine(left+len*i, top-(data[i]/800)*(top - config.Top), left+len*(i+1), top-(data[i+1]/800)*(top-config.Top), color, linewidth,'bevel');85 i++;86 },30);87 }88

89 functiondrawItem(text, color, linewidth) {90 varright遇新是直朋能到=(config.width/2 - config.Right)*scale;

91 varleft=right-(text.length*10);92 drawText(text, left, config.Top- 10,'normal 22px Arial','#605d68');93 drawLine(left-20, config.Top- 15, left-80, config.Top- 15, color, linewidth);94 }95

96 functiondrawLine(startX, startY, endX, endY, color, width, lineJoin) {97 ctx.beginPath();98 ctx.moveTo(startX, startY);99 ctx.lineTo(endX, endY);100 if(color){101 ctx.strokeStyle=color102 }103

104 if(width){105 ctx.lineWidth=width*scale;106 }107

108 if(lineJoin){109 ctx.lineJoin=lineJoin;110 }111

112 ctx.closePath();113 ctx.stroke();114 }115

116 functiondrawText(text, x, y, font, color) {117 ctx.font=font;118 ctx.fillStyle=color;119 ctx.fillText(text, x, y);120 }121

122

123