【Leafletjs】7.結合echart圖表展示信息

来源:http://www.cnblogs.com/shitao/archive/2016/06/21/5604652.html
-Advertisement-
Play Games

1.popup中添加圖表信息 2.echat以控制項形式添加在map中 3.以marker形式添加在map demo源碼地址:https://github.com/shitao1988/leaflet-echartmarker ...


1.popup中添加圖表信息

                  
//定義marker
var marker = L.marker(val.location).addTo(map); var content = '<div style="width: 220px; height: 220px;" id="marker' + val.id + '"></div>'; marker.bindPopup(content, {}); marker.on('popupopen', function(e) { // 基於準備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('marker' + val.id)); // 指定圖表的配置項和數據 option = { tooltip: { trigger: 'axis' }, xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月'] }], yAxis: [{ type: 'value', name: '水量', min: 0, max: 50, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '溫度', min: 0, max: 10, interval: 5, axisLabel: { formatter: '{value} °C' } }], series: [{ name: '蒸發量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2] }, { name: '降水量', type: 'bar', data: [2.6, 5.9, 9.0, 26.4] }, { name: '平均溫度', type: 'line', yAxisIndex: 1, data: [2.0, 2.2, 3.3, 4.5] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); });

2.echat以控制項形式添加在map中

  .chart {
    width: 500px;
    height: 300px;
    background-color: white;
}

 

 1          var chart = L.control({position: 'bottomright'});
 2           chart.onAdd = function (map) {
 3               var div = L.DomUtil.create('div', 'info chart');
 4               div.id="chatrdemo";
 5               return div;
 6           };
 7           chart.addTo(map);
 8           // 基於準備好的dom,初始化echarts實例
 9                   var myChart = echarts.init(document.getElementById('chatrdemo'));
10                   // 指定圖表的配置項和數據
11                   option = {
12                       tooltip: {
13                           trigger: 'axis'
14                       },
15                       xAxis: [{
16                           type: 'category',
17                           data: ['1月', '2月', '3月', '4月']
18                       }],
19                       yAxis: [{
20                           type: 'value',
21                           name: '水量',
22                           min: 0,
23                           max: 50,
24                           interval: 50,
25                           axisLabel: {
26                               formatter: '{value} ml'
27                           }
28                       }, {
29                           type: 'value',
30                           name: '溫度',
31                           min: 0,
32                           max: 10,
33                           interval: 5,
34                           axisLabel: {
35                               formatter: '{value} °C'
36                           }
37                       }],
38                       series: [{
39                           name: '蒸發量',
40                           type: 'bar',
41                           data: [2.0, 4.9, 7.0, 23.2]
42                       }, {
43                           name: '降水量',
44                           type: 'bar',
45                           data: [2.6, 5.9, 9.0, 26.4]
46                       }, {
47                           name: '平均溫度',
48                           type: 'line',
49                           yAxisIndex: 1,
50                           data: [2.0, 2.2, 3.3, 4.5]
51                       }]
52                   };
53                   
54                   // 使用剛指定的配置項和數據顯示圖表。
55                   myChart.setOption(option);

3.以marker形式添加在map

 var pictures = L.marker(val.location, {
                      icon: L.divIcon({
                          className: 'leaflet-echart-icon',
                          iconSize: [160, 160],
                          html: '<div id="marker' + val.id + '" style="width: 160px; height: 160px; position: relative; background-color: transparent;">asd</div>'
                      })
                  }).addTo(map);
                  // 基於準備好的dom,初始化echarts實例
                  var myChart = echarts.init(document.getElementById('marker' + val.id));
                  // 指定圖表的配置項和數據
                  option = {
                      tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b}: {c} ({d}%)"
                      },
                      series: [{
                          name: '訪問來源',
                          type: 'pie',
                          radius: ['20', '50'],
                          avoidLabelOverlap: false,
                          label: {
                              normal: {
                                  show: false,
                                  position: 'center'
                              },
                              emphasis: {
                                  show: true,
                                  textStyle: {
                                      fontSize: '18',
                                      fontWeight: 'bold'
                                  }
                              }
                          },
                          labelLine: {
                              normal: {
                                  show: false
                              }
                          },
                          data: [{
                              value: val.value1,
                              name: '直接訪問'
                          }, {
                              value: val.value2,
                              name: '郵件營銷'
                          }, {
                              value: val.value3,
                              name: '聯盟廣告'
                          }, {
                              value: val.value4,
                              name: '視頻廣告'
                          }, {
                              value: 20,
                              name: '搜索引擎'
                          }]
                      }]
                  };
                  // 使用剛指定的配置項和數據顯示圖表。
                  myChart.setOption(option);

demo源碼地址:https://github.com/shitao1988/leaflet-echartmarker


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

-Advertisement-
Play Games
更多相關文章
  • 移動開發這些年,移動開發者人數越來越多,類似的培訓公司發展也很快,不過伴隨著的是移動應用的需求這幾年發展更為旺盛。要開發好的App,純原生開發肯定是最佳選擇。但是這麼多年發展,原生開發的難度並沒有降低多少,特別是作為一個需要長期運營的App,需要原生人員的長期跟進,人員成本很高。另外,從蘋果和And ...
  • 未採用生僻的jquery特性,能相容jquery1.2.6以上所有版本 實例預覽 引入文件 複製 使用方法 複製 複製 soColorPacke參數 複製 下載 ...
  • 寫的一個XML操作類,包括讀取/插入/修改/刪除。 using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;usi ...
  • 最近項目中總是調來調去的介面,理解不深甚是糊塗,遂簡單整理一下也方便今後查用。 【字元串轉換為對象】 parse用於從一個字元串中解析出json對象,如 var str = '{"name":"demo","age":"22"}' 結果: JSON.parse(str) Object age: "2 ...
  • 一、在上下結構的div佈局中,可能出現div覆蓋div,但是內容卻沒有出現覆蓋的現象。看看一個示例 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>DIV與DIV覆蓋</title> 5: <meta http-equiv="Content-Type ...
  • <script type="text/javascript"> function getRandom(n,m){ var n=Number(n); //強制轉換成數字 var m=Number(m); if(isNaN(n)||isNaN(m)){ //判斷是否為有效數字 ,其中一個不是有效數字就返 ...
  • 對於javascript程式員來說,發送ajax請求獲取後臺數據然後把數據和模板拼接成字元串渲染回DOM實現無刷新更新頁面這樣的操作可謂是輕車熟路。但眾所周知,ajax有一個不好,就是不能跨域傳輸數據,而跨域傳輸有時候又是必須用到的,比如我們可能需要調用第三方網站提供的某些API來獲取某些信息,提供 ...
  • 恢復內容開始 最近在上海上學的一個高中同學讓我幫忙,幫她做她們的電腦課程大作業。 由於關係不錯我也不好意思拒絕就幫忙做了,因為這個學期剛剛開始接觸HTML5和css,所以製作過程中有很多不懂的,而且由於HTML5是選修課,一星期只有一節,所以做這個花費了比較多的時間,這個網站是我製作的第一個網站, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...