扣丁學堂HTML5培訓簡述HTML5 canvas簡單封裝一個echarts實現不了的餅圖

echars應該有很多小夥伴用了好久了，若是出現如上圖所示樣式的餅圖，用echarts很難實現，官方給的文檔沒有這種模式的餅圖。試過用d3和canvas分別畫餅圖，本着輕量化的原則，因此採用canvas封裝。本篇文章扣丁學堂HTML5培訓小編給讀者們分享一下HTML5 canvas簡單封裝一個echarts實現不了的餅圖，但願對小夥伴們有幫助。

官方餅圖兩種模式：(1)半徑模式(2)面積模式

實現過程

（1）封裝的函數以下：

function drawCircle(canvasId, option) {

const color_arr = option.color

let data_arr = option.data

const pi2 = Math.PI * 2;

let canvas = document.getElementById(canvasId);

let c = canvas.getContext("2d");

let startAgl = 0;

let agl;

let sum = 0;

const cW = canvas.width;

const cH = canvas.height;

for (let item of data_arr) {

  sum += item.value * 1.0

}

data_arr = data_arr.map((v, i) => {

  return {

    name: v.name,

    value: (v.value) * 1.0 / sum

  }

})

for (let i = 0; i < data_arr.length; i++) {

  //繪製餅圖

  let min = (cW > cH ? cH : cW); //獲取canvas寬高的最小值

  agl = data_arr[i].value * pi2 + startAgl; //終點

  c.strokeStyle = color_arr[i];

  c.lineWidth = data_arr[i].value * min * 0.3; // 線的粗細

  c.beginPath();

  c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); //畫圓

  c.stroke();

  c.closePath();

  startAgl = agl;

  //繪製圖例

  c.fillStyle = color_arr[i];

  c.fillRect(cW * 0.8, 50 + 18 * i, 16, 16);

  c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * i);

}

}

（2）調用方式：

let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588'];

let option = {

color: color,

data: [

  { name: '20', value: '20' },

  { name: '30', value: '30' },

  { name: '40', value: '40' },

  { name: '50', value: '50' },

  { name: '60', value: '60' },

]

}

drawCircle('myCanvas', option)

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。