zoukankan      html  css  js  c++  java

  • 流量分析系统----讲解-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=" 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，也要相应的增加，所以如何优化，自己想，我只是个肝后台的，前端展示效果什么的，才不要呢？

    坑留给你们。。。

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  • 相关阅读:
    2015个人年度总结
    矢量图标的使用
    onsrcoll和scrollTop兼容与实现
    我们，曾是阿里宝宝
    linux 基本操作笔记
    认识与学习shell
    两道有趣的面试题
    使用css保持一定宽高比例
    我在 超级课程表 实习的那个月
    3、4月学习总结，如愿阿里前端实习生
  • 原文地址：https://www.cnblogs.com/SuMeng/p/8400204.html
Copyright © 2011-2022 走看看