vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級(jí)+點(diǎn)擊空白處回退功能

更新時(shí)間：2024年05月16日 09:11:30 作者：sunshine233

這篇文章主要介紹了vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級(jí)+點(diǎn)擊空白處回退,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

先驗(yàn)知識(shí)：

vue2中echarts的安裝和顯示中國地圖：http://m.dhdzp.com/javascript/321196ahi.htm

鼠標(biāo)事件： https://echarts.apache.org/zh/api.html#echartsInstance.on

echarts.getMap()：https://echarts.apache.org/zh/api.html#echarts.getMap

監(jiān)聽“空白處”的事件：https://echarts.apache.org/handbook/zh/concepts/event/#%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6

npm 安裝 echarts4.9（全局引入不支持5.0）

運(yùn)行效果（只做了河南的點(diǎn)擊和后退）：

實(shí)現(xiàn)思路：

1. 引入地圖并顯示

// 1. 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
this.myChart = this.$echarts.init(this.$refs.myChart);
// 2. 引入要顯示的地圖 json 文件（json文件可以是echart自帶的，也可以是自己下載的）
this.mapJson = require("echarts/map/json/china.json");
// 3. 注冊(cè)可用的地圖 registerMap("自定義的名字，要和option中map:''對(duì)應(yīng)",注冊(cè)的地圖指向的json文件)
this.$echarts.registerMap("mapJson", this.mapJson);
// 4. 指定圖表的配置項(xiàng)和數(shù)據(jù)
this.option = {
    geo: {
        type: "map",
        map: "mapJson",//這里的數(shù)據(jù)會(huì)變，"這里是引入的存儲(chǔ)json文件的變量名"
        label: {
            normal: {
                color: "#000000",
                show: true, //顯示省份名稱
            },
        },
    },
    series: [
        {
            name: "在地圖中顯示散點(diǎn)圖",
            type: "scatter",
            coordinateSystem: "geo", //設(shè)置坐標(biāo)系為 geo
            data: [
                //這里放標(biāo)注點(diǎn)的坐標(biāo)[{name: "北京",value: [116.46, 39.92]}]
            ],
        },
    ],
};
// 5. 設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過 setOption 完成，ECharts 會(huì)合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。
this.myChart.setOption(this.option);

2. 地圖顯示的是“中國”還是“省”還是“市區(qū)”主要就是靠引入的json文件區(qū)分，
也就是 this.mapJson = require("echarts/map/json/china.json"); 的mapJson，
然后 this.$echarts.registerMap("mapJson", this.mapJson); 注冊(cè)一下修改后的文件，
this.myChart.setOption(this.option); 地圖即可重新顯示新的地區(qū)。

3. 怎么確定 this.mapJson 引入的哪個(gè)文件呢？添加地圖的監(jiān)聽事件后，可以獲取一個(gè)code值，用這個(gè)code值判斷應(yīng)該引入哪個(gè)省市的文件。點(diǎn)擊空白處回退同理，只需要確定應(yīng)該回退層級(jí)的code值，就可以由此判斷應(yīng)該回退到哪個(gè)層級(jí)頁面了。

全部代碼如下：

