From f9fd7c038b6405a69c5d070febebab0a59eb821b Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期五, 25 十月 2024 18:00:42 +0800
Subject: [PATCH] ll

---
 screen/src/views/LogisticsEfficiency.vue |  191 +++++++++++++++++++++++++++++++++++++----------
 1 files changed, 150 insertions(+), 41 deletions(-)

diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 77c7610..4cab385 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -262,59 +262,161 @@
 const initEnergy = () => {
   var myChart = echarts.init(document.querySelector('.energyRef'))
   // 缁樺埗鍥捐〃
-  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
   myChart.setOption({
+    legend: {
+      itemGap: 12,
+      // icon: 'circle',
+      right: '12px',
+      top: '0',
+      data: ['鎬诲簱瀛�', '褰撳墠搴撳瓨', '搴撳瓨鍒╃敤鐜�'],
+      itemWidth: 20,
+      itemHeight: 10,
+      textStyle: {
+        color: '#fff',
+        borderColor: '#fff'
+      },
+    },
     grid: {
-      top: '20%',
-      left: '2%',
-      right: '2%',
-      bottom: '4%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '16%',
       containLabel: true
     },
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
-      },
+      trigger: 'axis'
     },
-    xAxis: {
+    xAxis: [{
+      nameGap: 5,
       type: 'category',
-      data: [1, 2, 3, 4, 4, 5]
-    },
-    yAxis: {
-      type: 'value',
-      name: 'kw路h',
-      nameTextStyle: {
-        padding: [0, 0, 4, -30]    // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
-      },
-      splitLine: {
+      axisLine: {
         show: true,
         lineStyle: {
-          //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
-          color: 'rgba(255,255,255,0.14)',
-        }
+          color: '#999'
+        },
+      },
+      axisLabel: {
+        color: '#869CC9'
+        // fontSize: 24,
+      },
+      axisTick: {
+        show: false,
+      },
+      data: ['7.1', '7.1', '7.1', '7.1', '7.1'],
+    }],
+    yAxis: [
+      {
+        nameTextStyle: {
+          color: '#869CC9',
+        },
+        offset: 0,
+        name: '涓囨敮',
+        type: 'value',
+        axisLabel: {
+          show: true,
+          color: "#869CC9",
+        },
+        axisLine: {
+          show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: "rgba(49,105,129,0.4)",
+            type: 'dashed'
+          }
+        },
+      },
+      {
+        type: 'value',
+        name: '%',
+        min: 0,
+        max: 100,
+        // interval: 5,
+        axisLabel: {
+          formatter: '{value}%'
+        },
+        splitLine: false
       }
-    },
+    ],
     series: [
       {
-        data: [1, 2, 3, 4, 5],
+        name: '璁″垝瀹屾垚鏁伴噺',
         type: 'bar',
         barWidth: 10,
+        barGap: '60%',
+        label: {
+          show: false,
+          position: 'top',
+          color: '#fff',
+        },
         itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1,
-              [
-                { offset: 0, color: arr[1] },
-                { offset: 1, color: '#080807' }
-              ]
-            ),
-            barBorderRadius: [10, 10, 0, 0]
-          }
-        }
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#5bc7d5'
+            },
+            {
+              offset: 1,
+              color: '#1a3f55'
+            }
+          ], false),
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          },
+          barBorderRadius: [3, 3, 0, 0],
+        },
+        data: [900, 438, 485, 631, 689]
+      },
+      {
+        name: '浠诲姟瀹屾垚閲�',
+        type: 'bar',
+        barWidth: 10,
+        label: {
+          show: false,
+          position: 'top',
+          color: '#fff',
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#edaf3d'
+            },
+            {
+              offset: 1,
+              color: '#323522'
+            }
+          ], false),
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          },
+          barBorderRadius: [3, 3, 0, 0],
+        },
+        data: [438, 485, 631, 689, 900]
+      },
+      {
+        name: '璁″垝浠诲姟鏁�',
+        type: 'line',
+        smooth: false,
+        showAllSymbol: true,
+        symbol: 'none',
+        lineStyle: {
+          color: "#1a43bc"
+        },
+        label: {
+          show: false,
+          position: 'top',
+          color: '#fff',
+        },
+        data: [485, 631, 389, 224, 287]
       }
     ]
   })
+
   window.addEventListener('resize', function () {//鎵ц
     myChart.resize()
   })
@@ -772,27 +874,33 @@
           font-size: 14px;
           color: #D2E0FF;
           margin-bottom: 11px;
+
           .num {
             font-weight: 500;
             font-size: 16px;
             color: #FFFFFF;
           }
         }
-        .list{
+
+        .list {
           margin-top: 22px;
-          .item{
+
+          .item {
             width: 100%;
             height: 36px;
             display: flex;
             align-items: center;
-            &:nth-of-type(2n+1){
-              background: rgba(0,152,255,0.13);
+
+            &:nth-of-type(2n+1) {
+              background: rgba(0, 152, 255, 0.13);
             }
-            .la{
+
+            .la {
               flex: 5;
               padding-left: 20px;
             }
-            .val{
+
+            .val {
               flex: 2;
             }
           }
@@ -915,6 +1023,7 @@
   position: relative;
   z-index: -2;
   font-size: 14px;
+
   .main_bg {
     position: absolute;
     left: 0;

--
Gitblit v1.9.3