echarts地圖動態加載市縣區數據

需求：需要獲取全省的數據，展示出來，並且點擊可深入到各個省市區，並且滾動滾輪可以退出省級市級

效果：

 

 

 實現：

1、思路：

1-1、通過調用接口獲取地圖json和數據，渲染上去，

1-2、當點擊進入更深層級時，記錄一下上一個層級的參數，方便滾輪退回上一層，然后調用接口獲取地圖json和數據重新渲染。

1-3、退回上一層級時，用上一個層級的參數去調用接口獲取上一層級的地圖json和數據重新渲染

2、代碼

HTML

            <div class="echarts_item">
                <div class="title">
                    <div>{{ $t('home.map') }}</div>
                </div>
                <div class="echarts_center_box">
                    <div ref="map"></div>
                    <div>
                        <div class="table">
                            <el-table stripe size="mini" height="100%" :data="tableData">
                                <el-table-column :label="$t('home.area')" show-overflow-tooltip>
                                    <template v-slot="{ row }">
                                        {{ row.province }}{{ row.city }}{{ row.area }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="orderCount" :label="$t('home.orderCount')"></el-table-column>
                                <el-table-column prop="weight" :label="$t('home.weight')"></el-table-column>
                                <el-table-column prop="price" :label="$t('home.price')"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>

JS

<script>
import * as echarts from 'echarts'
export default {
    name: 'Home',
    data() {
        return {
　　　　　　　tableData:[],
            mapData: {},
            province: "",
            parentCode: "",
            parentName: "",
            zoom: 1.2,
            parentList: [],
            backMap: null,
}}，
mounted(){
this.china()
},
methods:{
        china(code = 100000, name = 'province') {
            //獲取虛擬dom節點
            let myChart = echarts.init(this.$refs.map);
            //請求json
            this.ajax.get(`/admin/index/getMapJson?code=${code}`).then(chinaStr => {
                //轉化json
                let china = JSON.parse(chinaStr)
                //設置當前地圖的區域數據
                this.mapData = china.features.map(e => {
                    return {
                        name: e.properties.name,
                        adcode: e.properties.adcode,
                        level: e.properties.level,
                        parent: e.properties.parent?.adcode
                    }
                })
                //判斷省市區層級傳code
                let form = ""
                if (code == 100000) {
                    form = "&unit=" + name
                } else if (china.features[0].properties.level == 'city') {
                    form = "&unit=city&province=" + name
                } else if (china.features[0].properties.level == 'district') {
                    if (this.province) {
                        form = `&unit=area&city=${name}&province=${this.province}`
                    }
                }
                //獲取數據
                this.ajax.get(`/admin/index/getOrderMapList?type=price${form}`).then(res => {
                    //去除監聽
                    myChart.off('click', this.clickMap)
                    myChart.off('georoam', this.georoamMap)
                    //獲取上一級code,name
                    if (!this.parentList.map(e => e.parentCode).includes(code)) {
                        let obj = {
                            parentName: name,
                            parentCode: code
                        }
                        this.parentList.push(obj)
                    }
                    //表格數據
                    this.tableData = res
                    this.province = res[0]?.province
                    //把json導入echarts
                    echarts.registerMap('china', china);
                    let option = {
                        visualMap: {
                            top: "0px",
                            left: 'right',
                            min: 0,
                            max: 1000,
                            inRange: {
                                color: ['#E3F1FC', '#B4E3FA', '#62C5F6', '#2998E8']
                            },
                            // text: ['高', '低'],// 文本，默認為數值文本
                            calculable: true
                        },
                        series: [
                            {
                                type: 'map',
                                roam: true,
                                map: 'china',
                                layoutCenter: ['50%', '70%'],
                                layoutSize: '100%',
                                itemStyle: {
                                    borderColor: "#fff"
                                },
                                label: {//地圖默認的文本屬性
                                    show: false,
                                    color: '#2998E8',
                                },
                                select: {//選中的區域文本屬性
                                    label: {
                                        color: "#2998E8"
                                    },
                                    itemStyle: {
                                        color: "#3066ba"
                                    }
                                },
                                emphasis: {//高亮的區域文本屬性
                                    itemStyle: {
                                        areaColor: '#3066ba',
                                    },
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#2998E8'
                                        }
                                    }
                                },
                                zoom: 1.2,
                                // 文本位置修正
                                textFixed: {
                                    Alaska: [20, -20]
                                },
                                data: res.map(e => {//地圖數據
                                    if (e.area) {
                                        return { "name": e.area, "value": e.price }
                                    } else if (e.city) {
                                        return { "name": e.city, "value": e.price }
                                    } else if (e.province) {
                                        return { "name": e.province, "value": e.price }
                                    }
                                })
                            }
                        ]
                    }
                    //渲染地圖
                    myChart.setOption(option);
                    //監聽點擊和滾輪放大縮小事件
                    myChart.on('click', this.clickMap)
                    myChart.on('georoam', this.georoamMap)

                })
            })
        },
        georoamMap(e) {
            //只有縮小才觸發退后
            if (this.zoom > e.zoom && this.parentList.length > 1) {
                //利用防抖防止頻繁調用返回接口
                clearTimeout(this.backMap);
                this.backMap = setTimeout(() => {
                    //去掉當前層級
                    let index = this.parentList.length - 1
                    this.parentList.splice(index, 1)
                    //重新獲取上一層級進行跳轉
                    index = this.parentList.length - 1
                    this.china(this.parentList[index].parentCode, this.parentList[index].parentName)
                }, 500);
            }
            this.zoom = e.zoom
        },
        clickMap(e) {
            //獲取深入的層級參數調用接口
            let code = this.mapData.find(el => el.name == e.name).adcode
            this.china(code, e.name)
        },
}
}
</script>