<template>
    <div id="app">
        <div id="myChart" ref="myChart"></div>
        <el-button type="success" @click="cancelEchartsEvent">點(diǎn)擊取消on事件</el-button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myChart: null,
            mapJson: null,
            option: {},
            curArea: {
                code: -1,
                name: ""
            },
        };
    },
    mounted() {
        this.initEchartParams();
        this.addMouseClick();//開啟 echarts 事件監(jiān)聽
    },
    beforeDestroy() {
        this.cancelEchartsEvent();
    },
    methods: {
        cancelEchartsEvent() {
            console.log("頁面卸載前，取消 echarts 的事件監(jiān)聽");
            this.myChart.off("click");
        },
        initEchartParams() {
            // 1. 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
            this.myChart = this.$echarts.init(this.$refs.myChart);
            // 2. 引入要顯示的地圖 json 文件（json文件可以是echart自帶的，也可以是自己下載的）
            this.mapJson = require("echarts/map/json/china.json");
            // 3. 注冊(cè)可用的地圖 registerMap("自定義的名字，要和option中map:''對(duì)應(yīng)",注冊(cè)的地圖指向的json文件)
            this.$echarts.registerMap("mapJson", this.mapJson);
            // 4. 指定圖表的配置項(xiàng)和數(shù)據(jù)
            this.option = {
                geo: {
                    type: "map",
                    map: "mapJson",//這里的數(shù)據(jù)會(huì)變，"這里是引入的存儲(chǔ)json文件的變量名"
                    label: {
                        normal: {
                            color: "#000000",
                            show: true, //顯示省份名稱
                        },
                    },
                },
                series: [
                    {
                        name: "在地圖中顯示散點(diǎn)圖",
                        type: "scatter",
                        coordinateSystem: "geo", //設(shè)置坐標(biāo)系為 geo
                        data: [
                            //這里放標(biāo)注點(diǎn)的坐標(biāo)[{name: "北京",value: [116.46, 39.92]}]
                            { name: "鄭州", value: [113.665412, 34.757975] },
                            { name: "北京", value: [116.41995, 40.18994] },
                            { name: "天津", value: [117.205126, 39.034933] },
                            { name: "昆明", value: [102.81844, 24.906231] },
                            { name: "廣州", value: [113.26453, 23.155008] },
                        ],
                    },
                ],
            };
            // 5. 設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過 setOption 完成，ECharts 會(huì)合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。
            this.myChart.setOption(this.option);
        },
        addMouseClick() {
            this.addClickInMap();
            this.addClickInBlank();
        },
        // 點(diǎn)擊了地圖非空白處
        addClickInMap() {
            // echarts.getMap 獲取已注冊(cè)的地圖
            const maps = this.$echarts.getMap("mapJson").geoJson.features;
            console.log({ maps });
            this.myChart.on("click", (res) => {
                let clickArea = maps.find(map => map.properties.name == res.name);
                // console.log({ clickArea });
                if (!clickArea) {
                    // 如果點(diǎn)的不是地圖，而是地圖上的散點(diǎn)，什么也不做
                    return;
                }
                this.curArea.code = clickArea.id;
                this.curArea.name = res.name;
                console.log("當(dāng)前點(diǎn)擊的是: " + this.curArea.name + " this.curArea.code：" + this.curArea.code);
                // 修改 mapJson 的數(shù)值
                this.configGeoMap(this.curArea.code);
            });
        },
        // 點(diǎn)擊了地圖空白處
        addClickInBlank() {
            this.myChart.getZr().on('click', (event) => {
                // !event.target 不存在 證明點(diǎn)擊的地方是地圖空白處
                if (!event.target) {
                    let preCode = -1;
                    const curAreaCode = this.curArea.code;
                    console.log("回退前地區(qū)code ", curAreaCode);
                    if (curAreaCode == "100000") {//當(dāng)前在中國，不回退
                        console.log("當(dāng)前地圖已經(jīng)是 china， 不可回退！");
                        return;
                    } else if (curAreaCode % 10000 == 0) {//說明當(dāng)前在省，回退到 china
                        preCode = 100000;
                    } else if (curAreaCode % 100 == 0) {////說明當(dāng)前在 鄭州市，回退到 河南省
                        preCode = curAreaCode - curAreaCode % 10000;
                    } else {
                        preCode = curAreaCode - curAreaCode % 100; //回退到city
                    }
                    // 回退后，當(dāng)前顯示地圖的code就是preCode
                    this.curArea.code = preCode;
                    console.log('點(diǎn)擊了空白處，回退后地區(qū) code:' + preCode);
                    this.configGeoMap(preCode);
                }
            });
        },
        // 修改 mapJson 的數(shù)值
        configGeoMap(code) {
            // 這里要根據(jù)code值找到對(duì)應(yīng)的json文件，如果是從服務(wù)器獲取，也是找到對(duì)應(yīng)的json文件即可
            // 這里我用的是 用npm安裝echarts@4.9.0 時(shí)自動(dòng)下載的文件 
            if (code == "100000") {
                this.mapJson = require("echarts/map/json/china.json");
            } else if (code == "410000") {
                this.mapJson = require("echarts/map/json/province/henan.json");
            } else {
                console.log('除了河南外，其它地區(qū)暫時(shí)不能跳轉(zhuǎn)');
            }
            this.$echarts.registerMap("mapJson", this.mapJson);
            this.myChart.setOption(this.option);
        }
    }
}
</script>
<style scoped>
#myChart {
    width: 100%;
    height: 500px;
    background-color: #f1f3f4;
}
button {
    margin: 20px;
}
</style>

到此這篇關(guān)于vue2 使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級(jí)+點(diǎn)擊空白處回退功能的文章就介紹到這了,更多相關(guān)vue2 echarts地圖點(diǎn)擊進(jìn)入下一層級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: