diff --git a/nezha-fronted/src/components/chart/chart/chartPieD3.vue b/nezha-fronted/src/components/chart/chart/chartPieD3.vue index e1facb4c6..c341e616e 100644 --- a/nezha-fronted/src/components/chart/chart/chartPieD3.vue +++ b/nezha-fronted/src/components/chart/chart/chartPieD3.vue @@ -65,6 +65,7 @@ export default { height: 0, innerRadius: 0, outerRadius: 0, + textSize: 0, tooltip: { x: 0, y: 0, @@ -178,6 +179,7 @@ export default { } // 半径 this.outerRadius = Math.min(this.width, this.height) / 3 + this.textSize = Math.ceil(this.outerRadius / 18) > 30 ? 30 : Math.ceil(this.outerRadius / 18) // 画布 const svg = d3 .select(`#chart-canvas-${this.chartId}`) @@ -219,7 +221,15 @@ export default { return d.data.color } }) - + const _this = this + arcs.on('mouseover', function (d) { + d3.select(this).select('path').transition().attr('transform', 'scale(1.1)') + d3.select(this).select('foreignObject').style('font-size', _this.textSize * 1.1) + }) + arcs.on('mouseout', function (d) { + d3.select(this).select('path').transition().attr('transform', 'scale(1)') + d3.select(this).select('foreignObject').style('font-size', _this.textSize) + }) /* 添加文字信息 */ arcs.append('foreignObject') .attr('width', (d, i) => { @@ -255,13 +265,7 @@ export default { 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('font-size', this.textSize) .style('line-height', '16px') .html((d) => { if ((d.endAngle - d.startAngle) < 0.5 && Math.ceil(this.outerRadius / 18 < 30)) {