資料可視化----ECharts—地圖（七）
概述
地圖在我們日常的資料可視化分析中是很常見的一種展示手段，不僅美觀而且很大氣。尤其是在大屏展示中更是扮演着必不可缺的角色
Echarts系列文章
| 标題 | 位址 |
|---|---|
| Echarts初體驗 | 傳送門 |
| Echarts通用配置 | 傳送門 |
| 柱狀圖 | 傳送門 |
| 折線圖 | 傳送門 |
| 散點圖 | 傳送門 |
| 餅圖 | 傳送門 |
| Echarts官網 | 傳送門 |
注意事項
一. 使用方式
- 百度地圖API（高德地圖API）
- 需要申請百度API
- 矢量地圖
- 需要準備矢量地圖資料
二. 實作步驟
- ECharts最基本的代碼結構
引入js檔案–DOM容器–初始化對象–設定option
- 準備中國的矢量地圖json檔案，放到json/map/的目錄下
- 使用Ajax擷取china.json
//
$get('json/map/china.json',function (chinaJson) {})
- 在回調函數中往echarts全局對象注冊地圖的json資料
- 在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="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/china.json', function (chinaJson) {
// chinaJson 就是中國的各個省份的矢量地圖資料
// console.log(chinaJson);
// 注冊地圖資料
echarts.registerMap('chinaMap',chinaJson)
var option = {
geo:{
type: 'map',
//chinaMap需要和registerMap中的第一個參數保持一緻
map: 'chinaMap'
}
}
myCharts.setOption(option)
})
</script>
</body>
</html>
傳回資料chinaJson在浏覽器背景輸出截圖：
我們展開某一省份看一下（以台灣省為例）：
效果：
geo常見配置
- 允許縮放和拖拽效果
- 名稱顯示
label{
show:true
}
- 初始縮放比例
- 設定地圖中心點的坐标
// 這個坐标點在我們傳回的資料裡是可以拿到的
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>
效果
不同區域顯示不同顔色
- 顯示基本的中國地圖
- 将空氣品質的資料設定給series下的對象
- 将series下的資料和geo關聯起來
-
配置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: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '廣西', value: 59 },
{ name: '甘肅', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', 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中的第一個參數保持一緻
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>
地圖和散點圖的結合
- 就是給上面的代碼基礎上，series添加下面這段配置
{
data: scatterData, //配置散點的坐标資料
type: 'effectScatter',
coordinateSystem: 'geo', //指明散點使用的坐标系統 geo的坐标系統
rippleEffect: {
scale: 10 //設定漣漪動畫的縮放比例
}
}
效果圖：