快捷導(dǎo)航

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

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

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

概述

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

注意事項

一. 使用方式

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

需要申請百度API

2.矢量地圖

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

二. 實現(xiàn)步驟

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

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

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

3.使用Ajax獲取china.json

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

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

echarts.registerMap('chinaMap',chinaJson)

5.在geo下設(shè)置

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

初步實現(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>地圖的實現(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 就是中國的各個省份的矢量地圖數(shù)據(jù)
            // console.log(chinaJson);
            // 注冊地圖數(shù)據(jù)
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap需要和registerMap中的第一個參數(shù)保持一致
                    map: 'chinaMap'
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

返回數(shù)據(jù)chinaJson在瀏覽器后臺輸出截圖：

在這里插入圖片描述

我們展開某一省份看一下（以臺灣省為例）：

在這里插入圖片描述

效果：

在這里插入圖片描述

geo常見配置

允許縮放和拖拽效果

roam: true

名稱顯示

label{
show:true
}

初始縮放比例

zoom: 1.2

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

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

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

在這里插入圖片描述

顯示某一個省份（河南?。?/h2>

這里沒什么好說的，就是把矢量地圖數(shù)據(jù)由原來的全國換成河南就好

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.顯示基本的中國地圖

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

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

4.配置visualMap

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

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

在這里插入圖片描述

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

代碼如下，注釋也比較詳細(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>地圖的實現(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.顯示基本的中國地圖
         * 2.將空氣質(zhì)量的數(shù)據(jù)設(shè)置給series下的對象
         * 3.將series下的數(shù)據(jù)和geo關(guān)聯(lián)起來
         * 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: '臺灣', value: 88 },
            { name: '香港', value: 66 },
            { name: '澳門', 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中的第一個參數(shù)保持一致
                    map: 'chinaMap',
                    // 允許縮放和拖拽效果
                    roam: true,
                    // 名稱顯示
                    label:{
                        show: true
                    }
                },
                series: [
                    {
                        type: 'map',
                        data: airData,
                        geoIndex: 0 //將空氣質(zhì)量的數(shù)據(jù)與第0個geo的配置關(guān)聯(lián)起來
                    }
                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        // 控制顏色漸變的范圍
                        color: ['#fff', '#f00']
                    },
                    // 出現(xiàn)滑塊
                    calculable: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

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

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

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

效果圖：

在這里插入圖片描述