在之前的文章中已经说过了，数据准备好了就可以画出来，非常简单。如果你担心你不回复，我举个最简单的例子。实践。这个很简单，不需要什么面向对象什么的，直接用最野蛮的方式先滚出来就行了。然后，你看我下面写的代码就很容易了。最终效果图下面的代码难点只有一个：1.如何计算横纵轴的坐标位置，其他就简单多了。有一个问题需要注意。我实际上写了复杂的职位。所有位置都是动态计算的，因为实际项目中你硬编码数值浏览器适配会有问题。代码不说了，就是耐心的敲上去，然后一点点研究。/**这里尽量写一些英文13的东西，不能自己百度，比如：作者：leolaudesc:nishishibushiwozuitengaideren,niweishabushuohua**/'usestrict';//模仿http://echarts.baidu.com/demo.html#bar-gradientwindow.onload=function(){vardata=[{"label":"January","value":getRandomInt(0,400)},{"label":"February","value":getRandomInt(1,400)},{"label":"March","value":getRandomInt(1,400)},{"label":"April","value":getRandomInt(0,400)},{"label":"May","value":getRandomInt(1,400)}];vartargetId='div1';变种连续波=600;变量ch=450；//为什么要用面向对象的方法，因为好像是在拖//functionBcharts(targetId,cw,ch,data){//基本信息varc=this;//为什么要这样做？我懒，c=chart=this;c.configureChart(targetId,cw,ch,data);c.初始化（）；}Bcharts.prototype.configureChart=function(targetId,cw,ch,data){varc=this;c.setCanvasParameters(targetId,cw,ch,data);c.setChartParameters(targetId,cw,ch,data);};Bcharts.prototype.setCanvasPa参数=函数（targetId、cw、ch、数据）{varc=this;c.id=targetId;c.cw=cw;c.ch=ch;c.data=数据；};Bcharts.prototype.setChartParameters=function(targetId,cw,ch,data){varc=this;c.axeRadio=10;//定义一个比例，为什么是10，图片一般都是随机设置的，不要太离谱c.horGap=(c.cw*c.axeRadio)/100;c.verGap=(c.ch*c.axeRadio)/100;//识别准备c.fontRadio=3;//原因同上c.horFontSize=(c.cw*c.fontRadio)/100;c.verFontSize=(c.ch*c.fontRadio)/100;};//初始化Bcharts.prototype.init=function(){varc=this;c.createCanvas();//这里只是对后台给你的数据进行排序，并不是图表中可以直接绘制的数据//比如最大值为234，其实我们需要花费240，不能不整洁c.handleData();//所以需要处理数据c.prepareData();//打开绘图c.draw();};Bcharts.prototype.createCanvas=function(){varc=this;varcanvas=document.createElement('canvas');canvas.id=c.id+'-'+Math.random();画布.width=顺时针；canvas.height=c.ch;document.getElementById(c.id).innerHTML='';document.getElementById(c.id).appendChild(canvas);c.canvas=画布；C。context=c.canvas.getContext('2d');};Bcharts.prototype.handleData=function(){//因为后台肯定会给你一堆标准的数组格式，但是不能直接用，得自己用666把varc=this;c.label=[];//把循环内容的名字放在这个数组里，比如[January,February]c.values=[];//把值[200,45...]c.data.forEach(function(item){c.label.push(item.label);c.values.push(item.value);});};Bcharts.prototype.prepareData=function(){varc=this;c.itemNum=c.data.length;c.MaxValue=Math.max.apply(null,c.values);c.MinValue=Math.min.apply(null,c.values);//计算坐标宽高c.horAxiWidth=c.cw-2*c.horGap;c.verAxiWidth=c.ch-2*c.verGap;//计算最大上边界，如最大数为234，则坐标取240而不是234//确定水平和垂直网格宽度c.verBound=Math.ceil(c.MaxValue/10)*10;c.verFeq=c.verBound/c.itemNum;c.horFeq=c.horAxiWidth/c.itemNum;};Bcharts.prototype.draw=function(){varc=this;c.drawX();//x轴c.drawY();//y轴c.drawYLabel();//y坐标字c.drawXLabel();//y坐标字c.HorGuideLines();c.verGuideLines();c.drawBars();};Bcharts.prototype.drawX=function(){varc=this;vargd=c.context;gd.beginPath();gd.moveTo(c.horGap,c.ch-c.verGap);gd.lineTo(c.cw-c.horGap,c.ch-c.verGap);gd.lineWidth=2;gd.stroke();};Bcharts.prototype.drawY=function(){varc=this;vargd=c.context;gd.beginPath();gd.moveTo(c.horGap,c.ch-c.verGap);gd.lineTo(c.horGap,c.verGap);gd.lineWidth=2;gd.stroke();};Bcharts.prototype.drawYLabel=function(){varc=this;vargd=c.context;for(vari=0;i<=c.itemNum;i++){varlabelYText=c.verBound-i*c.verFeq;varlabelPosX=c.horGap-c.horGap/c.axeRadio;varscaleReq=(c.verAxiWidth/c.verBound)*c.verFeq;varlabelPosY=c.verGap+i*scaleReq;gd.textAlign='右';gd.fillText(labelYText,labelPosX,labelPosY);}Bcharts.prototype.drawXLabel=function(){varc=this;vargd=c.context;for(vari=0;i
