图表样式

web/app/(commonLayout)/datasets/Statistic.tsx

@@ -13,21 +13,21 @@ const Statistic = () => {
   const [typeData, setTypeData] = useState([])
   const [updateData, setUpdateData] = useState([])
   const [tagData, setTagData] = useState([
-    { name: '标签1', value: 10 },
-    { name: '标签2', value: 10 },
-    { name: '标签3', value: 10 },
-    { name: '标签4', value: 10 },
-    { name: '标签5', value: 10 },
-    { name: '标签6', value: 10 },
-    { name: '标签7', value: 10 },
-    { name: '标签8', value: 10 },
-    { name: '标签9', value: 10 },
+    { name: '标签1', value: 100 },
+    { name: '标签2', value: 90 },
+    { name: '标签3', value: 80 },
+    { name: '标签4', value: 70 },
+    { name: '标签5', value: 60 },
+    { name: '标签6', value: 50 },
+    { name: '标签7', value: 40 },
+    { name: '标签8', value: 30 },
+    { name: '标签9', value: 20 },
     { name: '标签10', value: 10 },
-    { name: '标签11', value: 10 },
-    { name: '标签12', value: 10 },
-    { name: '标签13', value: 10 },
-    { name: '标签14', value: 10 },
-    { name: '标签15', value: 10 },
+    { name: '标签11', value: 9 },
+    { name: '标签12', value: 8 },
+    { name: '标签13', value: 7 },
+    { name: '标签14', value: 6 },
+    { name: '标签15', value: 5 },
   ])
   const typeOptions = {
     grid: {
@@ -124,7 +124,31 @@ const Statistic = () => {
       {
         type: 'graph',
         layout: 'force',
-        data: tagData.map((v, i) => {
+        data: tagData.sort((a, b) => b.value - a.value).map((v, i) => {
+          if (i < Math.floor(tagData.length / 4)) {
+            v.symbolSize = 100
+            v.label = {
+              fontSize: 30,
+            }
+          }
+          else if (i < Math.floor(tagData.length / 2)) {
+            v.symbolSize = 90
+            v.label = {
+              fontSize: 24,
+            }
+          }
+          else if (i < Math.floor(tagData.length * 3 / 4)) {
+            v.symbolSize = 80
+            v.label = {
+              fontSize: 20,
+            }
+          }
+          else {
+            v.symbolSize = 70
+            v.label = {
+              fontSize: 16,
+            }
+          }
           v.itemStyle = {
             color: tagColors[i % tagColors.length],
           }
@@ -133,11 +157,13 @@ const Statistic = () => {
         links: [],
         roam: true,
         force: {
-          repulsion: 100,
+          repulsion: 110,
+          edgeLength: [10, 50],
         },
         symbolSize: 60,
         label: {
           show: true,
+          color: '#ffffff',
         },
         emphasis: {
           disabled: true,