话不多说，直接看代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>饼状图</title> <style type="text/css"> .wrap { text-align: center; } input { padding: 5px 6px; display: inline-block; vertical-align: middle; } button { padding: 6px 7px; display: inline-block; vertical-align: middle; border: 0; } .canvas { background: #fff; margin: 20px auto 0 auto; } </style> </head> <body> <div class="wrap"> <input type="text" name="" id="text" placeholder="请输入数字，格式如：1,2,3" /> <button type="button" id="btn">饼状图</button> <br /> <canvas id="canvas" class="canvas" width="1000" height="500"></canvas> </div> </body> <script type="text/javascript"> ;(function(win, doc, undefined) { "use strict" function Pie(inputId, btnId, canvasId) { this.oText = document.getElementById(inputId); this.oCanvas = document.getElementById(canvasId); this.oBtn = document.getElementById(btnId); this.height = this.oCanvas.clientHeight; this.width = this.oCanvas.clientWidth; this.content = this.oCanvas.getContext("2d"); //自动初始化 this.init(); } Pie.prototype = { //强制指向 constructor: Pie, getcolor() { let colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f"; let colorArray = colorValue.split(","); let color = "#"; for (let i = 0; i < 6; i++) { color += colorArray[Math.floor(Math.random() * 16)]; } return color; }, splitstr() { //这是输入的字符串 let data = new Array(); let sum = 0; let str = this.oText.value.toString(); if (str === '') { alert("输入不能为空"); return false } let strs = str.split(",") for (let i = 0; i < strs.length; i++) { if (strs[i] === '' || strs[i] === '0') { alert("数据中不能存在空或者值为零"); return false } else if (isNaN(strs[i])) { alert("数据格式不正确"); return false } else { data[i] = parseFloat(strs[i]); } } for (let i = 0; i < data.length; i++) { sum = sum + data[i]; } for (let i = 0; i < data.length; i++) { data[i] = data[i] / sum; } return data; }, draw() { let data = this.splitstr(); if (data) { let startPoint = 1.5 * Math.PI; let halfWidth = parseInt(this.width) / 2; let halfHeight = parseInt(this.height) / 2; let partHeight = parseInt(this.height) / 4; for (let i = 0; i < data.length; i++) { this.content.lineWidth = 2; //填充颜色 this.content.fillStyle = this.getcolor(); this.content.strokeStyle = "white"; //开始 this.content.beginPath(); //移动到中心 this.content.moveTo(halfWidth, halfHeight); this.content.arc(halfWidth, halfHeight, partHeight, startPoint, startPoint - Math.PI * 2 * data[i], true); this.content.fill(); this.content.stroke(); this.content.closePath(); startPoint -= Math.PI * 2 * data[i]; } this.oCanvas.style.background = "#eee"; this.oText.value = ''; } else { this.oCanvas.style.background = "#fff"; this.content.clearRect(0, 0, 1000, 500) this.oText.value = ''; return false } }, init() { this.oBtn.addEventListener("click", () => { this.draw(); }) } } win.Pie = Pie; }(window, document)) </script> <script type="text/javascript"> window.onload = function() { new Pie("text", "btn", "canvas"); } </script> </html>
效果图：