ECharts 實現地圖散點圖（上）

本文轉載自查看原文 2021-04-21 10:19 418 echarts

轉載來源：https://efe.baidu.com/blog/echarts-map-tutorial

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

一、初始准備

1. 新建html

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

echartsMapDemo/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ECharts map Demo</title>
</head>
<body>
</body>
</html>

2.引入echarts文件

從 echarts官網下載最新完整開發包（目前最新版本是3.1.4）。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
</body>

<script src="/dep/echarts.min.js"></script>

</html>

3.創建圖標容器

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>

 <div id="map-wrap" style="height: 500px;">
 <!-- 這里以后是地圖 -->
 </div>

</body>
<script src="/dep/echarts.min.js"></script>
</html>

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

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

好了，准備工作完成，現在就開始繪制地圖了~

二、繪制地圖

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

引用js格式地圖數據：

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
 <div id="map-wrap" style="height: 500px;">
 <!-- 這里以后是地圖 -->
 </div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/map/js/china.js"></script>

</html>

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 屬性定義該地理坐標系中的地圖數據，這里我們要用 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 配置項手冊），在此不再詳細說明。

樹立目標，保持活力，gogogo！

標簽: echarts

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts實現地圖 mapbox、echarts實現地圖流動效果 react+echarts實現地圖 echarts地圖城市散點圖 vue echarts 實現地圖大氣泡圖 vue + echarts + 百度地圖實現散點圖框選 AngularJS 項目里使用echarts 2.0 實現地圖功能 Echarts實現地圖下鑽+對應區域數據展示+右鍵返回上一級深入淺出ECharts系列（一）地圖+散點圖在vue中調用echarts中的地圖散點圖~