首页echarts元素优化

guanqb

2022-11-04 94b2b0fbc76785afed0496f96369b4eb6304fb8f

 src/views/home/components/leftContainer.vue

@@ -2,14 +2,28 @@
    <div class="container">
        <div class="person-box">
            <div class="title">
                <span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                <span>/</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                <span class="word before">共</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                <span class="word">/</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>
                <span class="word">人</span>
                <div>
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)"
                    >现有人员</span>
                    /
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 1 }"
                        @click="peopleTabClick(1)"
                    >重点人员</span>
                </div>
                <div>
                    共
                    <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                    /
                    <span
                        class="peopleNum"
                        :class="{ choosed: peopletype == 1 }"
                    >1</span>人
                </div>
            </div>

            <div class="sub-tab" v-show="peopletype == 0">
@@ -27,18 +41,21 @@
                </div>
            </div>

            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
            <div id="PersonEcharts" :class="[peopletype == 0 ? 'echarts-box':'people-table']"></div>
            <!-- :class="{'people-table' : peopletype == 1 }" -->
            <!-- <div id="keyPersonEcharts" class="people-table" v-show="peopletype == 1"></div> -->

            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >
                <i class="el-icon-back"></i>
            </div>
        </div>
        <div class="house-box">
            <div class="title">
                现有房屋
            </div>

            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
@@ -53,9 +70,7 @@
            <div id="houseEcharts" class="echarts-box"></div>
        </div>
        <div class="land-box">
            <div class="title">
                现有地
            </div>
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="num">634个</div>
@@ -196,6 +211,7 @@
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            keyPersonSelectSaveArr: [],
        }
    },
    mounted () {
@@ -204,8 +220,6 @@
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()
        this.initkeyPersonEcharts()
        this.clickkeyPersonChart()
    },
    methods: {
        initPersonEcharts () {
@@ -465,6 +479,24 @@

        peopleTabClick (type) {
            this.peopletype = type
            this.$nextTick(() => {
                if (type == 0) {
                    homePersonmyChart.dispose()
                    this.initPersonEcharts()
                    homePersonmyChart.off('click')
                    this.$nextTick(() => {
                        this.clickPeopleChart()
                    })

                } else {
                    homePersonmyChart.dispose()
                    this.initkeyPersonEcharts()
                    homePersonmyChart.off('click')
                    this.$nextTick(() => {
                        this.clickkeyPersonChart()
                    })
                }
            })
        },

        clickPeopleChart () {
@@ -562,10 +594,11 @@
        },

        initkeyPersonEcharts () {
            var chartDom = document.getElementById('keyPersonEcharts')
            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))

        },

        initkeyPersonOption (dataArr) {
@@ -662,9 +695,9 @@
                        arr.push(item)
                    }
                    this.keyPersonSelectArr = arr
                    this.keyPersonSelectSaveArr = arr
                })
            }

            this.initkeyPersonEcharts()
        },

@@ -718,12 +751,14 @@
        selectAreaChangeData (name) {
            if (name != '全部') {
                let arr = []
                this.keyPersonSelectArr.some(item => {
                this.keyPersonSelectSaveArr.some(item => {
                    if (item.housingEastate == name) {
                        arr.push(item)
                    }
                })
                this.keyPersonSelectArr = arr
            } else {
                this.keyPersonSelectArr = this.keyPersonSelectSaveArr
            }
            this.initkeyPersonEcharts()
        }
@@ -793,7 +828,7 @@
            margin-left: 108px;
        }

        .peopleTable {
        .people-table {
            height: calc(100% - 40px);
            height: 250px;
            width: 400px;
@@ -832,7 +867,7 @@
        padding: 0 10px;

        .title::after {
            content: "";
            content: '';
            position: absolute;
            top: 6px;
            left: 0;
@@ -850,9 +885,14 @@
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            display: flex;
            justify-content: space-between;

            .choosed {
                color: #fff;
            }
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }

@@ -872,7 +912,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -889,7 +929,7 @@
            height: calc(100% - 104px);
        }

        .sub-tab+.echarts-box {
        .sub-tab + .echarts-box {
            margin-top: 10px;
        }
    }