登录页修改

suerprisePlus

2024-10-17 78c7b6c6dfe40761e7b8eb60498f2eb73c0aaad1

 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 {