canvas 畫布是HTML5中新增的標籤，可以通過js操作 canvas 繪圖 API在網頁中繪製圖像。

百度開發了一個開源的視覺化圖表庫ECharts，功能非常強大，可以實現折線圖、柱狀圖、散點圖、餅圖、K線圖、地圖等多種圖表。很多專案都有使用過ECharts開發過圖表功能。

本例項教程使用原生js教你開發一個仿ECharts的柱狀圖。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎。

按照ECharts的開發方法，圖表都是生成在一個HTML元素中。所以本例項中也先準備一個id名為canvasWrap的div元素，如下所示：

<div class="canvas_wrap" id="canvasWrap"></div>

然後在canvasWrap元素中建立canvas元素，再在canvas元素上繪製柱狀圖。開發之前，按照慣例，還是先分析柱狀圖的具體操作，再根據具體操作把實現功能的方法分成多個步驟，接下來一個步驟一個步驟去完成它。

1. 編寫柱狀圖資料
2. 獲取canvasWrap元素及寬高
3. 建立繪圖環境
　　3.1 建立canvas畫布
　　3.2 設定canvas畫布的寬度和高度
　　3.3 將canvas畫布放入到canvasWrap元素中
　　3.4 建立繪圖上下文環境
4. 設定座標區域
5. 繪製x軸
　　5.1 繪製軸線
　　5.2 繪製刻度線
　　5.3 繪製刻度名稱
6. 繪製y軸
　　6.1 繪製軸線
　　6.2 繪製刻度線
　　6.3 繪製刻度值
　　6.4 繪製x軸網格線
7. 繪製柱圖
　　7.1 計算柱圖寬度
　　7.2 計算柱圖高度
　　7.3 計算柱圖X起點
　　7.4 計算柱圖Y起點
　　7.5 繪製柱圖

具體程式碼如下：

//1 編寫柱狀圖資料
option = {
  //x軸資料
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  //柱圖資料
  series: [{
    //多寫幾組資料，用於檢視不同資料時的圖表效果
    // data: [0.01, 0.2, 0.05, 0.07, 0.04, 0.13, 0.9],
    // data: [1, 1, 5, 7, 4, 1, 9],
    // data: [1213, 30, 150, 80, 70, 910, 630],
    data: [120, 199, 150, 180, 70, 110, 130],
    //圖形樣式：柱圖
    type: 'bar'
  }]
};

