碼上快樂

相關內容    簡體    繁體

流量分析系統----講解-echarts模擬遷移(結合china.js)

本文轉載自   查看原文   2018-02-01 17:34   2874    網絡流量分析與監控系統

百度 Echarts 地圖->模擬遷徙，實現自動切換地圖

小航哥注釋：

1、本文主要是把模擬遷移的流程講了一遍，講的很好。具體實現參考航哥這篇隨筆“流量分析系統----實現-echarts模擬遷移(bmap.js/china.js)”

2、用了china.js就不需要用百度地圖的bmap.js，兩者取其一就可以。

3、本文參考自http://blog.csdn.net/cj_zyz/article/details/76574143

4、雖然china.js已經不能在echats官網下載了，但大家可以直接百度下載，網上很多資源。

剛好有個項目，然后前端找了這個百度的echarts地圖，領導說好，然后說要讓它自動切換地圖，就丟給我了。。。不過還好，做出來了。可惜的是，效果是實現了，最后卻被更高級的領導pass掉，但決定寫下這篇博客，或許能幫到有需要的人。

當時這個項目，是用於大看屏的，那種掛在牆上的大屏幕，長度6米左右樣子。

現在，重新在官網上弄個簡單的例子，重現下這個效果。

 

Echarts官網 -> 地圖 -> 模擬遷徙  官網示例地址： 

http://echarts.baidu.com/demo.html#geo-lines

 

需要實現的效果：如圖1，實現右下角“北京”、“上海”、“廣州”的自動切換，定時切換。

 

圖1


 

 

我是個肝java的，這個echarts也要部署到服務器才能跑起來，如果有大佬有更好的方法，可以在評論下留言，一起討論學習。

 

步驟一、去官網下載兩個js，下面是下載地址還有圖片

①echarts.js ： http://echarts.baidu.com/download.html

②(地圖)china.js ： http://echarts.baidu.com/download-map.html


 

 

 

步驟二、用eclipse創建一個web項目，導入js，創建一個index.html文件


 

步驟三、編輯 index.html 文件，基於官網教程。有些注意點看下面的圖片

官網教程地址： http://echarts.baidu.com/tutorial.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <!-- 引入 jquery -->  
  6.     <script src="js/jquery-1.8.3.min.js"></script>  
  7.     <!-- 引入 ECharts 文件 -->  
  8.     <script src="js/echarts.js"></script>  
  9.     <!-- 引入地圖 -->  
  10.     <script src="js/china.js"></script>  
  11.     <!-- 航線自動切換，自己寫 -->  
  12.     <script src="js/line_auto_switch.js"></script>  
  13. </head>  
  14. <body>  
  15.     <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->  
  16.     <div id="main" style="width: 600px;height:400px;"></div>  
  17.       
  18.     <!-- 下面的script腳本，其實也可以寫成一個js，然后引入近來，但這里就不這樣做了 -->  
  19.     <script type="text/javascript">  
  20.         // 基於准備好的dom，初始化echarts實例，  
  21.         // 這句和最后一句，都是必須的。只是中間部分改變了。根據官網教程來的  
  22.         var myChart = echarts.init(document.getElementById('main'));  
  23.           
  24.         //中間部分，就是最上面第一張圖，官網示例的代碼復制寫到這里  
  25.         //模擬遷徙 ： http://echarts.baidu.com/demo.html#geo-lines  
  26.           
  27.           
  28.           
  29.         // 使用剛指定的配置項和數據顯示圖表。  
  30.         myChart.setOption(option);  
  31.     </script>  
  32.       
  33. </body>  
  34. </html>  


selected屬性:官網例子沒有，就是這東西，才能實現這篇博客所說的效果,因為，不寫，它會默認第一個，也就是'北京 Top10'為選中狀態。

map:"china" ： 是你下載地圖js的那個文件名“china.js”，比如你下載的是“world.js”，那么這里的“china”也要改為“world”。

 

