echarts geo地图示例_ECharts 实现地图散点图上（转载）
轉載來源：https://efe.baidu.com/blog/echarts-map-tutorial/
ECharts 實現地圖散點圖(上)
小紅?2016-04-28
ECharts 作為國內應用最廣泛的前端可視化生成工具，提供了豐富的圖表展現方式和便捷的圖表操作。 ECharts 支持 geoJson 格式的地圖，并且官網上提供了現成的 world，china 及全國34個省市自治區地圖的下載。這篇文章中我們將會講解如何使用 ECharts 實現一個中國地圖上繪制的散點圖。
一、初始準備
1. 新建html
首先，新建項目目錄 echartsMapDemo，在其中新建一個 html 文件?index.html。
echartsMapDemo/index.html:
ECharts map Demo2.引入echarts文件
從?echarts官網?下載最新完整開發包(目前最新版本是3.1.4)。
將下載好的包放置在?echartsMapDemo/dep?目錄下并在 html 中以 script 標簽引入：
ECharts map Demo3.創建圖標容器
在 html 中定義一個 div 作為地圖的容器，高度設為 500px 。別忘了，一定要保證容器高度不為 0：
ECharts map Demo然后，我們還需要一個地圖文件，echart 提供兩種格式的地圖數據，一種是 js 格式，一種是 JSON 格式。下文中我們會分別使用這兩種方式實現。
同樣去?官網?上下載，這里選擇下載中國地圖 china.js 或 china.json 。你也可以根據需要選擇其他省份地圖或世界地圖
好了，準備工作完成，現在就開始繪制地圖了~
二、繪制地圖
echart 提供兩種格式的地圖數據，一種是 js 格式，一種是 JSON 格式。下面分別介紹兩種格式的用法：
引用js格式地圖數據：
1.在官網上下載 js 格式中國地圖 china.js，將下載好的 china.js 放在?echartsMapDemo/map/js?目錄下，以 script 標簽引入到 html 中:
ECharts map Demo2.在js中用?echarts.init()?方法初始化一個 ECharts 實例，在 init() 中傳入圖表容器 Dom 對象，
同時定義一個變量?option，作為圖表的配置項：
// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
};
3.通過配置 option，新建一個地理坐標系?geo?，地圖類型為中國地圖。
var option = {
geo: {
map: 'china'
}
}
geo.map 屬性定義該地理坐標系中的地圖數據，這里我們要用 china.js ，設置map值為 'china'。
這里需要注意，中國地圖的map值為 'china' ，世界地圖的map值為 'world' ，但如果要引用省市自治區地圖 map 值為簡體中文，例如 beijing.js，map 值為'北京'。
4.調用?setOption(option)?為圖表設置配置項。
mapChart.setOption(option);
引用JSON格式地圖數據：
1.同樣在官網下載JSON格式的地圖數據，放在echartsMapDemo/map/json目錄下
2.json數據通過異步方式加載，加載完成后需要手動注冊地圖
這里我們使用 jQuery 的 $.get() 方法異步加載 china.json (首先要在html中引用 jquery ，這里省略操作說明)，在回調函數中，以上述同樣的方法初始化一個 mapCharts 、注冊地圖并設置 option：
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson); // 注冊地圖
var mapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
geo: {
map: 'china'
}
}
mapChart.setOption(option);
});
});
現在就可以在頁面中看到中國地圖了：
地圖
為了突出散點效果，先為地圖改個顏色
var option = {
geo: {
map: 'china',
itemStyle: {// 定義樣式
normal: {// 普通狀態下的樣式
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {// 高亮狀態下的樣式
areaColor: '#2a333d'
}
}
},
backgroundColor: '#404a59', // 圖表背景色
}
換裝后的地圖：
中國地圖底圖
三、繪制散點圖
1.新建散點圖series
在 option 中添加一個 series ， series 的類型為散點圖?scatter?，坐標系為地理坐標系?geo?。
var option = {
geo: {
...
},
backgroundColor: '#404a59',
series: [
{
name: '銷量', // series名稱
type: 'scatter', // series圖表類型
coordinateSystem: 'geo' // series坐標系類型
}
]
}
2.添加數據
ECharts 中 series.data 是定義圖表數據內容的數組，其中每個項數據格式為：
{
name: '北京', // 數據項名稱，在這里指地區名稱
value: [ // 數據項值
116.46, // 地理坐標，經度
39.92, // 地理坐標，緯度
340 // 北京地區的數值
]
}
首先我們將需要渲染的數據轉換成上述數據格式，存在一個變量中：
var myData = [
{name: '海門', value: [121.15, 31.89, 90]},
{name: '鄂爾多斯', value: [109.781327, 39.608266, 120]},
{name: '招遠', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]},
...
]
然后，將 myData 賦值給 series.data：
var option = {
geo: {
...
},
backgroundColor: '#404a59',
series: [
{
name: '銷量',
type: 'scatter',
coordinateSystem: 'geo',
data: myData // series數據內容
}
]
}
數據添加完成，就可以在圖表中看到渲染出的散點了：
散點圖1
3.添加視覺映射組件
視覺映射組件是標識某一數據范圍內數據及顏色對應關系的控件，視覺映射組件分為連續型和分段型，這里我們選用連續型?type:continuous?。同時，通過視覺映射組件可以實現 ECharts 值域漫游功能，即通過拖拽控件手柄選擇不同數值范圍，達到對圖表數據的篩選顯示。 在?visualMap?屬性中設置值域控件的相關配置：
var option = {
...
visualMap: {
type: 'continuous', // 連續型
min: 0, // 值域最小值，必須參數
max: 200,// 值域最大值，必須參數
calculable: true,// 是否啟用值域漫游
inRange: {
color: ['#50a3ba','#eac736','#d94e5d']
// 指定數值從低到高時的顏色變化
},
textStyle: {
color: '#fff'// 值域控件的文本顏色
}
}
}
添加了值域控件的圖表效果：
散點圖2
這樣一個基于中國地圖的散點圖就基本實現了，如果想要繼續完善圖表，可以為它添加標題，圖例，高亮提示等控件，配置方式在這里查看(ECharts 配置項手冊)，在此不再詳細說明。
總結
以上是生活随笔為你收集整理的echarts geo地图示例_ECharts 实现地图散点图上（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python自动刷快手视频脚本_pyth
- 下一篇： VBA 添加日历控件的操作