ECharts 散點圖+百度地圖（案例轉載）

時間 2020-05-31

標籤 echarts 散點圖百度地圖案例轉載简体版

原文原文鏈接

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

ECharts 實現地圖散點圖（下）

小紅 2016-06-13 ECharts, 教程, 地圖

上一篇咱們介紹瞭如何使用 ehcarts 內置地圖實現地圖上繪製的散點圖，這篇中，咱們將講解如何在百度地圖上繪製散點圖。html

1、初始準備

首先要建立 html 和引入 ECharts 包，具體說明詳見上篇：[ECharts 實現地圖散點圖（一）](/2016/04/28/echarts-map-tutorial.html)。git

2、引入echarts百度地圖擴展包

在 github 上下載 ECharts 擴展 bmap.js，放在 /extension/ 目錄下，並引入 html 中：github

<!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="/extension/bmap.js"></script>

</html>

3、繪製地圖

1.在 js 中，新建 ECharts 示例，併爲其設置配置項 option：數組

var bmapChart = echarts.init(document.getElementById('map-wrap'));

var option = {
 // 這裏是 ECharts 的配置項，接下來會說明
}

bmapChart.setOption(option);

2.添加百度地圖：echarts

在 option 中添加 bmap 相關設置：jsp

var option = {
 bmap: {
 center: [116.307698, 40.056975], // 中心位置座標
 zoom: 5, // 地圖縮放比例
 roam: true // 開啓用戶縮放
 }

}

ECharts 將百度地圖部分配置集成在了 bmap 中，包括：ide

參數	說明	格式
center	中心點的百度座標	座標數組, 如：[116.307698, 40.056975]
zoom	初始縮放比	number
roam	是否容許用戶縮放操做	boolean
mapStyle	地圖自定義樣式	object, 如：{ styleJson: [...] }

這樣百度地圖就加載到頁面中了，這裏顯示百度地圖的默認樣式，稍後第四部分將爲百度地圖添加自定義樣式的配置：ui

百度地圖1spa

4、繪製散點圖

繪製散點圖的方法與上篇中繪製散點圖方法相同，須要修改的部分是，將散點圖的座標系 coordinateSystem 改爲使用 bmap

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]},
 ...
]


var option = {
 bmap: {
 ...
 },
 visualMap: { // 視覺映射組件
 type: 'continuous',
 min: 0,
 max: 200,
 calculable: true,
 inRange: {
 color: ['#50a3ba','#eac736','#d94e5d']
 },
 textStyle: {
 color: '#fff'
 }
 }
 series: [
 {
 name: '銷量',
 type: 'scatter',

 coordinateSystem: 'bmap', // 座標系使用bmap

 data: myData
 }
 ]
}

繪製散點後的百度地圖：

百度地圖2

4、自定義百度地圖樣式

地圖的樣式配置 bmap.mapStyle 中 styleJson 與百度地圖內置的樣式配置一致，具體參考百度地圖API開發指南中定製個性地圖章節的介紹。

這裏咱們設置一個較暗色調的地圖,以下：

var option = {
 bmap: {
 center: [116.307698, 40.056975],
 zoom: 5,

 roam: true, // 容許縮放

 mapStyle: { // 百度地圖自定義樣式
 styleJson: [
 // 陸地
 {
 "featureType": "land",
 "elementType": "all",
 "stylers": {
 "color": "#073763"
 }
 },
 // 水系
 {
 "featureType": "water",
 "elementType": "all",
 "stylers": {
 "color": "#073763",
 "lightness": -54
 }
 },
 // 國道與高速
 {
 "featureType": "highway",
 "elementType": "all",
 "stylers": {
 "color": "#45818e"
 }
 },
 // 邊界線
 {
 "featureType": "boundary",
 "elementType": "all",
 "stylers": {
 "color": "#ffffff",
 "lightness": -62,
 "visibility": "on"
 }
 },
 // 行政標註
 {
 "featureType": "label",
 "elementType": "labels.text.fill",
 "stylers": {
 "color": "#ffffff",
 "visibility": "on"
 }
 },
 {
 "featureType": "label",
 "elementType": "labels.text.stroke",
 "stylers": {
 "color": "#444444",
 "visibility": "on"
 }
 }
 ]
 }
 },
 ...
 }

實現效果以下圖：

百度地圖3

除了上述四個配置，其餘地圖設置均可以經過百度地圖提供的API 實現

獲取百度地圖實例的方法以下：

var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地圖實例

例如，咱們能夠爲地圖添加一個縮放控件和一個比例尺：

bmap.addControl(new BMap.NavigationControl()); // 縮放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺

百度地圖4

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。