轉(zhuǎn)載來源：https://efe.baidu.com/blog/echarts-map-tutorial/

ECharts 實現(xiàn)地圖散點圖(上)

小紅?2016-04-28

ECharts 作為國內(nèi)應(yīng)用最廣泛的前端可視化生成工具，提供了豐富的圖表展現(xiàn)方式和便捷的圖表操作。 ECharts 支持 geoJson 格式的地圖，并且官網(wǎng)上提供了現(xiàn)成的 world，china 及全國34個省市自治區(qū)地圖的下載。這篇文章中我們將會講解如何使用 ECharts 實現(xiàn)一個中國地圖上繪制的散點圖。

一、初始準備

1. 新建html

首先，新建項目目錄 echartsMapDemo，在其中新建一個 html 文件?index.html。

echartsMapDemo/index.html:

ECharts map Demo

2.引入echarts文件

從?echarts官網(wǎng)?下載最新完整開發(fā)包(目前最新版本是3.1.4)。

將下載好的包放置在?echartsMapDemo/dep?目錄下并在 html 中以 script 標簽引入：

ECharts map Demo

3.創(chuàng)建圖標容器

在 html 中定義一個 div 作為地圖的容器，高度設(shè)為 500px 。別忘了，一定要保證容器高度不為 0：

ECharts map Demo

然后，我們還需要一個地圖文件，echart 提供兩種格式的地圖數(shù)據(jù)，一種是 js 格式，一種是 JSON 格式。下文中我們會分別使用這兩種方式實現(xiàn)。

同樣去?官網(wǎng)?上下載，這里選擇下載中國地圖 china.js 或 china.json 。你也可以根據(jù)需要選擇其他省份地圖或世界地圖

好了，準備工作完成，現(xiàn)在就開始繪制地圖了~

二、繪制地圖

echart 提供兩種格式的地圖數(shù)據(jù)，一種是 js 格式，一種是 JSON 格式。下面分別介紹兩種格式的用法：

引用js格式地圖數(shù)據(jù)：

1.在官網(wǎng)上下載 js 格式中國地圖 china.js，將下載好的 china.js 放在?echartsMapDemo/map/js?目錄下，以 script 標簽引入到 html 中:

ECharts map Demo

2.在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 屬性定義該地理坐標系中的地圖數(shù)據(jù)，這里我們要用 china.js ，設(shè)置map值為 'china'。

這里需要注意，中國地圖的map值為 'china' ，世界地圖的map值為 'world' ，但如果要引用省市自治區(qū)地圖 map 值為簡體中文，例如 beijing.js，map 值為'北京'。

4.調(diào)用?setOption(option)?為圖表設(shè)置配置項。

mapChart.setOption(option);

引用JSON格式地圖數(shù)據(jù)：

1.同樣在官網(wǎng)下載JSON格式的地圖數(shù)據(jù)，放在echartsMapDemo/map/json目錄下

2.json數(shù)據(jù)通過異步方式加載，加載完成后需要手動注冊地圖

這里我們使用 jQuery 的 $.get() 方法異步加載 china.json (首先要在html中引用 jquery ，這里省略操作說明)，在回調(diào)函數(shù)中，以上述同樣的方法初始化一個 mapCharts 、注冊地圖并設(shè)置 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);

});

});

現(xiàn)在就可以在頁面中看到中國地圖了：

地圖

為了突出散點效果，先為地圖改個顏色

var option = {

geo: {

map: 'china',

itemStyle: {// 定義樣式

normal: {// 普通狀態(tài)下的樣式

areaColor: '#323c48',

borderColor: '#111'

},

emphasis: {// 高亮狀態(tài)下的樣式

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.添加數(shù)據(jù)

ECharts 中 series.data 是定義圖表數(shù)據(jù)內(nèi)容的數(shù)組，其中每個項數(shù)據(jù)格式為：

{

name: '北京', // 數(shù)據(jù)項名稱，在這里指地區(qū)名稱

value: [ // 數(shù)據(jù)項值

116.46, // 地理坐標，經(jīng)度

39.92, // 地理坐標，緯度

340 // 北京地區(qū)的數(shù)值

]

}

首先我們將需要渲染的數(shù)據(jù)轉(zhuǎn)換成上述數(shù)據(jù)格式，存在一個變量中：

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數(shù)據(jù)內(nèi)容

}

]

}

數(shù)據(jù)添加完成，就可以在圖表中看到渲染出的散點了：

散點圖1

3.添加視覺映射組件

視覺映射組件是標識某一數(shù)據(jù)范圍內(nèi)數(shù)據(jù)及顏色對應(yīng)關(guān)系的控件，視覺映射組件分為連續(xù)型和分段型，這里我們選用連續(xù)型?type:continuous?。同時，通過視覺映射組件可以實現(xiàn) ECharts 值域漫游功能，即通過拖拽控件手柄選擇不同數(shù)值范圍，達到對圖表數(shù)據(jù)的篩選顯示。 在?visualMap?屬性中設(shè)置值域控件的相關(guān)配置：

var option = {

...

visualMap: {

type: 'continuous', // 連續(xù)型

min: 0, // 值域最小值，必須參數(shù)

max: 200,// 值域最大值，必須參數(shù)

calculable: true,// 是否啟用值域漫游

inRange: {

color: ['#50a3ba','#eac736','#d94e5d']

// 指定數(shù)值從低到高時的顏色變化

},

textStyle: {

color: '#fff'// 值域控件的文本顏色

}

}

}

添加了值域控件的圖表效果：

散點圖2

這樣一個基于中國地圖的散點圖就基本實現(xiàn)了，如果想要繼續(xù)完善圖表，可以為它添加標題，圖例，高亮提示等控件，配置方式在這里查看(ECharts 配置項手冊)，在此不再詳細說明。

總結(jié)

以上是生活随笔為你收集整理的echarts geo地图示例_ECharts 实现地图散点图上（转载）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。