使用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 控制台复制代码执行一下