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