echarts切换代码优化

guanqb

2022-09-28 5a51cf4a6432e990f84a6c0431028ec72004bde5

echarts切换代码优化

 src/views/home/index.vue

@@ -18,15 +18,15 @@
                </div>

                <div class="sub-tab">
                    <div class="tab" :class="{on:tabType==0}" @click="tabType=0">
                    <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)">
                        <div class="num">164.57万人</div>
                        <div class="type">户籍人口</div>
                    </div>
                    <div class="tab" :class="{on:tabType==1}" @click="tabType=1">
                    <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)">
                        <div class="num">17.52万人</div>
                        <div class="type">流动人口</div>
                    </div>
                    <div class="tab" :class="{on:tabType==2}" @click="tabType=2">
                    <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)">
                        <div class="num">91995人</div>
                        <div class="type">境外人口</div>
                    </div>
@@ -40,11 +40,11 @@
                </div>

                <div class="sub-tab">
                    <div class="tab" :class="{on:tabTypeTwo==0}" @click="tabTypeTwo=0">
                    <div class="tab" :class="{on:tabTypeTwo==0}" @click="landTabClick(0)">
                        <div class="num">1822603户</div>
                        <div class="num">实有房屋</div>
                    </div>
                    <div class="tab" :class="{on:tabTypeTwo==1}" @click="tabTypeTwo=1">
                    <div class="tab" :class="{on:tabTypeTwo==1}" @click="landTabClick(1)">
                        <div class="num">634个</div>
                        <div class="num">关注场所</div>
                    </div>
@@ -223,6 +223,8 @@

<script>
let cylinderLayer = null
let homePersonmyChart
let landMyChart

import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
@@ -418,6 +420,8 @@
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()
        this.initPersonEcharts()
        this.initLandEcharts()

        this.$nextTick(() => {
            let positionColor = [
@@ -550,8 +554,7 @@
        })
    },
    updated () {
        this.initPersonEcharts(this.tabType)
        this.initLandEcharts(this.tabTypeTwo)

    },
    methods: {
        policeStationSelect (item, index) {
@@ -647,30 +650,19 @@
            this.navType = e.target.dataset.type
        },

        initPersonEcharts (type) {
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            var xDate = []
            var yDate = []
            var xDate0 = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
            var yDate0 = [881, 2211, 6414, 4321, 1232]
            var xDate1 = ['湖北', '上海', '北京', '广东', '浙江']
            var yDate1 = [6414, 4231, 2211, 1231, 881]
            var xDate2 = ['日本', '美国', '俄罗斯', '英国', '印度']
            var yDate2 = [881, 1231, 2211, 4321, 6414]
            if (type == 0) {
                xDate = xDate0
                yDate = yDate0
            } else if (type == 1) {
                xDate = xDate1
                yDate = yDate1
            } else {
                xDate = xDate2
                yDate = yDate2
            }
            homePersonmyChart = this.$echarts.init(chartDom)

            option = {
            homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232]))

            window.addEventListener("resize", function () {
                homePersonmyChart.resize()
            })
        },

        initPersonOptions (xDate, yDate) {
            return {
                xAxis: {
                    type: 'category',
                    data: xDate,
@@ -719,37 +711,39 @@
                    y2: 20
                },
            }

            option && myChart.setOption(option)
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },

        initLandEcharts (type) {
            var chartDom = document.getElementById('LandEcharts')
            var myChart = this.$echarts.init(chartDom)
            var xDate = []
            var y1Date = []
            var y2Date = []
            var xDate0 = ['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑']
            var y1Date0 = [88188, 1222211, 464104, 43201, 12302]
            var y2Date0 = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]
            var xDate1 = ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业']
            var y1Date1 = [54, 77, 97, 141, 191]
            var y2Date1 = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }]
            if (type == 0) {
                xDate = xDate0
                y1Date = y1Date0
                y2Date = y2Date0
            } else {
                xDate = xDate1
                y1Date = y1Date1
                y2Date = y2Date1
            }
            var option
        personTabClick (type) {
            this.tabType = type

            option = {
            let xDate, yDate

            if (type == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
            } else if (type == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
            } else if (type == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
        },

        initLandEcharts () {
            var chartDom = document.getElementById('LandEcharts')
            landMyChart = this.$echarts.init(chartDom)

            landMyChart.setOption(this.initLandOptions(['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'], [88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))

            window.addEventListener("resize", function () {
                landMyChart.resize()
            })
        },
        initLandOptions (xDate, y1Date, y2Date) {
            return {

                color: ['#2967c4', '#112d54'],
                xAxis: {
                    type: 'value',
@@ -807,10 +801,111 @@
                    x2: 10,
                    y2: 20
                },
            }

            option && myChart.setOption(option)
            }
        },
        landTabClick (type) {
            this.tabTypeTwo = type

            let xDate, y1Date, y2Date

            if (type == 0) {
                xDate = ['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑']
                y1Date = [88188, 1222211, 464104, 43201, 12302]
                y2Date = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]
            } else {
                xDate = ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业']
                y1Date = [54, 77, 97, 141, 191]
                y2Date = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }]
            }
            landMyChart.setOption(this.initLandOptions(xDate, y1Date, y2Date), true)
        },

        // initLandEcharts (type) {
        //     var chartDom = document.getElementById('LandEcharts')
        //     var myChart = this.$echarts.init(chartDom)
        //     var xDate = []
        //     var y1Date = []
        //     var y2Date = []
        //     var xDate0 = ['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑']
        //     var y1Date0 = [88188, 1222211, 464104, 43201, 12302]
        //     var y2Date0 = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]
        //     var xDate1 = ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业']
        //     var y1Date1 = [54, 77, 97, 141, 191]
        //     var y2Date1 = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }]
        //     if (type == 0) {
        //         xDate = xDate0
        //         y1Date = y1Date0
        //         y2Date = y2Date0
        //     } else {
        //         xDate = xDate1
        //         y1Date = y1Date1
        //         y2Date = y2Date1
        //     }
        //     var option

        //     option = {
        //         color: ['#2967c4', '#112d54'],
        //         xAxis: {
        //             type: 'value',
        //             splitLine: {
        //                 show: false
        //             },
        //             axisLine: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 show: false
        //             },
        //             axisTick: {
        //                 show: false
        //             },

        //         },
        //         yAxis: {
        //             type: 'category',
        //             data: xDate,
        //             axisLine: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 color: "#fff"
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //         },
        //         series: [
        //             {
        //                 data: y1Date,
        //                 type: 'bar',
        //                 zlevel: 2,
        //             },
        //             {
        //                 data: y2Date,
        //                 type: 'bar',
        //                 barGap: '-100%',
        //                 label: {
        //                     show: true,
        //                     color: '#fff',
        //                     position: 'right', // 标签右对齐
        //                     distance: 0,// 标签距离柱条的距离
        //                     formatter: params => {
        //                         return params.data.realValue + '个'
        //                     }
        //                 }
        //             }
        //         ],
        //         grid: {
        //             x: 70,
        //             y: 10,
        //             x2: 10,
        //             y2: 20
        //         },
        //     }

        //     option && myChart.setOption(option)
        // },

        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')