guanqb
2023-03-30 8272d174571a07686840070bb80099389564a6eb
echarts加载效果
2 files modified
126 ■■■■ changed files
src/views/home/components/leftContainer.vue 85 ●●●● patch | view | raw | blame | history
src/views/home/components/rightContainer.vue 41 ●●●● patch | view | raw | blame | history
src/views/home/components/leftContainer.vue
@@ -34,7 +34,9 @@
                        <div class="type">境外人口</div>
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div id="PersonEcharts" class="echarts-box">
                </div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
            </div>
@@ -43,10 +45,10 @@
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
@@ -56,10 +58,10 @@
                        <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
@@ -128,7 +130,7 @@
            </svg>
        </div>
        <el-dialog title="学校" :modal="false" :visible.sync="xxPopupShow" :before-close="landBeforeClose"
        <el-dialog title="学校" :modal="false" :visible.sync="xxPopupShow" :before-lcose="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="xxArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
@@ -370,7 +372,17 @@
                        })
                    }
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    homePersonmyChart.showLoading({
                        text: '拼命加载中',
                        color: '#c23531',
                        textColor: '#FFF',
                        maskColor: 'rgba(17, 38, 163, 0.6)',
                        zlevel: 0,
                    })
                    setTimeout(() => {
                        homePersonmyChart.hideLoading()
                        homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    }, 500)
                    this.clickPeopleChart()
                    setTimeout(() => { this.dataDeep = 2 }, 1000)
@@ -402,7 +414,17 @@
                })
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
            homePersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 1)',
                zlevel: 0,
            })
            setTimeout(() => {
                homePersonmyChart.hideLoading()
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
            }, 500)
        },
        /**
@@ -570,7 +592,17 @@
        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
            houseMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                houseMyChart.hideLoading()
                houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
            }, 500)
        },
        initHouseOptions (xDate, y1Date, y2Date) {
@@ -819,9 +851,17 @@
            }
            keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
            keyPersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                keyPersonmyChart.hideLoading()
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
            }, 500)
            this.clickkeyPersonChart()
        },
@@ -1014,7 +1054,18 @@
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            landMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                landMyChart.hideLoading()
                landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            }, 500)
            this.clickLandChart()
        },
src/views/home/components/rightContainer.vue
@@ -340,9 +340,17 @@
            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.setOption(
                this.initEventChangeOption(optionsData.xData, optionsData.yData)
            )
            eventchangemychart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                eventchangemychart.hideLoading()
                eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
            }, 500)
        },
        // 设置默认时间
@@ -409,9 +417,17 @@
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.setOption(
                this.initEventChangeOption(optionsData.xData, optionsData.yData)
            )
            eventchangemychart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                eventchangemychart.hideLoading()
                eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
            }, 500)
        },
        // 案件统计的options
@@ -625,7 +641,18 @@
                }
            })
            equipmentmyChart.setOption(this.initEquipmentOptions(newData))
            equipmentmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(17, 38, 163, 0.6)',
                zlevel: 0,
            })
            setTimeout(() => {
                equipmentmyChart.hideLoading()
                equipmentmyChart.setOption(this.initEquipmentOptions(newData))
            }, 500)
            this.clickEquimentChart()