diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 652bfdd96..944bc0bd8 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -595,13 +595,14 @@ export default {
         }
       },
       formatterFunc:function(params, ticket, callback){
+        let chartInfo=this.chartData;
         return `
                 <div>
                     <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
                         <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div>${params.value}</div>
+                            <div>${chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value,null,-1,2)}</div>
                         </div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>percent</div>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 7312c7333..be1d4ad56 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -419,12 +419,16 @@
                 if(chartItem.type ==='pie'){
                   pieSeries={
                     type: 'pie',
-                    radius: ['20%', '100%'],
+                    radius: '100%',
                     center: ['50%', '50%'],
-                    roseType: 'radius',
+                    top:"20%",
+                    bottom:"20%",
+                    // roseType: 'radius',
                     minAngle:10,
                     itemStyle: {
-                      borderRadius: 5
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
                     },
                     label: {
                       show: false
@@ -1543,15 +1547,16 @@
         }
       },
       pieFormatterFunc:function(params, ticket, callback){
+        let chartInfo=this.chart;
         return `
                 <div>
-                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
-                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;">${this.legend[params.dataIndex].alias}</div>
-                        <div style="display:flex;justify-content: space-between;">
+                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
+                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
+                        <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div>${params.value}</div>
+                            <div>${chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value,null,-1,2)}</div>
                         </div>
-                        <div style="display:flex;justify-content: space-between;">
+                        <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>percent</div>
                             <div>${params.percent}%</div>
                         </div>