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

╰+攻爆jí腚メ 2022-11-18 08:30 271阅读 0赞

echarts绘制

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

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;

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