From ed9920601323db4b24a9602e1e3e3a8737a09e39 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期五, 04 十一月 2022 09:14:55 +0800
Subject: [PATCH] 趋势分析加入echarts

---
 package-lock.json                                   |   36 ++++++++++++
 package.json                                        |    2 
 src/views/intelligentPatrol/trendAnalysis/index.vue |  103 +++++++++++++++++++++++++++++++---
 3 files changed, 131 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6045ef1..37cee88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3856,6 +3856,27 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
+    "echarts-stat": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/echarts-stat/-/echarts-stat-1.2.0.tgz",
+      "integrity": "sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -9710,6 +9731,21 @@
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4698577..100492b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.0",
+    "echarts-stat": "^1.2.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.54.8",
     "sass-loader": "^13.0.2",
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index 0c2d5a0..8321844 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -18,13 +18,21 @@
       <div class="trend-data-show">
         <!-- 鐐逛綅鍒囨崲 -->
         <div class="trend-data-header">
-          <el-button type="text">楂樺彂鐐逛綅</el-button>
-          <el-button type="text">棣栨杩濊鐐逛綅</el-button>
+          <el-button type="text" @click="highFlag = true">楂樺彂鐐逛綅</el-button>
+          <el-button type="text" @click="highFlag = false">棣栨杩濊鐐逛綅</el-button>
         </div>
         <!-- 瀵瑰簲鏁版嵁 -->
         <div class="trend-data-main">
-          <div class="high-point">
+          <!--  -->
+          <div class="high-point" v-if="highFlag">
             <div class="point-item" v-for="item in highList" :key="item.id">
+              <span>{{ item.pointName }}</span>
+              <span>{{ item.count }}</span>
+            </div>
+          </div>
+          <!-- 棣栨杩濊 -->
+          <div class="first-point" v-else>
+            <div class="point-item" v-for="item in fisrtList" :key="item.id">
               <span>{{ item.pointName }}</span>
               <span>{{ item.count }}</span>
             </div>
@@ -32,7 +40,11 @@
         </div>
       </div>
     </div>
-    <div class="trend-main"></div>
+    <div class="trend-main">
+      <div class="trend-main-echarts" id="myRef">
+
+      </div>
+    </div>
     <div class="trend-footer" v-if="timeRangeFlag">
       <!-- 閫夋嫨鏃堕棿鑼冨洿 -->
       <div class="time-area">
@@ -45,6 +57,8 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
+import { transform } from 'echarts-stat';
 export default {
   data() {
     return {
@@ -79,8 +93,61 @@
           pointName: '鍚庡簡璺�200鍙�-鐞�',
           count: '100娆�',
         },
-      ]
+      ],
+      fisrtList: [
+        {
+          id: 1,
+          pointName: '鍚庡簡璺�205鍙�-鐞�',
+          count: '1娆�',
+        },
+        {
+          id: 2,
+          pointName: '鍚庡簡璺�204鍙�-鐞�',
+          count: '1娆�',
+        },
+        {
+          id: 3,
+          pointName: '鍚庡簡璺�203鍙�-鐞�',
+          count: '1娆�',
+        },
+        {
+          id: 4,
+          pointName: '鍚庡簡璺�202鍙�-鐞�',
+          count: '1娆�',
+        },
+        {
+          id: 5,
+          pointName: '鍚庡簡璺�201鍙�-鐞�',
+          count: '1娆�',
+        },
+      ],
+      highFlag: true,
     }
+  },
+  methods: {
+    renderEchart() {
+      // echarts.registerTransform(transform.regression);
+      const myChart = echarts.init(document.getElementById('myRef'));
+      // 缁樺埗鍥捐〃
+      myChart.setOption({
+        xAxis: {
+          name: '鏃�/鍛�',
+        },
+        yAxis: {
+          name: '鎶ヨ閲�(娆�)',
+        },
+        series: [
+          {
+            data: [10, 22, 28, 23, 19],
+            type: 'line',
+            smooth: true
+          }
+        ]
+      });
+    }
+  },
+  mounted() {
+    this.renderEchart()
   }
 }
 </script>
@@ -91,15 +158,18 @@
   padding: 10vh 10vw;
   color: #4b9bb7;
   display: flex;
+
   .trend-side {
     width: 20vw;
     text-align: left;
     height: 100%;
     border: 1px solid #09152f;
+
     .trend-input-area {
       display: flex;
       flex-direction: column;
       padding: 0 2vw;
+
       &>span {
         line-height: 40px;
       }
@@ -114,18 +184,24 @@
     .trend-data-show {
       width: 100%;
       line-height: 40px;
-      .trend-data-header{
+
+      .trend-data-header {
         display: flex;
-        .el-button{
+
+        .el-button {
           flex: 1;
           border: 2px solid #09152f;
         }
-        .el-button+.el-button{
+
+        .el-button+.el-button {
           margin: 0;
         }
       }
+
       .trend-data-main {
-        .high-point {
+
+        .high-point,
+        .first-point {
           .point-item {
             display: flex;
             padding: 0 2vw;
@@ -135,10 +211,17 @@
       }
     }
   }
-  .trend-main{
+
+  .trend-main {
     flex: 1;
     border: 1px solid #09152f;
+
+    .trend-main-echarts {
+      width: 500px;
+      height: 400px;
+    }
   }
+
   .trend-footer {
     ::v-deep .el-range-input {
       background-color: #09152f;

--
Gitblit v1.8.0