//建立圖表函式，wrap：圖表父元素id；data：圖表資料
function fnCharts(wrap,data){
  //2.獲取canvasWrap元素
  var eWrap = document.getElementById(wrap);
  //2.獲取canvasWrap元素寬度和高度，用於設定canvas畫布大小
  var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 建立canvas畫布
  var eCanvas = document.createElement('canvas');
  //3.2 設定canvas畫布的寬度和高度
  eCanvas.width = nWrapW;
  eCanvas.height = nWrapH;
  //3.3 將canvas畫布放入到canvasWrap元素中
  eWrap.appendChild(eCanvas);
  //3.4 建立繪圖上下文環境(才能夠在Canvas畫布上繪製)
  var oCtx = eCanvas.getContext('2d');

  //4.設定座標區域左上角和右下角
  //起點設定為50.5，而不是整數，是為了讓線條變清晰
  var nZoneStartX = 50.5;
  var nZoneStartY = 50.5;
  var nZoneEndX = nWrapW - nZoneStartX;
  var nZoneEndY = nWrapH - nZoneStartY;

  //5.1 使用線條函式繪製x軸軸線
  fnCreatLine(nZoneStartX,nZoneEndY,nZoneEndX,nZoneEndY);
  //計算x軸長度
  var nLonX = nZoneEndX - nZoneStartX;
  //獲取x軸資料陣列長度
  var nDataLon = option.xAxis.data.length;
  //根據x軸資料陣列長度迴圈，在迴圈中繪製刻度線和刻度數值名稱
  for(let i=0;i<nDataLon;i++){
    //計算出x軸刻度線起點在x軸上的值
    let nScaleX = nZoneStartX+Math.floor(nLonX*(i/nDataLon));
    //刻度線起點都在x軸上
    let nScaleY = nZoneEndY;
    //5.2 繪製刻度線，長度為10
    fnCreatLine(nScaleX,nScaleY,nScaleX,nScaleY+10);
    //從資料中獲取刻度名稱字串
    let sName = option.xAxis.data[i];
    //計算出刻度名稱起點
    let nNameX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))+Math.floor(nLonX*(1/nDataLon))/2;
    let nNameY = nZoneEndY+15;
    //5.3 繪製刻度名稱
    fnCreatText(sName,nNameX,nNameY,'#aaa','center');
  }

  //6.1 使用線條函式繪製y軸軸線
  fnCreatLine(nZoneStartX,nZoneEndY,nZoneStartX,nZoneStartY);
  //繪製y軸刻度線前，需要有刻度最大值、最小值、刻度線段數和刻度線之間的間隔這些資料。
  //刻度最大值先從陣列中取最大值，等下再計算應該顯示的最大值
  var nMaxScal =  Math.max.apply(null,option.series[0].data);
  //刻度最小值在本例項中取0
  var nMinScal = 0;
  //刻度線段數在本例項中設定為4
  var nSplit = 4;
  //計算刻度間隔值
  var nStep = (nMaxScal-nMinScal)/nSplit;
  //這時候會發現刻度間隔值好像有點奇怪，因為一般圖表的刻度間隔值都是5的倍數，
  //比如:[0,0.5,1.0,1.5,2]或[0,50,100,150,200]。
  //所以還需要進一步計算，看nStep是否是5的倍數，如果不是，則遞增nIncrease，使其達到最接近的5的倍數。
  //計算第一步，根據nStep算出倍數值應該是0.5或5或50或...
  //在本例項中通過把nStep數值先轉換為字串再進行處理(也可以使用對數和指數去計算)。
  var sTemp = '' + nStep; //把nStep轉換為字串
  //宣告一個需要遞增的數,預設為1
  var nIncrease = 1;
  //宣告一個變數用於解決小數相乘產生的精度bug
  var nTempMultiple = 1;  

  //nIncrease取10的n次冪，通過以下判斷計算
  if(sTemp.indexOf('.')==-1){
    //如果nStep不包含小數點，nIncrease取10的sTemp.length-2次冪。
    //比如nStep為19的話，nIncrease = 10的0次冪，遞增數為1
    //nStep為9的話，nIncrease = 10的-1次冪，遞增數為0.1
    //nStep為199的話，nIncrease = 10的1次冪，遞增數為10
    nIncrease = Math.pow(10,sTemp.length-2);
  }else{
    //如果nStep包含小數點，nIncrease取10的sTemp整數位-2次冪。
    nIncrease = Math.pow(10,sTemp.indexOf('.')-2);
    //這個變數用於解決小數相乘可能產生的精度bug，比如nIncrease是小數的情況
    nTempMultiple = Math.pow(10,sTemp.indexOf('.')); 
  }
  //倍數取整，便於遞增，如165改成160，16.5改成16，1.65改成1.6，可通過下列公式實現
  nStep = Math.ceil(nStep/nIncrease)*(nIncrease*nTempMultiple)/nTempMultiple;
  //使用迴圈遞增nIncrease修正刻度值
  while(nStep%(nIncrease*5)!=0){
    nStep += nIncrease*1;
  }
  //通過間隔值乘以線段數，修改刻度最大值
  nMaxScal = nStep * nSplit;
  //計算y軸長度，這裡多減3是因為y軸頂端要留點距離
  var nLonY = nZoneEndY - nZoneStartY - 3;
  //繪製y軸刻度
  for(let i=0;i<=nSplit;i++){
    //刻度線起點都在y軸上
    let nScaleX = nZoneStartX;
    //計算出y軸刻度線起點在y軸上的值 
    let nScaleY = nZoneEndY-Math.floor(nLonY*(i/nSplit));
    //6.2 繪製刻度線
    fnCreatLine(nScaleX,nScaleY,nScaleX-10,nScaleY);
    //6.3 繪製刻度值
    fnCreatText(''+i*nStep,nScaleX-20,nScaleY,'#333');
    if(i!=0){
      //6.4 非0位置，繪製x軸網格線
      fnCreatLine(nScaleX,nScaleY,nScaleX+nLonX,nScaleY,'#ccc');
    }
  }

  //7.1 計算柱圖寬度
  let nBarWidth = Math.ceil(Math.floor(nLonX*(1/nDataLon))*.8);
  //遍歷x軸資料
  for(let i=0;i<nDataLon;i++){
    //7.2 計算柱圖高度
    let nBarHeight = nLonY/nMaxScal*option.series[0].data[i];
    //7.3 計算柱圖X起點
    let nBarStartX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))
                     +(Math.floor(nLonX*(1/nDataLon))-nBarWidth)/2;
    //7.4 計算柱圖Y起點
    let nBarStartY = nZoneEndY-nBarHeight;
    //7.5 繪製柱圖
    fnCreatRect(nBarStartX,nBarStartY,nBarWidth,nBarHeight);
  }

  //繪製線條函式
  function fnCreatLine(sX,sY,eX,eY,color='#000'){
    //開始繪製路徑
    oCtx.beginPath();
    //設定路徑顏色
    oCtx.strokeStyle = color;
    //設定路徑起點和終點，繪製線條
    oCtx.moveTo(sX,sY);
    oCtx.lineTo(eX,eY);
    //給路徑新增顏色
    oCtx.stroke();
  }

  //繪製文字
  function fnCreatText(text,x,y,color='#000',align='end',baseLine='middle'){
    //設定文字顏色
    oCtx.fillStyle = color;
    //設定水平對齊方式
    oCtx.textAlign = align;
    //設定垂直對齊方式
    oCtx.textBaseline = baseLine;
    //繪製文字
    oCtx.fillText(text,x,y);
  }

  //繪製矩形
  function fnCreatRect(x,y,width,height,color='#a00'){
    //設定顏色
    oCtx.fillStyle = color;
    oCtx.fillRect(x,y,width,height);
  }
}
//呼叫圖表函式，並傳入元素id和option資料
fnCharts('canvasWrap',option);

這篇例項教程可能需要點耐心去讀原始碼，如果碰到不明白的地方，可以在不明白的原始碼位置輸出值，也許能豁然開