优化饼图的坐标
parent
fa3dc9dc25
commit
632df7912f
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
script: node ./app.js
|
script: bun ./app.js
|
||||||
cwd: ./
|
cwd: ./
|
||||||
watch: true
|
watch: true
|
||||||
name: stats:23333
|
name: stats:23333
|
||||||
|
|
11
lib/svg.js
11
lib/svg.js
|
@ -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>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue