使用svg path来绘制饼状图

function svg(radius=100,deg=100,startAngle=0,color='#00adb5') {
  const cx = radius;
  const cy = radius;
  const endAngle = startAngle + deg;
  const start = polarToCartesian(cx, cy, radius, endAngle);
  const end = polarToCartesian(cx, cy, radius, startAngle);
  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  const d=["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, "L", cx, cy, "Z"].join(" ");
  return `<svg width='${radius*2}' height='${radius*2}'><path d='${d}' fill='${color}'></path></svg>`;
}

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
  return {
    x: (centerX + radius * Math.cos(angleInRadians)).toFixed(2),
    y: (centerY + radius * Math.sin(angleInRadians)).toFixed(2),
  };
}
document.body.innerHTML=svg(50,290);//执行

打开chrome 控制台复制代码执行一下