历史回顾 图表节点 颜色优化（添加渐变）

public/chart.html

@@ -21,18 +21,20 @@
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
   <script type="text/javascript">
-    function randomColor() {
-      return '#' + Math.floor(
-        (
-          Math.random() * (1 - 0.3) + 0.3
-        ) * 0xffffff
-      ).toString(16)
+    function getRandomColorPair() {
+      const colorR = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorG = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorB = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorDiff = Math.floor(Math.random() * ((255 - 220) - 20) + 20)
+      return [
+        `rgb(${colorR}, ${colorG}, ${colorB})`,
+        `rgb(${colorR + colorDiff}, ${colorG + colorDiff}, ${colorB + colorDiff})`
+      ]
     }
  
     const rawInfo = [
       {
         name: '开埠通商',
-        color: randomColor(),
         corpList: [
           // {
           //   companyName: "正泰橡皮物品制造厂",
@@ -55,48 +57,68 @@
       },
       {
         name: '曲折发展',
-        color: randomColor(),
         corpList: [],
         id: 'time-1'
       },
       {
         name: '步履维艰',
-        color: randomColor(),
         corpList: [],
         id: 'time-2'
       },
       {
         name: '筚路蓝缕',
-        color: randomColor(),
         corpList: [],
         id: 'time-3'
       },
       {
         name: '改革开放',
-        color: randomColor(),
         corpList: [],
         id: 'time-4'
       },
       {
         name: '战略负重',
-        color: randomColor(),
         corpList: [],
         id: 'time-5'
       },
       {
         name: '创新驱动',
-        color: randomColor(),
         corpList: [],
         id: 'time-6'
       },
       {
         name: '追梦未来',
-        color: randomColor(),
         corpList: [],
         id: 'time-7'
       },
     ]
    
+    for (const iterator of rawInfo) {
+      const [color1, color2] = getRandomColorPair()
+      console.log(color1);
+      console.log(color2);
+      iterator.color = {
+        type: "radial",
+        x: 0.5,
+        y: 0.5,
+        r: 0.5,
+        colorStops: [
+          {
+            offset: 0,
+            color: color1
+          },
+          {
+            offset: 0.4,
+            color: color1
+          },
+          {
+            offset: 1,
+            color: color2
+          },
+        ],
+        global: false
+      }
+    }
+
     const nodesForRender = [
       {
         name: "历史回顾",
@@ -176,7 +198,7 @@
           category: null,
           lineStyle: {
             normal: {
-              color: timeInfoItem.color,
+              color: timeInfoItem.color.colorStops[2].color,
             },
           },
           source: '历史回顾',
@@ -190,15 +212,15 @@
             category: timeInfoItem.name,
             symbolSize: 10,
             itemStyle: {
-              borderColor: timeInfoItem.color,
+              borderColor: timeInfoItem.color.colorStops[2].color,
               color: 'transparent',
               shadowColor: "rgba(255, 255, 255, 0.5)",
               shadowBlur: 10
             },
             select: {
               itemStyle: {
-                borderColor: timeInfoItem.color,
-                color: timeInfoItem.color,
+                borderColor: timeInfoItem.color.colorStops[2].color,
+                color: timeInfoItem.color.colorStops[2].color,
               },
             },
             label: {
@@ -212,7 +234,7 @@
             category: timeInfoItem.name,
             lineStyle: {
               normal: {
-                color: timeInfoItem.color,
+                color: timeInfoItem.color.colorStops[2].color,
               },
             },
             source: timeInfoItem.name,

public/chart4app.html

@@ -29,18 +29,20 @@
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
   <script type="text/javascript">
-    function randomColor() {
-      return '#' + Math.floor(
-        (
-          Math.random() * (1 - 0.3) + 0.3
-        ) * 0xffffff
-      ).toString(16)
+    function getRandomColorPair() {
+      const colorR = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorG = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorB = Math.floor(Math.random() * (220 - 50) + 50)
+      const colorDiff = Math.floor(Math.random() * ((255 - 220) - 20) + 20)
+      return [
+        `rgb(${colorR}, ${colorG}, ${colorB})`,
+        `rgb(${colorR + colorDiff}, ${colorG + colorDiff}, ${colorB + colorDiff})`
+      ]
     }
  
     const rawInfo = [
       {
         name: '开埠通商',
-        color: randomColor(),
         corpList: [
           // {
           //   companyName: "正泰橡皮物品制造厂",
@@ -63,48 +65,68 @@
       },
       {
         name: '曲折发展',
-        color: randomColor(),
         corpList: [],
         id: 'time-1'
       },
       {
         name: '步履维艰',
-        color: randomColor(),
         corpList: [],
         id: 'time-2'
       },
       {
         name: '筚路蓝缕',
-        color: randomColor(),
         corpList: [],
         id: 'time-3'
       },
       {
         name: '改革开放',
-        color: randomColor(),
         corpList: [],
         id: 'time-4'
       },
       {
         name: '战略负重',
-        color: randomColor(),
         corpList: [],
         id: 'time-5'
       },
       {
         name: '创新驱动',
-        color: randomColor(),
         corpList: [],
         id: 'time-6'
       },
       {
         name: '追梦未来',
-        color: randomColor(),
         corpList: [],
         id: 'time-7'
       },
     ]
    
+    for (const iterator of rawInfo) {
+      const [color1, color2] = getRandomColorPair()
+      console.log(color1);
+      console.log(color2);
+      iterator.color = {
+        type: "radial",
+        x: 0.5,
+        y: 0.5,
+        r: 0.5,
+        colorStops: [
+          {
+            offset: 0,
+            color: color1
+          },
+          {
+            offset: 0.4,
+            color: color1
+          },
+          {
+            offset: 1,
+            color: color2
+          },
+        ],
+        global: false
+      }
+    }
+    
     const nodesForRender = [
       {
         name: "历史回顾",
@@ -184,7 +206,7 @@
           category: null,
           lineStyle: {
             normal: {
-              color: timeInfoItem.color,
+              color: timeInfoItem.color.colorStops[2].color,
             },
           },
           source: '历史回顾',
@@ -198,15 +220,15 @@
             category: timeInfoItem.name,
             symbolSize: 10,
             itemStyle: {
-              borderColor: timeInfoItem.color,
+              borderColor: timeInfoItem.color.colorStops[2].color,
               color: 'transparent',
               shadowColor: "rgba(255, 255, 255, 0.5)",
               shadowBlur: 10
             },
             select: {
               itemStyle: {
-                borderColor: timeInfoItem.color,
-                color: timeInfoItem.color,
+                borderColor: timeInfoItem.color.colorStops[2].color,
+                color: timeInfoItem.color.colorStops[2].color,
               },
             },
             label: {
@@ -220,7 +242,7 @@
             category: timeInfoItem.name,
             lineStyle: {
               normal: {
-                color: timeInfoItem.color,
+                color: timeInfoItem.color.colorStops[2].color,
               },
             },
             source: timeInfoItem.name,