feat(ui): routes label 增加自动换行

ui/components/routes/routeChart.tsx

@@ -1,5 +1,6 @@
 import { modeColorMap } from '@/contants';
 import { state as globalState } from '@/models/global';
+import { superLongTextHandle } from '@/utils/g6LongText';
 import { IIRoute } from '@/utils/realizeRoutes';
 import G6 from '@antv/g6';
 import { FC, useEffect } from 'react';
@@ -107,8 +108,9 @@ export const RouteChart: FC<IProps> = ({ routes, onNodeClick }) => {
         style: {
           fill: backgroud,
           stroke: color,
+          fontSize: 12,
         },
-        label,
+        label: superLongTextHandle(label, 96, 12),
         labelCfg: {
           position: 'center',
           offset: 5,

ui/utils/g6LongText.ts

@@ -0,0 +1,31 @@
+import G6 from '@antv/g6';
+
+// G6换行符处理超长文本
+export const superLongTextHandle = (
+  str: string,
+  maxWidth: number,
+  fontSize: number,
+) => {
+  let currentWidth = 0;
+  let res = str;
+  // 区分汉字和字母
+  const pattern = new RegExp('[\u4E00-\u9FA5]+');
+  str.split('').forEach((letter, i) => {
+    if (currentWidth > maxWidth) return;
+    if (pattern.test(letter)) {
+      // 中文字符
+      currentWidth += fontSize;
+    } else {
+      // 根据字体大小获取单个字母的宽度
+      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+    }
+    if (currentWidth > maxWidth) {
+      res = `${str.slice(0, i)}\n${superLongTextHandle(
+        str.slice(i),
+        maxWidth,
+        fontSize,
+      )}`;
+    }
+  });
+  return res;
+};