爱站程序员基地代码：
主要用来理解svg，不是重点
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title><style type=\"text/css\">.axis{stroke: #999;stroke-width: 2px;}</style></head><body><!-- 1获取数据2创建svg3创建坐标4绘制坐标5依据数据绘制矩形 --><svg width=\"1000\" height=\"700\"><g id=\"zuobiao\"><!-- x轴 --><line class=\"axis\" x1=\"50\" y1=\"600\" x2=\"950\" y2=\"600\"></line><path d=\"M 925,590 L 950,600 L 925,610 Z\"></path><text x=\"900\" y=\"630\">时间</text><!-- y轴 --><line class=\"axis\" x1=\"100\" y1=\"650\" x2=\"100\" y2=\"50\"></line><path d=\"M 90,75 L 100,50 L 110,75 Z\"></path><text x=\"50\" y=\"60\">订单</text></g><g id=\"xkedu\"><!-- <line class=\"axis\" x1=\"170\" y1=\"600\" x2=\"170\" y2=\"580\"></line> --></g><g id=\"ykedu\"></g><g id=\"barList\"></g></svg><script type=\"text/javascript\">var data=[{data:\"星期一\",order:\"1000\"},{data:\"星期二\",order:\"500\"},{data:\"星期三\",order:\"600\"},{data:\"星期四\",order:\"1100\"},{data:\"星期五\",order:\"1500\"},{data:\"星期六\",order:\"1200\"},{data:\"星期天\",order:\"1300\"}]console.log(data);var xkedu=document.querySelector(\"#xkedu\")var ykedu=document.querySelector(\"#ykedu\")var barListDom=document.querySelector(\"#barList\")var length=700/data.length;var ylength=450/15;for(var i=1;i<=data.length;i++){renderkedu(i)}for(var i=1;i<=15;i++){ykedu.innerHTML=ykedu.innerHTML+`<line class=\"axis\" x1=\"100\" y1=\"${600-ylength*i}\" x2=\"120\" y2=\"${600-ylength*i}\"></line>`+`<text x=\"50\" y=\"${600-ylength*i}\">${100*i}</text>`}function renderkedu(i){var lineDom=document.createElement(\"line\");lineDom.className=\"axis\";lineDom.setAttribute(\"x1\",100+length*i)lineDom.setAttribute(\"y1\",\"600\")lineDom.setAttribute(\"x2\",100+length*i)lineDom.setAttribute(\"y2\",\"580\")xkedu.innerHTML=xkedu.innerHTML+lineDom.outerHTML+`<text x=\"${75+length*i}\" y=\"620\">${data[i-1].data}</text>`;barListDom.innerHTML= barListDom.innerHTML+`<rect x=\"${75+length*i}\" y=\"${600-(ylength*(data[i-1].order/100))}\" width=\"50\" height=\"${ylength*(data[i-1].order/100)}\"></rect>`console.log()}</script></body></html>
结果：
