流量分析系统----讲解-echarts模拟迁移(结合china.js)

百度 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，也要相应的增加，所以如何优化，自己想，我只是个肝后台的，前端展示效果什么的，才不要呢？

坑留给你们。。。

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

posted @ 2018-02-01 17:34  透明的红萝卜  阅读(4068)  评论(0)  编辑  收藏  举报