步驟四、新建 line_auto_switch.js 文件，實現自動、定時切換效果，但會有個缺點，最后面會說到。

[html] view plain copy
  1. //************************  
  2. //******航線自動切換*********  
  3. //************************  
  4.   
  5. $(document).ready(function(){  
  6.     auto_switch_timer();  
  7. });  
  8.   
  9. //用來選中的節點，因為默認是 “北京 Top10” 先選中的，默認為select0  
  10. //'北京 Top10', '上海 Top10', '廣州 Top10'  
  11. var select0 = {  
  12.     '北京 Top10' : true,  
  13.     '上海 Top10' : false,  
  14.     '廣州 Top10' : false  
  15. };  
  16. var select1 = {  
  17.     '北京 Top10' : false,  
  18.     '上海 Top10' : true,  
  19.     '廣州 Top10' : false  
  20. };  
  21. var select2 = {  
  22.     '北京 Top10' : false,  
  23.     '上海 Top10' : false,  
  24.     '廣州 Top10' : true  
  25. };  
  26.   
  27.   
  28. var restTime = 2;// 2秒切換一次  
  29. var switch_index = 1;//激活的select變量，因為0是默認的，所以從1開始  
  30. var switch_count = 3;//總共有多少個 select變量  
  31.   
  32. /* 倒計時js */  
  33. function auto_switch_timer() {  
  34.     // debugger;  
  35.     var intDiff = parseInt(restTime);// 倒計時總秒數量  
  36.     window.setInterval(function() {  
  37.         if (intDiff > 0) {  
  38.             intDiff--;  
  39.         } else {  
  40.             intDiff = parseInt(restTime);  
  41.   
  42.             // 獲取 option 里的 legend 參數  
  43.             var legend = option.legend;  
  44.               
  45.             // 判斷是不是激活最后一個selectX變量，是，下次就從 select0 開始  
  46.             if (switch_index == switch_count) {  
  47.                 switch_index = 0;  
  48.             }  
  49.   
  50.             switch (switch_index) {  
  51.             case 0:  
  52.                 legend.selected = select0;  
  53.                 break;  
  54.             case 1:  
  55.                 // selected 是當前選中的  
  56.                 legend.selected = select1;  
  57.                 break;  
  58.             case 2:  
  59.                 legend.selected = select2;  
  60.                 break;  
  61.             }  
  62.             // 設置 option  
  63.             option.legend = legend;  
  64.             // 重新加載 option，因為修改了局部，所以不會出現整個頁面刷新  
  65.             myChart.setOption(option);  
  66.   
  67.             switch_index++;  
  68.         }  
  69.     }, 1000);  
  70. }  


總結：

1、你可以把自動切換的代碼，放到官網例子上哦，寫在最下面，你就知道效果了，親測可用。如下圖


2、步驟四所說的缺點，就是你去拖動地圖后，等下次切換，又會跳回原來的位置，但是我把代碼放到官網例子上，卻重現不了。我也不明白怎么回事，反正不能怪我，嘿嘿，我當時只寫了這個切換航線的js。

3、這里面還有很多優化的地方，比如，不止“北上廣”3個城市的話，有10幾個城市，甚至更多，那么，js里面，“var selectXX;”這代碼要寫很多，然后，switch里面的case，也要相應的增加，所以如何優化，自己想，我只是個肝后台的，前端展示效果什么的，才不要呢？

坑留給你們。。。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


免責聲明！

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



猜您在找 流量分析系統---echarts模擬遷移中 ，geocoord從后台獲取動態數值 echarts中國地圖china.js echarts引入china.js和引入china.json Echarts 中國地圖(包括china.js文件) Echarts關於中國地圖的china.js文件下載 【JS】Vue + echarts 5.0.1 引入 china.js 實現中國地圖 網站日志流量分析系統 加密惡意流量分析-Maltrail惡意流量檢測系統 Cknife流量分析 加密流量分析
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM