From ed9920601323db4b24a9602e1e3e3a8737a09e39 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期五, 04 十一月 2022 09:14:55 +0800
Subject: [PATCH] 趋势分析加入echarts
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 103 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 93 insertions(+), 10 deletions(-)
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