摘要：我們提前做些準(zhǔn)備工作，比如畫圖前先把坐標(biāo)邊距做出來，還有各種字體大小算出來。最終代碼如下，模仿一月一月一月基礎(chǔ)信息為啥這么做我懶，定義一個比例為啥是，看圖大體是這個隨便定的，別忒離譜就好標(biāo)識準(zhǔn)備原因同上初始化偷個懶，基礎(chǔ)函數(shù)不寫了

我們提前做些準(zhǔn)備工作，比如畫圖前先把坐標(biāo)邊距做出來，還有各種字體大小算出來。

這里需要一點(diǎn)面向?qū)ο蟮闹R，

"use strict";
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
    var data = [
      {"label":"一月","value":getRandomInt(0,400)},
      {"label":"一月","value":getRandomInt(1,400)},
      {"label":"一月","value":getRandomInt(1,400)}
    ];

    var targetId = "bchart";
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //基礎(chǔ)信息
        var c = this;//為啥這么做？我懶，c = chart = this;
        c.targetId = targetId;
        c.cw = cw;
        c.ch = ch;
        c.data = data;
      //坐標(biāo)準(zhǔn)備,為啥要準(zhǔn)備？因?yàn)樽鴺?biāo)和字體都應(yīng)該是動態(tài)算出來的不能是寫死的否則實(shí)用性不夠
        c.axeRadio = 10;//定義一個比例,為啥是10，看圖大體是這個隨便定的，別忒離譜就好
        c.horGap = (cw*axeRadio)/100;
        c.verGap = (ch*axeRadio)/100;
      //標(biāo)識準(zhǔn)備
        c.fontRadio = 3;//原因同上
        c.horFontSize = (cw*fontRadio)/100;
        c.verFontSize = (ch*fontRadio)/100;
    }

    var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷個懶，基礎(chǔ)函數(shù)不寫了
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

說一點(diǎn)，你如果不懂就先按照我寫的弄出來，別自己發(fā)明創(chuàng)造，寫多了你也就知道為什么我這么寫了。當(dāng)然上面這個寫法挺惡心的，讓我想起了，沒有整理過的女生宿舍，

一坨坨代碼，所以我們我們整理下結(jié)構(gòu)。

"use strict";
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
    var data = [
      {"label":"一月","value":getRandomInt(0,400)},
      {"label":"一月","value":getRandomInt(1,400)},
      {"label":"一月","value":getRandomInt(1,400)}
    ];

    var targetId = "bchart";
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //基礎(chǔ)信息
        var c = this;//為啥這么做？我懶，c = chart = this;
        c.configureChart(targetId,cw,ch,data);

    }
    Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
      var c = this;
      c.setCanvasParameters(targetId,cw,ch,data);
      c.setChartParameters(targetId,cw,ch,data);
    };
    Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
      var c = this;
      c.targetId = targetId;
      c.cw = cw;
      c.ch = ch;
      c.data = data;
    };
    Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
      var c = this;
      c.axeRadio = 10;//定義一個比例,為啥是10，看圖大體是這個隨便定的，別忒離譜就好
      c.horGap = (c.cw*c.axeRadio)/100;
      c.verGap = (c.ch*c.axeRadio)/100;
    //標(biāo)識準(zhǔn)備
      c.fontRadio = 3;//原因同上
      c.horFontSize = (c.cw*c.fontRadio)/100;
      c.verFontSize = (c.ch*c.fontRadio)/100;

    };

    var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷個懶，基礎(chǔ)函數(shù)不寫了
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

忽然感覺就像整理過的女生宿舍有么有，太整齊了！

好，整理好了代碼，先懟一個canvas畫布進(jìn)去，這里注意我也用的面向?qū)ο蠓绞剑x了一個init函數(shù)，注意我把targetId改了一下，之前寫錯了。

最終代碼如下，

"use strict";
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
    var data = [
      {"label":"一月","value":getRandomInt(0,400)},
      {"label":"一月","value":getRandomInt(1,400)},
      {"label":"一月","value":getRandomInt(1,400)}
    ];

    var targetId = "div1";
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //基礎(chǔ)信息
        var c = this;//為啥這么做？我懶，c = chart = this;
        c.configureChart(targetId,cw,ch,data);
        c.init();

    }
    Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
      var c = this;
      c.setCanvasParameters(targetId,cw,ch,data);
      c.setChartParameters(targetId,cw,ch,data);
    };
    Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
      var c = this;
      c.id = targetId;
      c.cw = cw;
      c.ch = ch;
      c.data = data;
    };
    Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
      var c = this;
      c.axeRadio = 10;//定義一個比例,為啥是10，看圖大體是這個隨便定的，別忒離譜就好
      c.horGap = (c.cw*c.axeRadio)/100;
      c.verGap = (c.ch*c.axeRadio)/100;
    //標(biāo)識準(zhǔn)備
      c.fontRadio = 3;//原因同上
      c.horFontSize = (c.cw*c.fontRadio)/100;
      c.verFontSize = (c.ch*c.fontRadio)/100;

    };
    //初始化
    Bcharts.prototype.init = function(){
        var c = this;
        c.createCanvas();


    };
    Bcharts.prototype.createCanvas = function(){
        var c = this;
        var canvas = 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 = canvas;
        c.context = c.canvas.getContext("2d");
    };
    var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷個懶，基礎(chǔ)函數(shù)不寫了
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}