| | |
| | | <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> |
| | |
| | | </tr> |
| | | </table> |
| | | <div class="chartEchart"> |
| | | <div :id="chartId" class="myChart"> </div> |
| | | <div class="myChart"> |
| | | <div id="chartRain" class="myChartID"></div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | }, |
| | | 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 { |
| | |
| | | created() { |
| | | window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange) |
| | | }, |
| | | mounted() { |
| | | |
| | | }, |
| | | methods: { |
| | | setCannelItem() { |
| | | this.flagData = null; |
| | |
| | | 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 |
| | |
| | | |
| | | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | setEchartChange(res) { |
| | | |
| | | |
| | | this.roadItem = res.val[0] |
| | | this.showEchart(); |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | // justify-content: space-around; |
| | | .chartEchart { |
| | | flex: 1; |
| | | |
| | | } |
| | | |
| | | .myChart { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | |
| | | |
| | | .myChartID { |
| | | position: absolute; |
| | | |
| | | } |
| | | } |
| | | |
| | | .chartTd { |