From 78c7b6c6dfe40761e7b8eb60498f2eb73c0aaad1 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 17 十月 2024 14:58:26 +0800
Subject: [PATCH] 登录页修改
---
src/views/visualization/list/chart.vue | 67 ++++++++++++++++++++++++---------
1 files changed, 48 insertions(+), 19 deletions(-)
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 5583f5f..73df6d7 100644
--- a/src/views/visualization/list/chart.vue
+++ b/src/views/visualization/list/chart.vue
@@ -1,7 +1,7 @@
<template>
<div class="chartListBox" :childData="childData">
- <div class="aside-title">{{ childData.title }}</div>
- <div class="echartBox">
+ <div class="aside-title"> 闆�</div>
+ <div class="echartBox" v-show="roadItem.address">
<table class="chartTable">
<tr>
<th></th>
@@ -35,7 +35,11 @@
</tr>
</table>
<div class="chartEchart">
- <div :id="chartId" class="myChart"> </div>
+ <div class="myChart">
+ <div id="chartRain" class="myChartID"></div>
+
+
+ </div>
</div>
</div>
</div>
@@ -53,16 +57,14 @@
}
},
watch: {
- childData(newValue, oldValue) {
- if (newValue) {
- this.chartId = newValue.id;
- this.title = newValue.title;
- setTimeout(() => {
- this.setEchartChange(newValue.val[0])
-
- }, 200);
- }
- }
+ "$store.state.mapLayers.disasterRain": {
+ handler(newVal, oldVal) {
+ if (newVal.val) {
+ this.setEchartChange(newVal);
+ }
+ },
+ deep: true
+ },
},
data() {
return {
@@ -75,7 +77,9 @@
created() {
window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
},
+ mounted() {
+ },
methods: {
setCannelItem() {
this.flagData = null;
@@ -92,12 +96,18 @@
window.dispatchEvent(event);
mapWeather.setRegionWeatherType(res);
},
+ showEchart() {
- setEchartChange(res) {
- this.roadItem = res
+ if (!this.roadItem) return
if (!this.roadItem.data) return;
- const data = this.roadItem.data;
- const id = document.getElementById(this.chartId)
+ var div = document.getElementsByClassName("chartEchart")[0];
+ if (div.offsetWidth == 0 || div.offsetHeight == 0) return
+ document.getElementById("chartRain").style.width = div.offsetWidth + "px"
+ document.getElementById("chartRain").style.height = div.offsetHeight + "px"
+ var data = this.roadItem.data;
+
+
+ const id = document.getElementById("chartRain")
var std = [];
for (var i = 0; i < data.length; i++) {
var h = i + 1
@@ -106,6 +116,12 @@
}
const myChart = echarts.init(id);
var option = {
+ grid: {
+ left: "10%",
+ top: "10%",
+ right: "5%",
+ bottom: "25%",
+ },
title: {
text: "",
textStyle: {
@@ -151,6 +167,13 @@
option && myChart.setOption(option);
+ },
+ setEchartChange(res) {
+
+
+ this.roadItem = res.val[0]
+ this.showEchart();
+
}
}
}
@@ -172,7 +195,7 @@
color: #fff;
width: 100%;
height: 45px;
- line-height: 45px;
+ line-height: 30px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
@@ -188,12 +211,18 @@
// justify-content: space-around;
.chartEchart {
flex: 1;
-
}
.myChart {
width: 100%;
height: 100%;
+ position: relative;
+
+
+ .myChartID {
+ position: absolute;
+
+ }
}
.chartTd {
--
Gitblit v1.9.3