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