fix : pieD3 调整
This commit is contained in:
likexuan
@@ -158,7 +158,7 @@ export default {
|
||||
// 绘制饼图
|
||||
drawArcPie (data) {
|
||||
this.$nextTick(() => {
|
||||
let showAngle = 0
|
||||
// const showAngle = 0
|
||||
d3.select(`#chart-canvas-${this.chartId}`).selectAll('svg').remove()// 清空作图区域
|
||||
// 重新赋值宽高
|
||||
try {
|
||||
@@ -210,7 +210,7 @@ export default {
|
||||
return arc(d)
|
||||
})
|
||||
// 边界线
|
||||
// .attr('stroke', 'white')
|
||||
.attr('stroke', 'white')
|
||||
// 颜色
|
||||
.attr('fill', (d, i) => {
|
||||
if (d.data.mapping) {
|
||||
@@ -220,75 +220,126 @@ export default {
|
||||
}
|
||||
})
|
||||
|
||||
// 文字
|
||||
arcs
|
||||
.append('foreignObject')
|
||||
.attr('y', d => { // y轴居中减文字大小的一半
|
||||
const y = arc.centroid(d)[1]
|
||||
// 居中
|
||||
let height = 90
|
||||
if (Math.ceil(this.outerRadius / 8) < 30) {
|
||||
height = Math.ceil(this.outerRadius / 8) * 3
|
||||
}
|
||||
if ((d.endAngle - d.startAngle) > 5) {
|
||||
height += this.outerRadius
|
||||
}
|
||||
return y - height / 2
|
||||
})
|
||||
.attr('x', d => { // y轴居中减文字大小的一半
|
||||
const x = arc.centroid(d)[0]
|
||||
// 居中
|
||||
let width = 0
|
||||
if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
width = 0
|
||||
} else {
|
||||
if ((d.endAngle - d.startAngle) > 5) {
|
||||
width = this.outerRadius * 2
|
||||
}
|
||||
width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
|
||||
width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
|
||||
}
|
||||
return x - width / 2
|
||||
})
|
||||
.style('font-size', (i) => {
|
||||
if (Math.ceil(this.outerRadius / 8) > 30) {
|
||||
return 30
|
||||
} else {
|
||||
return Math.ceil(this.outerRadius / 8)
|
||||
}
|
||||
})
|
||||
/* 添加文字信息 */
|
||||
arcs.append('foreignObject')
|
||||
.attr('width', (d, i) => {
|
||||
if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
return 0
|
||||
} else if ((d.endAngle - d.startAngle) > 6) {
|
||||
return this.outerRadius
|
||||
} else if ((d.endAngle - d.startAngle) > 3 && (d.endAngle - d.startAngle) < 6) {
|
||||
return this.outerRadius - this.outerRadius / 5
|
||||
} else {
|
||||
if ((d.endAngle - d.startAngle) > 5) {
|
||||
return this.outerRadius * 2
|
||||
}
|
||||
let width = 0
|
||||
showAngle += d.endAngle - d.startAngle
|
||||
if (showAngle > 0.75) {
|
||||
width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
|
||||
width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
|
||||
showAngle = 0
|
||||
} else {
|
||||
showAngle += d.endAngle - d.startAngle
|
||||
width = 0
|
||||
}
|
||||
return width
|
||||
return Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius
|
||||
}
|
||||
})
|
||||
.attr('height', (d, i) => {
|
||||
if (Math.ceil(this.outerRadius / 8) > 30) {
|
||||
return 90
|
||||
if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
return 0
|
||||
} else if ((d.endAngle - d.startAngle) > 1) {
|
||||
return 1 / 3.14 * this.outerRadius
|
||||
} else {
|
||||
return Math.ceil(this.outerRadius / 8) * 3
|
||||
return Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius
|
||||
}
|
||||
})
|
||||
.attr('transform', (d, i) => {
|
||||
if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
return ''
|
||||
} else if ((d.endAngle - d.startAngle) > 6) {
|
||||
return 'translate(' + (-this.outerRadius / 2) + ',' + (-this.outerRadius / 5) + ')'
|
||||
} else if ((d.endAngle - d.startAngle) > 3 && (d.endAngle - d.startAngle) < 6) {
|
||||
return 'translate(' + (arc.centroid(d)[0] - (this.outerRadius - this.outerRadius / 5) / 3) + ',' + (arc.centroid(d)[1] - (1 / 3.14 * this.outerRadius / 2)) + ')'
|
||||
} else if ((d.endAngle - d.startAngle) > 1 && (d.endAngle - d.startAngle) < 3) {
|
||||
return 'translate(' + (arc.centroid(d)[0] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ',' + (arc.centroid(d)[1] - (1 / 3.14 * this.outerRadius / 2)) + ')'
|
||||
} else {
|
||||
return 'translate(' + (arc.centroid(d)[0] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ',' + (arc.centroid(d)[1] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ')'
|
||||
}
|
||||
})
|
||||
.style('font-size', (i) => {
|
||||
if (Math.ceil(this.outerRadius / 18) > 30) {
|
||||
return 30
|
||||
} else {
|
||||
return Math.ceil(this.outerRadius / 18)
|
||||
}
|
||||
})
|
||||
.style('line-height', '16px')
|
||||
.html((d) => {
|
||||
return this.drawText(d)
|
||||
if ((d.endAngle - d.startAngle) < 0.5 && Math.ceil(this.outerRadius / 18 < 30)) {
|
||||
return ` <div style="color:${(d.data.mapping && d.data.mapping.color && d.data.mapping.color.text) || '#000'};">...</div>`
|
||||
} else {
|
||||
return this.drawText(d)
|
||||
}
|
||||
})
|
||||
|
||||
// // 文字
|
||||
// arcs
|
||||
// .append('foreignObject')
|
||||
// .attr('y', d => { // y轴居中减文字大小的一半
|
||||
// const y = arc.centroid(d)[1]
|
||||
// // 居中
|
||||
// let height = 90
|
||||
// if (Math.ceil(this.outerRadius / 8) < 30) {
|
||||
// height = Math.ceil(this.outerRadius / 8) * 3
|
||||
// }
|
||||
// if ((d.endAngle - d.startAngle) > 5) {
|
||||
// height += this.outerRadius
|
||||
// }
|
||||
// return y - height / 2
|
||||
// })
|
||||
// .attr('x', d => { // y轴居中减文字大小的一半
|
||||
// const x = arc.centroid(d)[0]
|
||||
// // 居中
|
||||
// let width = 0
|
||||
// if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
// width = 0
|
||||
// } else {
|
||||
// if ((d.endAngle - d.startAngle) > 5) {
|
||||
// width = this.outerRadius * 2
|
||||
// }
|
||||
// width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
|
||||
// width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
|
||||
// }
|
||||
// return x - width / 2
|
||||
// })
|
||||
// .style('font-size', (i) => {
|
||||
// if (Math.ceil(this.outerRadius / 8) > 30) {
|
||||
// return 30
|
||||
// } else {
|
||||
// return Math.ceil(this.outerRadius / 8)
|
||||
// }
|
||||
// })
|
||||
// .attr('width', (d, i) => {
|
||||
// if ((d.endAngle - d.startAngle) < 0.25) {
|
||||
// return 0
|
||||
// } else {
|
||||
// if ((d.endAngle - d.startAngle) > 5) {
|
||||
// return this.outerRadius * 2
|
||||
// }
|
||||
// let width = 0
|
||||
// showAngle += d.endAngle - d.startAngle
|
||||
// if (showAngle > 0.75) {
|
||||
// width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
|
||||
// width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
|
||||
// showAngle = 0
|
||||
// } else {
|
||||
// showAngle += d.endAngle - d.startAngle
|
||||
// width = 0
|
||||
// }
|
||||
// return width
|
||||
// }
|
||||
// })
|
||||
// .attr('height', (d, i) => {
|
||||
// if (Math.ceil(this.outerRadius / 8) > 30) {
|
||||
// return 90
|
||||
// } else {
|
||||
// return Math.ceil(this.outerRadius / 8) * 3
|
||||
// }
|
||||
// })
|
||||
// .style('line-height', '16px')
|
||||
// .html((d) => {
|
||||
// return this.drawText(d)
|
||||
// })
|
||||
|
||||
arcs.on('mouseenter', this.bubbleEnter)
|
||||
arcs.on('mousemove', this.bubbleMove)
|
||||
arcs.on('mouseleave', this.bubbleLeave)
|
||||
@@ -326,10 +377,8 @@ export default {
|
||||
if (str && valueStr) {
|
||||
return `
|
||||
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
|
||||
<p style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};width: 100%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;line-height: 150%">
|
||||
<span>${str}</span>
|
||||
</p>
|
||||
<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;">
|
||||
<div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${str}</div>
|
||||
<p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;">
|
||||
<i class="${
|
||||
node.data.mapping && node.data.mapping.icon
|
||||
}" style="color: ${
|
||||
@@ -352,7 +401,7 @@ export default {
|
||||
node.data.mapping.color &&
|
||||
node.data.mapping.color.icon
|
||||
};font-size:1em;"></i>
|
||||
<span style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:inline-block">${str}</span>
|
||||
<div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${str}</div>
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
@@ -367,7 +416,7 @@ export default {
|
||||
node.data.mapping.color &&
|
||||
node.data.mapping.color.icon
|
||||
};font-size:1em;"></i>
|
||||
<span style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:inline-block">${valueStr}</span>
|
||||
<div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${valueStr}</div>
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
||||
Reference in New Issue
Block a user