Echart--百度地圖（散點圖）

来源:http://www.cnblogs.com/qq765065332/archive/2017/11/10/7794981.html
-Advertisement-
Play Games

參考：http://blog.csdn.net/xieweikun7/article/details/52766676 1、首先，下載嘛 Echarts http://echarts.baidu.com/download.html 百度地圖 http://lbsyun.baidu.com/ >>>> ...


參考：http://blog.csdn.net/xieweikun7/article/details/52766676

1、首先，下載嘛

　　Echarts　　http://echarts.baidu.com/download.html

　　百度地圖　　http://lbsyun.baidu.com/　　>>>>　　功能與服務>>>>地圖>>>>獲取密鑰>>>>按提示操作

 

2、引入插件

1 <script type="text/javascript" src="echarts.min.js"></script>
2 <script type="text/javascript" src="bmap.js"></script>　
3 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=？"></script>
　　問號處是你獲取的密鑰   3、開始寫js 　　設置地圖高度為寬的9/16，高度不能沒有，沒有高度地圖顯示不出來，高是多少你隨意 　　$('#statistics-map').height($('#statistics-map').width() * 8 / 16);   4、var geoCoordMap={‘北京市’: [116.395645, 39.929986],...} 　　設置坐標經緯度Echarts實例就是寫死的，我的也是寫死的，要活的也行，在百度地圖開發平臺下載一個 　　http://lbsyun.baidu.com/index.php?title=open/dev-res 　　這是我能找到最全的，不過數據和var geoCoordMap{}不太一樣，後面寫方法的時候可以自己調   5、var data={} 　　設置你的數據，當然了，寫死也行，通過後臺傳值也行，但一定要有，畢竟沒有數據就沒有意義了   6、我的地圖基本上是從Echart實例拷貝過來的，做了一點修改，符合自己的項目要求，其中的註釋其實大多是英文的中文翻譯，英語好的挑不懂的看 
  1 var option = {
  2     title: {　　//標題
  3         text: '',　　
  4         subtext: '',　　//副標題
  5         sublink: '',　　//副標題鏈接
  6         left: 'center'　　//標題位置，居中
  7     },
  8     tooltip: {　　//工具提示
  9         trigger: 'item'     // 觸發類型，預設數據觸發，見下圖，可選為：'item' | 'axis'
 10     },
 11     bmap: {　　//百度地圖的設置
 12         center: [106.23248, 37.48644],　　//中心點
 13         zoom: 5,　　　　　　　　　//縮放　　　　　　　
 14         roam: true,　　　　　　//漫游
 15         mapStyle: {　　//地圖樣式
 16             styleJson: [{
 17                     "featureType": "water",　　//水
 18                     "elementType": "all",　　　　//feature是特征，element是元素
 19                     "stylers": {
 20                         "color": "#044161"
 21                     }
 22                 },
 23                 {
 24                     "featureType": "land",　　//陸地
 25                     "elementType": "all",
 26                     "stylers": {
 27                         "color": "#004981"
 28                     }
 29                 },
 30                 {
 31                     "featureType": "boundary",　　//邊界
 32                     "elementType": "geometry",
 33                     "stylers": {
 34                         "color": "#064f85"
 35                     }
 36                 },
 37                 {
 38                     "featureType": "railway",　　//鐵路
 39                     "elementType": "all",
 40                     "stylers": {
 41                         "visibility": "off"
 42                     }
 43                 },
 44                 {
 45                     "featureType": "highway",　　//高速及國道
 46                     "elementType": "geometry",　　//幾何（圖形）
 47                     "stylers": {
 48                         "color": "#004981"
 49                     }
 50                 },
 51                 {
 52                     "featureType": "highway",　　
 53                     "elementType": "geometry.fill",　　//幾何填充
 54                     "stylers": {
 55                         "color": "#005b96",
 56                         "lightness": 1
 57                     }
 58                 },
 59                 {
 60                     "featureType": "highway",
 61                     "elementType": "labels",　　　　//標簽
 62                     "stylers": {
 63                         "visibility": "off"
 64                     }
 65                 },
 66                 {
 67                     "featureType": "arterial",　　//城市主路
 68                     "elementType": "geometry",
 69                     "stylers": {
 70                         "color": "#004981"
 71                     }
 72                 },
 73                 {
 74                     "featureType": "arterial",
 75                     "elementType": "geometry.fill",
 76                     "stylers": {
 77                         "color": "#00508b"
 78                     }
 79                 },
 80                 {
 81                     "featureType": "poi",　　//定位
 82                     "elementType": "all",
 83                     "stylers": {
 84                         "visibility": "off"
 85                     }
 86                 },
 87                 {
 88                     "featureType": "green",　　//綠地
 89                     "elementType": "all",
 90                     "stylers": {
 91                         "color": "#056197",
 92                         "visibility": "off"
 93                     }
 94                 },
 95                 {
 96                     "featureType": "subway",　　//地鐵
 97                     "elementType": "all",
 98                     "stylers": {
 99                         "visibility": "off"
100                     }
101                 },
102                 {
103                     "featureType": "manmade",//人造區域
104                     "elementType": "all",
105                     "stylers": {
106                         "visibility": "off"
107                     }
108                 },
109                 {
110                     "featureType": "local",//普通道路
111                     "elementType": "all",
112                     "stylers": {
113                         "visibility": "off"
114                     }
115                 },
116                 {
117                     "featureType": "arterial",
118                     "elementType": "labels",
119                     "stylers": {
120                         "visibility": "off"
121                     }
122                 },
123                 {
124                     "featureType": "boundary",
125                     "elementType": "geometry.fill",
126                     "stylers": {
127                         "color": "#029fd4"
128                     }
129                 },
130                 {
131                     "featureType": "building",　　//建築物
132                     "elementType": "all",
133                     "stylers": {
134                         "color": "#1a5787"
135                     }
136                 },
137                 {
138                     "featureType": "label",//標簽
139                     "elementType": "all",
140                     "stylers": {
141                         "visibility": "off"
142                     }
143                 }
144             ]
145         }
146     },
147     series: [{　　//展示數據的分類系列
148             name: '校友分佈',　　//名稱
149             type: 'scatter',　　//類型
150             coordinateSystem: 'bmap',　　//坐標系，使用上面定義的bmap
151             data: {},　　//數據，這裡設置空，等請求後臺傳過來數據之後再賦上
152             symbolSize: function(val) {　　//數據顯示的符號的大小
153                 return val[2];　　//直徑？半徑？長度
154             },
155             label: {　　//標簽
156                 normal: {
157                     formatter: '{b}',　　//格式化
158                     position: 'right',　　標簽顯示位置
159                     show: false　　　　//是否顯示
160                 },
161                 emphasis: {　　//強調
162                     show: false
163                 }
164             },
165             itemStyle: {　　//樣式
166                 normal: {
167                     color: '#FFD700'
168                 }
169             }
170         },
171         {
172             name: 'Top 5',　　//分類系列的第二類
173             type: 'effectScatter',
174             coordinateSystem: 'bmap',
175             data: {},
176             symbolSize: function(val) {
177                 return val[2] / 10;
178             },
179             showEffectOn: 'emphasis',
180             rippleEffect: {　　//連鎖反應
181                 brushType: 'stroke'
182             },
183             hoverAnimation: true,　　//hover操作
184             label: {
185                 normal: {
186                     formatter: '{b}',
187                     position: 'right',
188                     show: true
189                 }
190             },
191             itemStyle: {
192                 normal: {
193                     color: '#f4e925',
194                     shadowBlur: 10,
195                     shadowColor: '#333'
196                 }
197             },
198             zlevel: 1　　//層級
199         }
200     ]
201 };

 7、修改滑動操作後的顯示格式，具體想顯示什麼樣的格式，大家根據返回的數據來寫，具體問題具體分析

 1     //官方實例tooltip  
 2     tooltip: {  
 3         trigger: 'item'  
 4     },  
 5 
 6 
 7     //我改後的
 8     tooltip: {
 9         trigger: 'item',
10         //在這裡添加一個函數來返回改變原來的格式
11         formatter: function(data) {
12             return data.name + "：" + data.value[2];
13         }
14     },

