Book接上文，我们提前做一些准备工作，比如绘制前做好坐标和边距，计算各种字体大小等。这里需要一点面向对象的知识，'usestrict';//模仿http://echarts.baidu.com/demo.html#bar-gradientwindow.onload=function(){vardata=[{"label"：“一月”，“值”：getRandomInt（0,400）}，{“标签”：“一月”，“值”：getRandomInt（1,400）}，{“标签”：“一月”，“值”：getRandomInt（1,400)}];vartargetId='bchart';变种连续波=800;变量ch=600；functionBcharts(targetId,cw,ch,data){//基本信息varc=this;//为什么要这样做？我懒，c=chart=this;c.targetId=targetId;c.cw=cw;c.ch=ch;c.data=数据；//坐标准备，为什么要准备？因为坐标和字体要动态计算，不能硬编码，否则不够实用c.axeRadio=10;//定义一个比例，为什么是10？好的c.horGap=(cw*axeRadio)/100;c.verGap=(ch*axeRadio)/100;//标记就绪c.fontRadio=3;//原因同上c.horFontSize=(cw*fontRadio)/100;c.verFontSize=(ch*fontRadio)/100;}varcharts=newBcharts(targetId,cw,ch,data);};//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random//偷懒，基本函数就不写了functiongetRandomInt(min,max){min=Math.ceil(min);max=Math.floor(max);返回Math.floor(Math.random()*(max-min))+min;//最大不包括，最小包括}稍微告诉你一下，不懂就照着我先写的，不要自己发明创造，你也写多了我知道我为什么写这个当然，上面的写法比较恶心，让我想起了无组织的女生宿舍，'usestrict';//模仿http://echarts.baidu.com/demo.html#bar-gradientwindow.onload=function(){vardata=[{"label":"January","value":getRandomInt(0,400)},{"label":"January","value":getRandomInt(1,400)},{"label":"January","值":getRandomInt(1,400)}];vartargetId='bchart';变种连续波=800;变量ch=600；functionBcharts(targetId,cw,ch,data){//基本信息varc=this;//为什么要这样做？我懒，c=chart=this;c.configureChart(targetId,cw,ch,data);}Bcharts.prototype.configureChart=function(targetId,cw,ch,data){varc=this;c.setCanvasParameters(targetId,cw,ch,data);c.setChartParameters(targetId,cw,ch,data);};Bcharts.prototype.setCanvasParameters=function(targetId,cw,ch,data){varc=this;c.targetId=targetId;c.cw=cw;c.ch=ch;c.data=数据；};Bcharts.prototype.setChartParameters=function(targetId,cw,ch,data){varc=这个；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;};varcharts=newBcharts(targetId,cw,ch,data);};//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random//偷懒，基本函数就不写了functiongetRandomInt(min,max){min=Math.ceil(min);max=Math.floor(max);返回数学。floor(Math.random()*(max-min))+min;//最大值不包括，最小值包括}突然感觉女生宿舍都整理好了，好整齐啊！好了，整理完代码，我们先进入一个canvas。这里注意，我也是使用面向对象的方式，定义了一个init函数。注意我改了targetId，之前写错了。最终代码如下，'usestrict';//模仿http://echarts.baidu.com/demo.html#bar-gradientwindow.onload=function(){vardata=[{"label":"January","value":getRandomInt(0,400)},{"label":"January","value":getRandomInt(1,400)},{"label":"January","value":getRandomInt(1,400)}];vartargetId='div1';变种连续波=800;变量ch=600；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.setCanvasParameters=function(targetId,cw,ch,data){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();};Bcharts.prototype.createCanvas=function(){varc=this;varcanvas=document.createElement('canvas');canvas.id=c.id+'-'+Math.random();canvas.width=c.cw;canvas.height=c.ch;文档。getElementById(c.id).innerHTML='';document.getElementById(c.id).appendChild(canvas);c.canvas=画布；c.context=c.canvas.getContext('2d');};varcharts=newBcharts(targetId,cw,ch,data);};//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random//偷懒,基本函数不写函数getRandomInt(最小值，最大值）{最小值=Math.ceil（最小值）;max=Math.floor(max);返回Math.floor(Math.random()*(max-min))+min;//最大值不包含，最小值包含}这里注意，准备好画布后，我们要准备两个函数，一个是后台数据处理函数，一个是对图表处理后的数据重新计算的函数'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)}];vartargetId='div1';变种连续波=800;变量ch=600；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.setCanvasParameters=function(targetId,cw,ch,data){varc=thisc.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）；};Bcharts.prototype.createCanvas=function(){varc=this;varcanvas=document.createElement('canvas');canvas.id=c.id+'-'+Math.random();canvas.width=c.cw;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。变量c=这个；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.horFeq=c.verBound/c.itemNum;c.verFeq=c.horAxiWidth/c.itemNum;};varcharts=newBcharts(targetId,cw,ch,data);};//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random//偷懒,基本函数不写functiongetRandomInt(min,max){min=Math.ceil(min);max=Math.floor(max);返回Math.floor(Math.random()*(max-min))+min;//最大值不包括，最小值包括}其实画图表最难的不是画图，而是数据的排列。至此，最难的部分基本结束了，后面开始画的时候就会容易很多
