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ù)圖就是大致這個效果，疫情遠沒有結(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è)置漣漪動畫的縮放比例
}
}
效果圖：
總結(jié)
本片文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
需正確使用new和spring，注意兩者的區(qū)別2009-03-03
微信小程序如何設(shè)置基本的頁面樣式，做出用戶界面UI
這篇文章主要介紹了微信小程序如何設(shè)置基本的頁面樣式，做出用戶界面UI。如何為這個頁面添加樣式，使它看上去更美觀，教大家寫出實際可以使用的頁面。2022-12-12
下面小編就為大家分享一篇js 實現(xiàn)復(fù)選框只能選擇一項的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
用js實現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面
用js實現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面，需要的朋友可以參考下。2011-05-05
封裝好的省市地區(qū)聯(lián)動控件附下載...2007-08-08
軟件中的“記住密碼”選框不知道大家平時會不會勾選，反正對于一個重度懶癌患者的我來說就沒有不勾選的時候，畢竟隔一段時間就重新輸入一遍難記又難輸?shù)馁~號密碼，想想就讓人頭皮發(fā)麻。今天教大家用代碼在微信小程序中實現(xiàn)這個簡單的小功能2023-01-01
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。2011-08-08
神級程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音
這篇文章主要介紹了神級程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音,需要的朋友可以參考下2017-05-05
javascript實現(xiàn)的listview效果...2007-04-04