8、沒有效果圖，自己可以在Echarts官網實例上試一下


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript02、圖片輪播的效果
    前言 相信逛過淘寶的人肯定都見過，網站上經常有那種圖片輪播的形式。而今天，要介紹的相關知識就是為了實現圖片輪播的效果。筆者整理了一些相關的知識儲備，並且實現了一個小的案例，用以複習相關知識點。 一、案例分析 實現替換圖片： 第一步：確定事件(頁面載入事件onload)併為其綁定一個函數 第二步：書寫 ...
  • 使用Q進行同步的Promises操作
    如何通過使用Q來併發執行多個promises呢？ 上面的代碼輸出結果為1。很顯然，你不能簡單地將各個promises都放到一個Q()函數里來執行，這樣只有第一個promise會被正確地執行，剩餘的都會被忽略掉。 你可以使用Q.all來代替上面的方法，它們之間的主要區別是前者將每個promise單獨作 ...
  • 大話git中的撤銷操作
    下麵以現實場景作為情境。 基礎知識，理解git中的幾個區域 本地代碼已經add，未commit 修改本地工作目錄中的readme.md,添加文字"第一次修改" 然後查看下狀態 進行Add操作,並查看狀態 這時候，變動進入了緩存區(Index) 但是我們突然發現我們改動錯了，其實我是想改動 文件。 方 ...
  • js設置隨機切換背景圖片
    ...
  • 一款特好用的JavaScript框架——JQuery
    瞭解瞭解 jQuery是一個快速，小巧，功能豐富的JavaScript庫。它使諸如HTML文檔遍歷和操縱，事件處理，動畫和Ajax等事情變得簡單得多，而且易於使用的API可以在多種瀏覽器中使用。 一、 什麼是JQuery？ jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的" ...
  • vue父組件向子組件動態傳值的兩種方法
    在一些項目需求中需要父組件向子組件動態傳值，比如我這裡的需求是，父組件動態通過axios獲取返回的圖片url數組然後傳給子組件，上傳圖片的子組件拿到該數組後進行遍歷並展示圖片 方法有兩種， 方法一： props傳值，這裡註意一個問題，傳過來的值需要用watch監聽並賦值，否則這裡獲取到的是空數組 父 ...
  • VUE學習——vue的內部指令學習（趁自己沒忘，學習記錄一下）
    1.v-if&v-else&v-show v-if用來判斷是否載入html的DOM，v-if和v-else一般是一起用的。 v-show相當於display，DOM已經載入出來了，這個是判斷它要不要顯現出來 2.v-for,這個主要是迴圈輸出的問題，js里不是有for..in...迴圈麽？這個跟那個 ...
  • 【JavaScript】純js-小案例：帶縮略圖的圖片輪換
    今天整理文件時找到了之前做的一些js練習，裡面的帶縮略圖的圖片輪換正好跟我之前做的banner輪播有點像。就又看了一遍，添加了一些註釋。 效果如下： 代碼： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類