gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 饼图D3 样式调整

Browse Source
This commit is contained in:
likexuan
2022-07-29 14:42:15 +08:00
parent 08fe7b7120
commit 2646b0cd7e
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
nezha-fronted/src/components/chart/chart/chartPieD3.vue
View File

@@ -198,7 +198,6 @@ export default {
'transform', 'transform',
'translate(' + this.width / 2 + ',' + (this.height / 2) + ')' 'translate(' + this.width / 2 + ',' + (this.height / 2) + ')'
) )
.style('position', 'relative')
arcs arcs
.append('path') .append('path')
.attr('class', 'path') .attr('class', 'path')
@@ -221,9 +220,16 @@ export default {
.append('foreignObject') .append('foreignObject')
.attr('y', d => { // y轴居中减文字大小的一半 .attr('y', d => { // y轴居中减文字大小的一半
const y = arc.centroid(d)[1] const y = arc.centroid(d)[1]
return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16) if (d.endAngle > 4 && d.endAngle < 5 && d.startAngle > 4 && d.startAngle < 5) {
return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16) * 3
} else {
return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16)
}
}) })
.attr('transform', (d, i) => { .attr('transform', (d, i) => {
if ((d.endAngle - d.startAngle) > 6.28) {
return 'translate(' + (-this.outerRadius / 2) + ',' + (-this.outerRadius / 3) + ')'
}
return 'translate(' + (arc.centroid(d)[0] - Math.abs(arc.centroid(d)[0]) - Math.ceil(this.outerRadius / 16)) + ',' + (0) + ')' // x轴为最左侧 //x轴居中减文字大小的一半 return 'translate(' + (arc.centroid(d)[0] - Math.abs(arc.centroid(d)[0]) - Math.ceil(this.outerRadius / 16)) + ',' + (0) + ')' // x轴为最左侧 //x轴居中减文字大小的一半
}) })
.style('font-size', (i) => { .style('font-size', (i) => {
@@ -237,6 +243,9 @@ export default {
if ((d.endAngle - d.startAngle) < 0.25) { if ((d.endAngle - d.startAngle) < 0.25) {
return 0 return 0
} else { } else {
if ((d.endAngle - d.startAngle) > 5) {
return this.outerRadius
}
return Math.abs(arc.centroid(d)[0]) * 2 return Math.abs(arc.centroid(d)[0]) * 2
} }
}) })
@@ -248,20 +257,20 @@ export default {
} }
// return Math.abs(arc.centroid(d)[1]) - Math.ceil(this.outerRadius / 10) // return Math.abs(arc.centroid(d)[1]) - Math.ceil(this.outerRadius / 10)
}) })
.style('padding-left', () => { // .style('padding-left', () => {
if (this.isFullscreen) { // if (this.isFullscreen) {
return 20 // return 20
} else { // } else {
return 5 // return 5
} // }
}) // })
.style('padding-right', (d, i) => { .style('padding-right', (d, i) => {
const path = document.getElementsByClassName('path')[i] const path = document.getElementsByClassName('path')[i]
const w = path.getBoundingClientRect().width const w = path.getBoundingClientRect().width
if (((d.endAngle - d.startAngle) < 0.25) || (Math.abs(arc.centroid(d)[0]) * 2 < w / 2)) { if ((d.endAngle > 5 && d.endAngle < 6 && d.startAngle > 4 && d.startAngle < 6) && ((d.endAngle - d.startAngle) > 0.25)) {
return 0
} else {
return (Math.abs(arc.centroid(d)[0]) * 2 - w / 3) / 2 return (Math.abs(arc.centroid(d)[0]) * 2 - w / 3) / 2
} else {
return 0
} }
}) })
.style('line-height', '16px') .style('line-height', '16px')
@@ -324,7 +333,7 @@ export default {
} else if (str) { } else if (str) {
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer">
<p style="width: 80%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%"> <p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
<i class="${ <i class="${
node.data.mapping && node.data.mapping.icon node.data.mapping && node.data.mapping.icon
}" style="color: ${ }" style="color: ${
@@ -339,7 +348,7 @@ export default {
} else if (valueStr) { } else if (valueStr) {
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%"> <p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
<i class="${ <i class="${
node.data.mapping && node.data.mapping.icon node.data.mapping && node.data.mapping.icon
}" style="color: ${ }" style="color: ${