JavaScript資料視覺化:ECharts製作地圖
阿新 • • 發佈：2021-09-01
目錄
- 概述
- 注意事項
- 一. 使用方式
- 二. 實現步驟
- 初步實現程式碼
- 效果：
- geo常見配置
- 添加上面配置之後的效果圖：
- 顯示某一個省份（河南省）
- 效果
- 不同區域顯示不同顏色
- 地圖和散點圖的結合
- 總結
概述
地圖在我們日常的資料視覺化分析中是很常見的一種展示手段，不僅美觀而且很大氣。尤其是在大屏展示中更是扮演著必不可缺的角色
注意事項
一. 使用方式
1.百度地圖API（高德地圖API）
- 需要申請百度API
2.向量地圖
- 需要準備向量地圖資料
二. 實現步驟
1.ECharts最基本的程式碼結構
引入檔案–DOM容器–初始化物件–設定option
2.準備中國的向量地圖json檔案，放到json/map/的目錄下
3.使用Ajax獲取china.json
//
$get('json/map/china.json',function (chinaJson) {})
4.在回撥函式中往echarts全域性物件註冊地圖的json資料
echarts.registerMap('chinaMap',chinaJson)
5.在geo下設定
{
type:'map',map:'chinaMap'
}
初步實現程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name 返回資料chinaJson在瀏覽器後臺輸出截圖：
我們展開某一省份看一下（以臺灣省為例）：
效果：
geo常見配置
允許縮放和拖拽效果
roam: true
名稱顯示
label{
show:true
}
初始縮放比例
zoom: 1.2
設定地圖中心點的座標
// 這個座標點在我們返回的資料裡是可以拿到的
center: [121.509062,25.044332]
新增上面配置之後的效果圖：
顯示某一個省份（河南省）
這裡沒什麼好說的，就是把向量地圖資料由原來的全國換成河南就好
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>地圖-某一區域的展示</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>
效果
不同區域顯示不同顏色
1.顯示基本的中國地圖
2.將空氣質量的資料設定給series下的物件
3.將series下的資料和geo關聯起來
4.配置visualMap
注意：這裡我們需要準備一個數組，這個數組裡面是一個一個物件，每個物件有兩個key值name對應省份名稱，value對應的是顏色值
先看下效果圖是不是很熟悉：
類似於我們的新冠資料圖就是大致這個效果，疫情遠沒有結束，大家一定不要掉以輕心，積極接種疫苗，做好日常防護
程式碼如下，註釋也比較詳細，就不一一解讀了
<!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>地圖的實現</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.將空氣質量的資料設定給series下的物件
* 3.將series下的資料和geo關聯起來
* 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: '浙江',{ name: '江西',value: 96 },{ name: '湖北',value: 273 },{ name: '廣西',value: 59 },{ name: '甘肅',value: 99 },{ name: '山西',value: 39 },{ name: '內蒙古',value: 58 },{ name: '陝西',value: 61 },{ name: '吉林',value: 51 },http://www.cppcns.com { name: '福建',value: 29 },{ name: '貴州',value: 71 },{ name: '廣東',value: 38 },{ name: '青海',value: 57 },{ name: '西藏',value: 24 },{ name: '四川',{ name: www.cppcns.com'寧夏',value: 52 },{ name: '海南',value: 54 },{ name: '臺灣',value: 88 },{ name: '香港',{ name: '澳門',value: 77 },{ name: '南海諸島',value: 55 }
]
var myCharts = echarts.init(document.querySelector('div'))
$.get('./json/map/china.json',function (chinaJson) {
echarts.registerMap('chinaMap',//chinaMap需要和registerMap中的第一個引數保持一致
map: 'chinaMap',// 允許縮放和拖拽效果
roam: true,// 名稱顯示
label:{
show: true
}
},series: [
{
type: 'map',data: airData,geoIndex: 0 //將空氣質量的資料與第0個geo的配置關聯起來
}
],visualMap: {
min: 0,max: 300,inRange: {
// 控制顏色漸變的範圍
color: ['#fff','#f00']
},// 出現滑塊
calculable: true
}
}
myCharts.setOption(option)
})
</script>
</body>
</html>
地圖和散點圖的結合
1.就是給上面的程式碼基礎上，series新增下面這段配置
{
data: scatterData,//配置散點的座標資料
type: 'effectScatter',coordinateSystem: 'geo',//指明散點使用的座標系統 geo的座標系統
rippleEffect: {
scale: 10 //設定漣漪動畫的縮放比例
}
}
效果圖：
總結
本片文章就到這裡了，希望能夠給你帶來幫助，也希望您能www.cppcns.com夠多多關注我們的更多內容!