From 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 21 八月 2024 11:23:06 +0800
Subject: [PATCH] 添加本地矢量地图服务，初始化视角切换
---
src/views/visualization/leftMenu.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 108 insertions(+), 0 deletions(-)
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index 668da82..8c3d8c2 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/src/views/visualization/leftMenu.vue
@@ -2,6 +2,9 @@
<div class="leftMnu">
<div class="menuBox">
<div class="aside-title">{{ title.t1 }}</div>
+ <div class="echartBox">
+ <div id="letftEchart1" class="chartBox"></div>
+ </div>
</div>
<div class="menuBox">
<div class="aside-title">{{ title.t2 }}</div>
@@ -13,13 +16,103 @@
</template>
<script>
+import * as echarts from 'echarts';
export default {
+ props: {
+ leftChartData: {
+ type: Object,
+ required: true
+ },
+ },
data() {
return {
title: {
t1: 'xxx',
t2: 'XXXX',
t3: 'xxxxx'
+ },
+ myLeftChart1: null,
+ leftChartOption: {
+ lenData: [],
+ xData: [],
+ serData: [],
+ },
+ }
+ },
+ watch: {
+ leftChartData: {
+ deep: true,
+ handler(res) {
+ if (res) {
+ if (res.type == "left1") {
+ this.setLeftChart1(res.val)
+ }
+ }
+
+ }
+ }
+ },
+ methods: {
+ setLeftChart1(res) {
+ console.log(res);
+
+ if (!this.myLeftChart1) {
+ this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
+ }
+ if (this.leftChartOption.lenData.length == 0) {
+ this.title.t1 = res.head[1]
+ this.leftChartOption.lenData.push(res.head[0])
+ const colors=['#67C23A','#E6A23C','#F56C6C']
+ for (var i = 0; i < 3; i++) {
+ this.leftChartOption.serData.push({
+ name: res.head[i+1],
+ type: 'line',
+ stack: 'Total',
+ data: [],
+ lineStyle: {
+ color: colors[i], // 鎶樼嚎棰滆壊
+
+ }
+ })
+ }
+ }
+ var option = this.getChartOption(res)
+ this.myLeftChart1 && this.myLeftChart1.setOption(option);
+ },
+ getChartOption(res) {
+ for(var i = 0;i<3;i++){
+ this.leftChartOption.serData[i].data.push(res.data[i+1])
+ }
+
+
+ this.leftChartOption.xData.push(res.data[0])
+ return {
+ legend: {
+ show: false
+ },
+
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: this.leftChartOption.xData,
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 璁剧疆涓虹孩鑹�
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 璁剧疆涓虹孩鑹�
+ }
+ }
+ },
+ series: this.leftChartOption.serData
}
}
}
@@ -40,6 +133,8 @@
background: url(~@/assets/images/Screen/chartbg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
+ display: flex;
+ flex-direction: column;
.aside-title {
box-sizing: border-box;
@@ -55,6 +150,19 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
+
+ .echartBox {
+ flex: 1;
+ padding: 5px;
+ position: relative;
+
+ .chartBox {
+ width: calc(100% - 10px);
+ height: calc(100% - 10px);
+
+ position: absolute;
+ }
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3