From 3d9a4c0f44a536399a3a0db599786592df9e37bb Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Wed, 20 Dec 2023 15:58:01 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=B0=83=E6=95=B4=E9=A5=BC?=
 =?UTF-8?q?=E5=9B=BE=EF=BC=8C=E6=B0=94=E6=B3=A1=E5=9B=BE=EF=BC=8C=E6=A1=91?=
 =?UTF-8?q?=E5=9F=BA=E5=9B=BE=E7=9A=84=E5=A4=A7=E5=B0=8F=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartDoughnut.vue      |  2 +-
 .../src/components/chart/chart/chartRank.vue          | 11 ++++++-----
 .../src/components/chart/chart/chartRose.vue          |  2 +-
 .../src/components/chart/chart/chartSankey.vue        |  9 +++++----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
index d66b562a5..2c8ded0d4 100644
--- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
@@ -209,7 +209,7 @@ export default {
         .attr('height', height)
         .attr('viewBox', [-width / 2, -height / 2, width, height])
 
-      const outerRadius = (Math.min(width, height) / 2) * 0.6 // outer radius of pie, in pixels
+      const outerRadius = (Math.min(width, height) / 2) * 0.8 // outer radius of pie, in pixels
       const innerRadius = outerRadius * (this.chartInfo.type === 'doughnut' ? 0.67 : 0) // inner radius of pie, in pixels (non-zero for donut)
       const padAngle = 0 // angular separation between wedges
       const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)
diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue
index 588cdacc0..b7bc9802f 100644
--- a/nezha-fronted/src/components/chart/chart/chartRank.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRank.vue
@@ -153,8 +153,9 @@ export default {
       // 计算svg高度
       const height = this.rankData.length * (barHeight + margin) + margin
       this.svg = d3.select(`#rank-svg-${this.chartId}`).attr('height', height)
-      const bodyX = 50
-      const bodyWidth = width - 3 * bodyX
+      const left = 20
+      const right = 80
+      const bodyWidth = width - left - right
 
       // 从大到小排序
       let rankData = lodash.cloneDeep(this.rankData)
@@ -176,7 +177,7 @@ export default {
       const minWidth = 2
       // 渲染柱形
       const bars = this.svg.append('g')
-        .attr('transform', `translate(${bodyX})`)
+        .attr('transform', `translate(${left})`)
         .selectAll()
         .data(rankData)
       bars.enter()
@@ -200,7 +201,7 @@ export default {
 
       // 文本标签
       this.svg.append('g')
-        .attr('transform', `translate(${bodyX})`)
+        .attr('transform', `translate(${left})`)
         .selectAll()
         .data(rankData)
         .enter()
@@ -230,7 +231,7 @@ export default {
 
       // 生成标签和矩形
       this.svg.append('g')
-        .attr('transform', `translate(${bodyX})`)
+        .attr('transform', `translate(${left})`)
         .selectAll('text')
         .data(rankData)
         .enter()
diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue
index 68dc83792..0115a93b7 100644
--- a/nezha-fronted/src/components/chart/chart/chartRose.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRose.vue
@@ -208,7 +208,7 @@ export default {
         .attr('height', height)
         .attr('viewBox', [-width / 2, -height / 2, width, height])
 
-      const outerRadius = (Math.min(width, height) / 2) * 0.6 // outer radius of pie, in pixels
+      const outerRadius = (Math.min(width, height) / 2) * 0.8 // outer radius of pie, in pixels
       const innerRadius = 20 // inner radius of pie, in pixels (non-zero for donut)
       const padAngle = 0 // angular separation between wedges
       const radius = 4
diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue
index f0a8f57c3..78c1e2f1c 100644
--- a/nezha-fronted/src/components/chart/chart/chartSankey.vue
+++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue
@@ -170,17 +170,18 @@ export default {
       }
       const width = svgDom.getBoundingClientRect().width
       const height = svgDom.getBoundingClientRect().height
-      const margin1 = 100
-      const margin2 = 50
+      const vertical = 20
+      const left = 20
+      const right = 80
       this.svg = d3.select(`#sankey-svg-${this.chartId}`)
-      const chart = this.svg.append('g').attr('transform', `translate(${margin2}, ${margin2})`)
+      const chart = this.svg.append('g').attr('transform', `translate(${left}, ${vertical})`)
 
       // 创建桑基图生成器
       const sankey = d3Sankey
         .sankey()
         .nodeWidth(20)
         .nodePadding(20)
-        .size([width - 2 * margin1, height - 2 * margin2])
+        .size([width - 2 * left - right, height - 2 * vertical])
         .nodeId((d) => d.node)
       const nodesData = lodash.cloneDeep(this.nodesData)
       const linksData = lodash.cloneDeep(this.linksData)