feat: improve labels & tooltip display in pie chart

Author: ulleo

frontend/src/views/chat/component/charts/Pie.ts

@@ -36,12 +36,25 @@ export class Pie extends BaseG2Chart {
       labels: [
         {
           position: 'outside',
-          text: (data: any) =>
-            `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
+          text: (data: any) => {
+            console.log(
+              `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
+            )
+            return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
+          },
+          transform: [{ type: 'exceedAdjust' }, { type: 'overlapHide' }],
         },
       ],
-      tooltip: (data) => {
-        return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
+      tooltip: {
+        title: (data: any) => data[series[0].value],
+        items: [
+          (data: any) => {
+            return {
+              name: y[0].name,
+              value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
+            }
+          },
+        ],
       },
     }
 

g2-ssr/charts/pie.js

@@ -29,10 +29,22 @@ function getPieOptions(baseOptions, axis, data) {
                 position: 'outside',
                 text: (data) =>
                     `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
+                transform: [
+                    { type: 'exceedAdjust' },
+                    { type: 'overlapHide' },
+                ],
             },
         ],
-        tooltip: (data) => {
-            return {name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`}
+        tooltip: {
+            title: (data) => data[series[0].value],
+            items: [
+                (data) => {
+                    return {
+                        name: y[0].name,
+                        value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
+                    }
+                },
+            ],
         },
     }