客流图表颜色

src/pages/views/home/components/PassengerFlow.vue

@@ -153,7 +153,7 @@ const leftContent = ref({
             type: 'pie', // 图表类型为饼图
             radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
-            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+            showEmptyCircle: true, // 是否在无数据的日候显示一个占位圆
             label: {
               show: true,
               formatter: '{d}%',
@@ -256,16 +256,16 @@ const leftContent = ref({
               normal: {
                 color: new graphic.LinearGradient(
                   0,
-                  1,
                   0,
                   0,
+                  1,
                   [ {
                     offset: 0,
-                    color: 'rgba(96, 132, 255, 0)'// 0% 处的颜色
+                    color: '#00fdff'// 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: 'rgba(96, 132, 255, 1)' // 100% 处的颜色
+                    color: '#00aaff08' // 100% 处的颜色
                   }
                   ],
                   false
@@ -741,8 +741,8 @@ const rightContent = ref({
         normal: {
           // color: '#4293FD',
           lineStyle: {
-            // color: '#4293FD',
-            width: 2
+            // color: '#FFD35D',
+            width: 1
           }
         }
       },
@@ -751,11 +751,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(19, 95, 172, 0)'
+              color: '#FFD35D66'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(112, 154, 195, 0.4)'
+              color: '#189066'
             }
           ], false)
         }
@@ -772,7 +776,7 @@ const rightContent = ref({
           // color: '#23D0C4',
           lineStyle: {
             // color: '#23D0C4',
-            width: 2
+            width: 1
           }
         }
       },
@@ -781,11 +785,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(50, 216, 205, 0)'
+              color: '#6A5BF066'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(35, 208, 196, 0.4)'
+              color: '#1890ff66'
             }
           ], false)
         }
@@ -874,7 +882,7 @@ const rightContent = ref({
           // color: '#4293FD',
           lineStyle: {
             // color: '#4293FD',
-            width: 2
+            width: 1
           }
         }
       },
@@ -883,11 +891,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(19, 95, 172, 0)'
+              color: '#FFD35D66'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(112, 154, 195, 0.4)'
+              color: '#189066'
             }
           ], false)
         }
@@ -904,7 +916,7 @@ const rightContent = ref({
           // color: '#23D0C4',
           lineStyle: {
             // color: '#23D0C4',
-            width: 2
+            width: 1
           }
         }
       },
@@ -913,11 +925,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(50, 216, 205, 0)'
+              color: '#6A5BF066'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(35, 208, 196, 0.4)'
+              color: '#1890ff66'
             }
           ], false)
         }
@@ -934,7 +950,7 @@ const rightContent = ref({
           // color: '#23D0C4',
           lineStyle: {
             // color: '#23D0C4',
-            width: 2
+            width: 1
           }
         }
       },
@@ -943,11 +959,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(50, 216, 205, 0)'
+              color: '#2ECC7166'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(35, 208, 196, 0.4)'
+              color: '#1890ff66'
             }
           ], false)
         }
@@ -991,7 +1011,7 @@ const rightContent = ref({
       axisTick: {
         show: false
       },
-      data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
+      data: [ '1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日' ]
     } ],
     yAxis: [ {
       name: '人数/人',
@@ -1036,7 +1056,7 @@ const rightContent = ref({
           // color: '#4293FD',
           lineStyle: {
             // color: '#4293FD',
-            width: 2
+            width: 1
           }
         }
       },
@@ -1045,11 +1065,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(19, 95, 172, 0)'
+              color: '#FFD35D66'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(112, 154, 195, 0.4)'
+              color: '#189066'
             }
           ], false)
         }
@@ -1066,7 +1090,7 @@ const rightContent = ref({
           // color: '#23D0C4',
           lineStyle: {
             // color: '#23D0C4',
-            width: 2
+            width: 1
           }
         }
       },
@@ -1075,11 +1099,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(50, 216, 205, 0)'
+              color: '#6A5BF066'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(35, 208, 196, 0.4)'
+              color: '#1890ff66'
             }
           ], false)
         }
@@ -1096,7 +1124,7 @@ const rightContent = ref({
           // color: '#23D0C4',
           lineStyle: {
             // color: '#23D0C4',
-            width: 2
+            width: 1
           }
         }
       },
@@ -1105,11 +1133,15 @@ const rightContent = ref({
           color: new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: 'rgba(50, 216, 205, 0)'
+              color: '#2ECC7166'
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f366'
             },
             {
               offset: 1,
-              color: 'rgba(35, 208, 196, 0.4)'
+              color: '#1890ff66'
             }
           ], false)
         }