首页饼图滚动

shuishen

2023-04-12 195665843d5c19f6ff28c33c07c71ffd889fbd70

首页饼图滚动

 src/views/home/components/leftContainer.vue

@@ -8,7 +8,8 @@
                    </div>
                </div>
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="peopletype == 0">
                        <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                            <div class="tab-title-small">户籍人口:</div>
@@ -28,10 +29,14 @@
                        </div>
                    </div>

                    <div id="PersonEcharts" class="echarts-box">
                    <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">

                        <div id="PersonEcharts" :style="{ height: personEchartsHeight }">

                        </div>

                    </div>
                </el-main>


                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
@@ -182,6 +187,7 @@
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%'
        }
    },

@@ -326,6 +332,8 @@
            this.disposeEchart()

            if (type == 0) {
                this.personEchartsHeight = '100%'

                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

                    this.getPoliceStationInfo()
@@ -336,8 +344,6 @@
                }

            } else if (type == 1) {


                this.initkeyPersonEcharts()
            }
        },
@@ -898,10 +904,8 @@
        async initkeyPersonEcharts () {
            this.disposeEchart()

            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)

            let personInfo = await this.getPersonInfo()

            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [
@@ -912,6 +916,17 @@
                    { count: 1, name: '欠薪讨债群体', value: 1 }]
            }

            const high = this.$refs.REFPERSONECHARTS.offsetHeight

            if (personInfo.length * (high / 7) > high) {
                this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
            } else {
                this.personEchartsHeight = '100%'
            }

            this.$nextTick(() => {
                var chartDom = document.getElementById('PersonEcharts')
                keyPersonmyChart = this.$echarts.init(chartDom)
            keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

            this.clickkeyPersonChart()
@@ -922,6 +937,9 @@
                keyPersonmyChart.off("mouseover")
                keyPersonmyChart.off("mouseout")
            }
            })


            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
@@ -992,15 +1010,15 @@
                        confine: true
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        top: 'middle',
                        left: '45%',
                        right: '5%',
                        y: '1%',
                        itemGap: 15,
                        textStyle: {
                            color: '#fff'
                        },
                        align: 'left',
                        formatter: function (name) {
                            let data = dataArr
                            let tarValue
@@ -1015,10 +1033,11 @@
                    },
                    series: [
                        {
                            name: '',
                            top: 140,
                            left: 90,
                            type: 'pie',
                            radius: ['30%', '60%'],
                            center: ['22%', '55%'],
                            radius: [30, 60],
                            center: [0, 0],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,