优化饼图的坐标

master
yutent 2023-09-11 16:42:35 +08:00
parent fa3dc9dc25
commit 632df7912f
2 changed files with 9 additions and 4 deletions

View File

@ -1,5 +1,5 @@
script: node ./app.js script: bun ./app.js
cwd: ./ cwd: ./
watch: true watch: true
name: stats:23333 name: stats:23333

View File

@ -24,7 +24,7 @@ function text({ color, name, pc, idx }) {
` `
} }
function pie(langs = [], sum = 0, height, mobile) { function pie(langs = [], sum = 0, width, height, mobile) {
let per = 0.25 let per = 0.25
let deg = per * 2 * Math.PI // 从90度开始计算 let deg = per * 2 * Math.PI // 从90度开始计算
// 圆心坐标,半径 // 圆心坐标,半径
@ -38,6 +38,11 @@ function pie(langs = [], sum = 0, height, mobile) {
radius = ~~((height - 64) / 2) - (langs.length > 10 ? 24 : 0) // 最小半径 radius = ~~((height - 64) / 2) - (langs.length > 10 ? 24 : 0) // 最小半径
cx = langs.length > 12 ? 520 : langs.length <= 6 ? 384 : 464 cx = langs.length > 12 ? 520 : langs.length <= 6 ? 384 : 464
cy = radius + (langs.length > 10 ? 64 : 48) cy = radius + (langs.length > 10 ? 64 : 48)
let _cx = width - radius * Math.pow(1.05, langs.length)
if (_cx - cx > 10) {
cx = _cx - 10
}
} }
return langs return langs
@ -80,7 +85,7 @@ export function render(
} }
if (langs.length < 5) { if (langs.length < 5) {
width -= 304 width -= 256
} else if (langs.length > 4 && langs.length < 7) { } else if (langs.length > 4 && langs.length < 7) {
width -= 240 width -= 240
} else if (langs.length > 6 && langs.length <= 12) { } else if (langs.length > 6 && langs.length <= 12) {
@ -143,7 +148,7 @@ export function render(
.join('')} .join('')}
</g> </g>
<g class="lang-pie">${pie(langs, sum, height, mobile)}</g> <g class="lang-pie">${pie(langs, sum, width, height, mobile)}</g>
</svg> </svg>
` `
} }