历史回顾 外观更新

public/chart.html

@@ -93,9 +93,6 @@
     ]
    
     for (const iterator of rawInfo) {
-      const [color1, color2] = getRandomColorPair()
-      console.log(color1);
-      console.log(color2);
       iterator.color = {
         type: "radial",
         x: 0.5,
@@ -104,15 +101,11 @@
         colorStops: [
           {
             offset: 0,
-            color: color1
-          },
-          {
-            offset: 0.4,
-            color: color1
+            color: 'rgba(51, 175, 202, 0.20)'
           },
           {
             offset: 1,
-            color: color2
+            color: 'rgba(0, 157, 191, 0.7)'
           },
         ],
         global: false
@@ -124,7 +117,7 @@
         name: "历史回顾",
         level: 0,
         category: null,
-        symbolSize: 100,
+        symbolSize: 76,
         itemStyle: {
           color: {
             type: "radial",
@@ -134,27 +127,30 @@
             colorStops: [
               {
                 offset: 0,
-                color: "#00c7ef"
+                color: "rgba(223, 201, 145, 0.2)"
               },
               {
-                offset: 0.8,
-                color: "#00c7ef"
+                offset: 0.5,
+                color: "rgba(223, 201, 145, 0.5)"
               },
               {
                 offset: 1,
-                color: "rgba(0, 0, 0, 0.3)"
-              }
+                color: "rgba(223, 201, 145, 1)"
+              },
             ],
             global: false
           },
-          shadowColor: "rgba(255, 255, 255, 0.5)",
+          borderColor: "rgba(255,236,186,1)",
+          borderWidth: 2,
+          shadowColor: "rgba(223, 201, 145, 1)",
           shadowBlur: 10
         },
         label: {
           position: 'inside',
           show: true,
           color: '#fff',
-          fontSize: '18px',
+          fontSize: '16px',
+          fontWeight: 'bold',
         }
       },
     ]
@@ -181,24 +177,27 @@
           name: timeInfoItem.name,
           level: 1,
           category: timeInfoItem.name,
-          symbolSize: 50,
+          symbolSize: 57,
           itemStyle: {
             color: timeInfoItem.color,
-            shadowColor: "rgba(255, 255, 255, 0.5)",
-            shadowBlur: 10
+            borderColor: "rgba(0, 157, 191, 0.6)",
+            shadowColor: "rgba(97,170,238,0.5)",
+            shadowBlur: 15,
+            borderColor: 'rgba(42,174,203,1)',
+            borderWidth: 1,
           },
           label: {
-            position: 'right',
+            position: 'inside',
             show: true,
             color: '#fff',
-            fontSize: '16px',
+            fontSize: '13px',
           }
         })
         edgesForRender.push({
           category: null,
           lineStyle: {
             normal: {
-              color: timeInfoItem.color.colorStops[2].color,
+              color: 'rgba(42, 174, 203, 1)',
             },
           },
           source: '历史回顾',
@@ -210,31 +209,29 @@
             level: 2,
             idForSend: corpItem.id,
             category: timeInfoItem.name,
-            symbolSize: 10,
+            symbolSize: 12,
             itemStyle: {
-              borderColor: timeInfoItem.color.colorStops[2].color,
+              borderColor: 'rgba(42, 174, 203, 1)',
               color: 'transparent',
-              shadowColor: "rgba(255, 255, 255, 0.5)",
-              shadowBlur: 10
             },
             select: {
               itemStyle: {
-                borderColor: timeInfoItem.color.colorStops[2].color,
-                color: timeInfoItem.color.colorStops[2].color,
+                borderColor: timeInfoItem.color.colorStops[1].color,
+                color: timeInfoItem.color.colorStops[1].color,
               },
             },
             label: {
               position: 'right',
               show: true,
               color: '#fff',
-              fontSize: '14px',
+              fontSize: '13px',
             }
           })
           edgesForRender.push({
             category: timeInfoItem.name,
             lineStyle: {
               normal: {
-                color: timeInfoItem.color.colorStops[2].color,
+                color: 'rgba(42, 174, 203, 1)',
               },
             },
             source: timeInfoItem.name,
@@ -335,7 +332,7 @@
               }
             },
             edgeSymbol: ["circle", "arrow"],
-            edgeSymbolSize: [4, 8],
+            edgeSymbolSize: [1, 8],
           }
         ]
       }, true)

public/chart4app.html

