我们提前做了一些准备工作，比如绘制前做好坐标和边距，计算各种字体大小等。这里需要一点面向对象的知识，'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","value":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=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;};varcharts=newBcharts(targetId,cw,ch,data);};//https://developer.mozilla.org/en-US/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;//最大值不包括，最小值包括}突然感觉女生宿舍都整理好了，好整齐啊！好了，整理完代码，我们先进入一个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;//最大值不包括，最小值包括}
