折线图的绘制
折线图的绘制
<!DOCTYPE html> <html lang='en'> <head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas { border: 1px solid #000; } </style> </head> <body> <canvas width='600' height='400' id='canvas'></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //1. 模拟数据 var datasArr = [5500, 7800, 6800, 8200, 7200, 9000]; //2. 绘制坐标系 context.moveTo(50, 50); context.lineTo(50, 350); context.lineTo(550, 350); context.strokeStyle = "green"; context.stroke(); //3. 算出所有点的坐标系 var pointArr = []; for (var i = 0; i<datasArr.length; i++) { //1. 算出每个点的x的值 var x = 50 + i * 500/(datasArr.length-1); //2. 算出每个点的y的值 var percent = (10000 - datasArr[i])/10000; var h = 300 * percent; var y = 50 + h; var point = {x: x, y: y}; //把每一个点的对象放到数组中 pointArr.push(point); } //4. 开始画折线 context.beginPath(); context.moveTo(pointArr[0].x, pointArr[0].y); //循环画线 for (var i = 1; i<pointArr.length; i++) { context.lineTo(pointArr[i].x, pointArr[i].y); } context.strokeStyle = "blue"; context.stroke(); </script> </body> </html>
扇形图的绘制
<!DOCTYPE html> <html lang='en'> <head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas { border: 1px solid #000; } </style> </head> <body> <canvas width='600' height='400' id='canvas'></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //1. 模拟数据 var datasArr = [ {type: "鼓励师", color: "yellow", count: 150}, {type: "程序员", color: "skyblue", count: 300}, {type: "设计美眉", color: "hotpink", count: 200}, {type: "测试", color: "red", count: 100}, {type: "产品", color: "yellowgreen", count: 80}, {type: "行政", color: "gold", count: 120}]; //2. 计算出员工总数 var sum = 0; datasArr.forEach(function(obj){ sum += obj.count; }); //3. 循环画饼 var startR = 0; for (var i = 0; i < datasArr.length; i++) { //算出每一块饼的弧度的大小 var r = datasArr[i].count / sum * 2 * Math.PI; //结束弧度 var endR = startR + r; //画扇形 context.beginPath(); context.arc(300, 200, 150, startR, endR); context.lineTo(300, 200); context.closePath(); context.fillStyle = datasArr[i].color; context.fill(); //画下一块饼时，起始弧度就是上一块饼的结束弧度 startR = endR; } </script> </body> </html>
柱状图的绘制
<!DOCTYPE html> <html lang='en'> <head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas { border: 1px solid #000; } </style> </head> <body> <canvas width='600' height='400' id='canvas'></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //1. 模拟数据 var datasArr = [5500, 7800, 6800, 8200, 7200, 9000]; var colorsArr = ["red", "skyblue", "gold", "orange", "tomato", "hotpink"]; //2. 画坐标系 context.moveTo(50, 50); context.lineTo(50, 350); context.lineTo(550, 350); context.strokeStyle = "green"; context.stroke(); //3. 算出坐标 for (var i = 0; i < datasArr.length; i++) { //柱子的宽度 var w = 40; //柱子和柱子之间的间隔 var gap = (500 - datasArr.length*w) / (datasArr.length + 1); //x坐标 var x = 50 + gap + i * (gap + w); //y坐标 var y = (10000 - datasArr[i])/10000 * 300 + 50; //柱子的高度 var h = datasArr[i]/10000 * 300; context.fillStyle = colorsArr[i]; context.fillRect(x, y, w, h); } //4. 画柱子 </script> </body> </html>
按需引入 ECharts 图表和组件
http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
如何打包项目，我知道用在vue的项目中用webpack打包，其他的就不知道了
下面的这边文章我也还没有清楚
https://blog.csdn.net/u012396955/article/details/60877359
