From a53f3b0645e3b0455a8c9a4a1cd0f061a8106c8d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 19 一月 2021 19:49:59 +0800
Subject: [PATCH] 轨迹图实时查询逻辑更新(去除过滤)

---
 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue |  111 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 40c81ac..8007458 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -130,6 +130,32 @@
             </div>
           </div>
         </div>
+        <div class="statics">
+          <div class="lt">
+            <div class="statics-part">
+              <div class="statics-header">
+                <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
+                <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
+              </div>
+              <div class="chart-area flex-box">
+                <div class="lt">
+                  <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
+                  <div class="sum">
+                    <span class="val">8846</span>
+                    <span class="ratio">17.1%</span>
+                  </div>
+                  <Line :options="optionsOfIrregularSum"></Line>
+                </div>
+                <div class="gt">
+                  <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+                  <div class="sum">
+                    <span class="val">8846</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -139,8 +165,9 @@
 import timeShortcut from './timeShortcut';
 import Bar from './charts/bar';
 import Pie from './charts/pie';
+import Line from './charts/line';
 export default {
-  components: { timeShortcut, Bar, Pie },
+  components: { timeShortcut, Bar, Pie, Line },
   data () {
     return {
       actCardTab: 'dataStatistic',
@@ -183,44 +210,79 @@
         ]
       },
       optionsOfHidDangerPie: {
-        tooltip:{
+        tooltip: {
           trigger: 'item',
           formatter: '{a}<br/>{b}:{c} ({d}%)'
         },
         legend: {
           orient: 'vertical',
-          left: 10,
+          right: 10,
+          y: 'center',
           data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']
         },
         series: [
           {
-            name:'寮傚父浜嬩欢',
-            type:'pie',
-            color: [],
-            radius: ['50%','70%'],
+            name: '寮傚父浜嬩欢',
+            type: 'pie',
+            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+            radius: ['70%', '90%'],
+            //center: ['40%','60%'],
             avoidLabelOverlap: false,
-            label:{
+            label: {
               show: false,
               position: 'center'
             },
-            emphasis:{
-              label:{
+            emphasis: {
+              label: {
                 show: true,
                 fontSize: '30',
                 fontWeight: 'bold'
               }
             },
-            labelLine:{
+            labelLine: {
               show: false
             },
             data: [
-              {value: 270,name:'鏈福绗�'},
-              {value: 500,name:'鏈墜姣�'},
-              {value: 300,name:'鏈懠鍞�'},
-              {value: 430,name:'杩愯涓潯瑙�'},
-              {value: 620,name:'鏈鏌�'},
-              {value: 540,name:'鏈簲绛�'},
+              { value: 270, name: '鏈福绗�' },
+              { value: 500, name: '鏈墜姣�' },
+              { value: 300, name: '鏈懠鍞�' },
+              { value: 430, name: '杩愯涓潯瑙�' },
+              { value: 620, name: '鏈鏌�' },
+              { value: 540, name: '鏈簲绛�' },
             ]
+          }
+        ]
+      },
+      optionsOfIrregularSum: {
+        animation: false,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          label: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          label: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+
           }
         ]
       }
@@ -228,8 +290,11 @@
   },
   methods: {
     timeShortChange (time) {
-      debugger
+
     },
+    irregularStatistic (time) {
+
+    }
   }
 }
 </script>
@@ -336,16 +401,16 @@
               font-weight: bold;
             }
           }
-          .rank-list{
+          .rank-list {
             padding: 10px 0;
-            .rank-item{
+            .rank-item {
               height: 36px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               font-size: 14px;
               color: #666;
-              .rank-index{
+              .rank-index {
                 width: 20px;
                 height: 20px;
                 line-height: 20px;
@@ -354,8 +419,8 @@
                 border-radius: 50%;
                 text-align: center;
               }
-              .name{
-                width:200px;
+              .name {
+                width: 200px;
               }
             }
           }

--
Gitblit v1.8.0