@@ -101,9 +101,6 @@
     ]
    
     for (const iterator of rawInfo) {
-      const [color1, color2] = getRandomColorPair()
-      console.log(color1);
-      console.log(color2);
       iterator.color = {
         type: "radial",
         x: 0.5,
@@ -112,27 +109,23 @@
         colorStops: [
           {
             offset: 0,
-            color: color1
-          },
-          {
-            offset: 0.4,
-            color: color1
+            color: 'rgba(51, 175, 202, 0.20)'
           },
           {
             offset: 1,
-            color: color2
+            color: 'rgba(0, 157, 191, 0.7)'
           },
         ],
         global: false
       }
     }
-    
+
     const nodesForRender = [
       {
         name: "历史回顾",
         level: 0,
         category: null,
-        symbolSize: 100,
+        symbolSize: 76,
         itemStyle: {
           color: {
             type: "radial",
@@ -142,27 +135,30 @@
             colorStops: [
               {
                 offset: 0,
-                color: "#00c7ef"
+                color: "rgba(223, 201, 145, 0.2)"
               },
               {
-                offset: 0.8,
-                color: "#00c7ef"
+                offset: 0.5,
+                color: "rgba(223, 201, 145, 0.5)"
               },
               {
                 offset: 1,
-                color: "rgba(0, 0, 0, 0.3)"
-              }
+                color: "rgba(223, 201, 145, 1)"
+              },
             ],
             global: false
           },
-          shadowColor: "rgba(255, 255, 255, 0.5)",
+          borderColor: "rgba(255,236,186,1)",
+          borderWidth: 2,
+          shadowColor: "rgba(223, 201, 145, 1)",
           shadowBlur: 10
         },
         label: {
           position: 'inside',
           show: true,
           color: '#fff',
-          fontSize: '18px',
+          fontSize: '16px',
+          fontWeight: 'bold',
         }
       },
     ]
@@ -189,24 +185,27 @@
           name: timeInfoItem.name,
           level: 1,
           category: timeInfoItem.name,
-          symbolSize: 50,
+          symbolSize: 57,
           itemStyle: {
             color: timeInfoItem.color,
-            shadowColor: "rgba(255, 255, 255, 0.5)",
-            shadowBlur: 10
+            borderColor: "rgba(0, 157, 191, 0.6)",
+            shadowColor: "rgba(97,170,238,0.5)",
+            shadowBlur: 15,
+            borderColor: 'rgba(42,174,203,1)',
+            borderWidth: 1,
           },
           label: {
-            position: 'right',
+            position: 'inside',
             show: true,
             color: '#fff',
-            fontSize: '16px',
+            fontSize: '13px',
           }
         })
         edgesForRender.push({
           category: null,
           lineStyle: {
             normal: {
-              color: timeInfoItem.color.colorStops[2].color,
+              color: 'rgba(42, 174, 203, 1)',
             },
           },
           source: '历史回顾',
@@ -218,31 +217,29 @@
             level: 2,
             idForSend: corpItem.id,
             category: timeInfoItem.name,
-            symbolSize: 10,
+            symbolSize: 12,
             itemStyle: {
-              borderColor: timeInfoItem.color.colorStops[2].color,
+              borderColor: 'rgba(42, 174, 203, 1)',
               color: 'transparent',
-              shadowColor: "rgba(255, 255, 255, 0.5)",
-              shadowBlur: 10
             },
             select: {
               itemStyle: {
-                borderColor: timeInfoItem.color.colorStops[2].color,
-                color: timeInfoItem.color.colorStops[2].color,
+                borderColor: timeInfoItem.color.colorStops[1].color,
+                color: timeInfoItem.color.colorStops[1].color,
               },
             },
             label: {
               position: 'right',
               show: true,
               color: '#fff',
-              fontSize: '14px',
+              fontSize: '13px',
             }
           })
           edgesForRender.push({
             category: timeInfoItem.name,
             lineStyle: {
               normal: {
-                color: timeInfoItem.color.colorStops[2].color,
+                color: 'rgba(42, 174, 203, 1)',
               },
             },
             source: timeInfoItem.name,
@@ -343,7 +340,7 @@
               }
             },
             edgeSymbol: ["circle", "arrow"],
-            edgeSymbolSize: [4, 8],
+            edgeSymbolSize: [1, 8],
           }
         ]
       }, true)

src/views/History.vue

@@ -284,6 +284,8 @@ export default {
           font-weight: bold;
           color: #FFFFFF;
           text-shadow: 0px 0px 10px #8B7C54;
+          background: linear-gradient(270deg, #B0A179 0%, rgba(255,209,91,0) 100%);
+          border-image: linear-gradient(270deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
           >.point {
             background: #FFFFFF;
             box-shadow: 0px 0px 12px 0px #FFD15B, 0px 0px 8px 0px #FFD15B, 0px 0px 10px 0px #FFD15B, 0px 0px 5px 0px #FFD15B;