用HTML5的canvas畫一個餅狀圖，開始吧！
第一步：設置畫布的寬高

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
//設置畫布的寬高
canvas.width = 831;
canvas.height = 706;

第二步：變換座標原點到畫布中心

function translate(context) {
  context.translate(canvas.width / 2, canvas.height / 2)
}

第三步：繪製扇形

// 準備數據
const data = [
  { value: 1048, name: '搜索引擎' },
  { value: 735, name: '直接訪問' },
  { value: 580, name: '郵件營銷' },
  { value: 484, name: '聯盟廣告' },
  { value: 300, name: '視頻廣告' }
]
// 計算比例
function dataProcess(data) {
  let total = 0
  for (const item of data) {
    total += item.value
  }
  for (const item of data) {
    item.percent = item.value / total
  }
}
dataProcess(data)
// 定義顏色
const colors = ['#e6a0c4', '#c6cdf7', '#d8a499', '#7294d4', '#fdc765']
// 半徑
const r = 300
// 開始繪製
function drawFan(context) {
  const startAngle = -0.5 * Math.PI
  context.save()
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
    context.beginPath()
    context.moveTo(0, 0)
    context.lineTo(0, -r)
    const endAngle = item.percent * 2 * Math.PI + startAngle
    context.arc(0, 0, r, startAngle, endAngle, false)
    context.closePath()
    context.fillStyle = colors[i]
    context.fill()
    // 旋轉座標系，計算更方便
    context.rotate(item.percent * 2 * Math.PI)
  }
  context.restore()
}

第四步：繪製文本

function drawText(context) {
  context.font = "14px sans-serif";
  context.fillStyle = "#fff"
  const a = 180
  let angle = 0
  for (const item of data) {
    const thita = (angle * 2 + item.percent) * Math.PI
    const x = a * Math.sin(thita)
    const y = -a * Math.cos(thita)
    const textWidth = context.measureText(item.name)
    context.fillText(item.name, x - textWidth.width / 2, y)
    angle += item.percent
  }
}