快捷導(dǎo)航

JavaScript數(shù)據(jù)可視化:ECharts制作地圖

更新時(shí)間：2021年08月31日 15:58:17 作者：云墨-款哥的博客

這篇文章主要介紹了Echarts實(shí)現(xiàn)可視化地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

概述

地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見(jiàn)的一種展示手段，不僅美觀而且很大氣。尤其是在大屏展示中更是扮演著必不可缺的角色

注意事項(xiàng)

一. 使用方式

1.百度地圖API（高德地圖API）

需要申請(qǐng)百度API

2.矢量地圖

需要準(zhǔn)備矢量地圖數(shù)據(jù)

二. 實(shí)現(xiàn)步驟

1.ECharts最基本的代碼結(jié)構(gòu)

引入js文件–DOM容器–初始化對(duì)象–設(shè)置option

2.準(zhǔn)備中國(guó)的矢量地圖json文件，放到j(luò)son/map/的目錄下

3.使用Ajax獲取china.json

//
$get('json/map/china.json',function (chinaJson) {})

4.在回調(diào)函數(shù)中往echarts全局對(duì)象注冊(cè)地圖的json數(shù)據(jù)

echarts.registerMap('chinaMap',chinaJson)

5.在geo下設(shè)置

{
    type:'map',
    map:'chinaMap'
}

初步實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地圖的實(shí)現(xiàn)</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', function (chinaJson) {
            // chinaJson 就是中國(guó)的各個(gè)省份的矢量地圖數(shù)據(jù)
            // console.log(chinaJson);
            // 注冊(cè)地圖數(shù)據(jù)
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致
                    map: 'chinaMap'
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

返回?cái)?shù)據(jù)chinaJson在瀏覽器后臺(tái)輸出截圖：

在這里插入圖片描述

我們展開(kāi)某一省份看一下（以臺(tái)灣省為例）：

在這里插入圖片描述

效果：

在這里插入圖片描述

geo常見(jiàn)配置

允許縮放和拖拽效果

roam: true

名稱(chēng)顯示

label{
show:true
}

初始縮放比例

zoom: 1.2

設(shè)置地圖中心點(diǎn)的坐標(biāo)

// 這個(gè)坐標(biāo)點(diǎn)在我們返回的數(shù)據(jù)里是可以拿到的
center: [121.509062, 25.044332]

添加上面配置之后的效果圖：

在這里插入圖片描述

顯示某一個(gè)省份（河南?。?/h2>

這里沒(méi)什么好說(shuō)的，就是把矢量地圖數(shù)據(jù)由原來(lái)的全國(guó)換成河南就好

PS：款哥是河南的，所以用了河南省舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地圖-某一區(qū)域的展示</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('json/map/henan.json',(ret) => {
            echarts.registerMap('henanMap', ret)
            console.log(ret);
            var option = {
                geo:{
                    type:'map',
                    map:'henanMap',
                    zoom: 1,
                    label: {
                        show: true
                    },
                    center: [115.650497, 34.437054],
                    roam: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

效果

在這里插入圖片描述

不同區(qū)域顯示不同顏色

1.顯示基本的中國(guó)地圖

2.將空氣質(zhì)量的數(shù)據(jù)設(shè)置給series下的對(duì)象

3.將series下的數(shù)據(jù)和geo關(guān)聯(lián)起來(lái)

4.配置visualMap

注意：這里我們需要準(zhǔn)備一個(gè)數(shù)組，這個(gè)數(shù)組里面是一個(gè)一個(gè)對(duì)象，每個(gè)對(duì)象有兩個(gè)key值name對(duì)應(yīng)省份名稱(chēng)，value對(duì)應(yīng)的是顏色值

先看下效果圖是不是很熟悉：

在這里插入圖片描述

類(lèi)似于我們的新冠數(shù)據(jù)圖就是大致這個(gè)效果，疫情遠(yuǎn)沒(méi)有結(jié)束，大家一定不要掉以輕心，積極接種疫苗，做好日常防護(hù)

代碼如下，注釋也比較詳細(xì)，就不一一解讀了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地圖的實(shí)現(xiàn)</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        /**
         * 1.顯示基本的中國(guó)地圖
         * 2.將空氣質(zhì)量的數(shù)據(jù)設(shè)置給series下的對(duì)象
         * 3.將series下的數(shù)據(jù)和geo關(guān)聯(lián)起來(lái)
         * 4.配置visualMap
         */
        var airData = [
            { name: '北京', value: 39.92 },
            { name: '天津', value: 39.13 },
            { name: '上海', value: 31.22 },
            { name: '重慶', value: 66 },
            { name: '河北', value: 147 },
            { name: '河南', value: 113 },
            { name: '云南', value: 25.04 },
            { name: '遼寧', value: 50 },
            { name: '黑龍江', value: 114 },
            { name: '湖南', value: 175 },
            { name: '安徽', value: 117 },
            { name: '山東', value: 92 },
            { name: '新疆', value: 84 },
            { name: '江蘇', value: 67 },
            { name: '浙江', value: 84 },
            { name: '江西', value: 96 },
            { name: '湖北', value: 273 },
            { name: '廣西', value: 59 },
            { name: '甘肅', value: 99 },
            { name: '山西', value: 39 },
            { name: '內(nèi)蒙古', value: 58 },
            { name: '陜西', value: 61 },
            { name: '吉林', value: 51 },
            { name: '福建', value: 29 },
            { name: '貴州', value: 71 },
            { name: '廣東', value: 38 },
            { name: '青海', value: 57 },
            { name: '西藏', value: 24 },
            { name: '四川', value: 58 },
            { name: '寧夏', value: 52 },
            { name: '海南', value: 54 },
            { name: '臺(tái)灣', value: 88 },
            { name: '香港', value: 66 },
            { name: '澳門(mén)', value: 77 },
            { name: '南海諸島', value: 55 }
        ]
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', function (chinaJson) {
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致
                    map: 'chinaMap',
                    // 允許縮放和拖拽效果
                    roam: true,
                    // 名稱(chēng)顯示
                    label:{
                        show: true
                    }
                },
                series: [
                    {
                        type: 'map',
                        data: airData,
                        geoIndex: 0 //將空氣質(zhì)量的數(shù)據(jù)與第0個(gè)geo的配置關(guān)聯(lián)起來(lái)
                    }
                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        // 控制顏色漸變的范圍
                        color: ['#fff', '#f00']
                    },
                    // 出現(xiàn)滑塊
                    calculable: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

地圖和散點(diǎn)圖的結(jié)合

1.就是給上面的代碼基礎(chǔ)上，series添加下面這段配置

{
     data: scatterData,  //配置散點(diǎn)的坐標(biāo)數(shù)據(jù)
     type: 'effectScatter',
     coordinateSystem: 'geo', //指明散點(diǎn)使用的坐標(biāo)系統(tǒng)  geo的坐標(biāo)系統(tǒng)
     rippleEffect: {
          scale: 10  //設(shè)置漣漪動(dòng)畫(huà)的縮放比例
     }
}

效果圖：

在這里插入圖片描述