百度 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

  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. <!-- 下面的script脚本，其实也可以写成一个js，然后引入近来，但这里就不这样做了 -->
  18. <script type="text/javascript">
  19. // 基于准备好的dom，初始化echarts实例，
  20. // 这句和最后一句，都是必须的。只是中间部分改变了。根据官网教程来的
  21. var myChart = echarts.init(document.getElementById('main'));
  22. //中间部分，就是最上面第一张图，官网示例的代码复制写到这里
  23. //模拟迁徙 ： http://echarts.baidu.com/demo.html#geo-lines
  24. // 使用刚指定的配置项和数据显示图表。
  25. myChart.setOption(option);
  26. </script>
  27. </body>
  28. </html>

selected属性:官网例子没有，就是这东西，才能实现这篇博客所说的效果,因为，不写，它会默认第一个，也就是'北京
Top10'为选中状态。

map:"china" ：
是你下载地图js的那个文件名“china.js”，比如你下载的是“world.js”，那么这里的“china”也要改为“world”。

 

步骤四、新建 line_auto_switch.js 文件，实现自动、定时切换效果，但会有个缺点，最后面会说到。

  1. //************************
  2. //******航线自动切换*********
  3. //************************
  4. $(document).ready(function(){
  5. auto_switch_timer();
  6. });
  7. //用来选中的节点，因为默认是 “北京 Top10” 先选中的，默认为select0
  8. //'北京 Top10', '上海 Top10', '广州 Top10'
  9. var select0 = {
  10. '北京 Top10' : true,
  11. '上海 Top10' : false,
  12. '广州 Top10' : false
  13. };
  14. var select1 = {
  15. '北京 Top10' : false,
  16. '上海 Top10' : true,
  17. '广州 Top10' : false
  18. };
  19. var select2 = {
  20. '北京 Top10' : false,
  21. '上海 Top10' : false,
  22. '广州 Top10' : true
  23. };
  24. var restTime = 2;// 2秒切换一次
  25. var switch_index = 1;//激活的select变量，因为0是默认的，所以从1开始
  26. var switch_count = 3;//总共有多少个 select变量
  27. /* 倒计时js */
  28. function auto_switch_timer() {
  29. // debugger;
  30. var intDiff = parseInt(restTime);// 倒计时总秒数量
  31. window.setInterval(function() {
  32. if (intDiff > 0) {
  33. intDiff--;
  34. } else {
  35. intDiff = parseInt(restTime);
  36. // 获取 option 里的 legend 参数
  37. var legend = option.legend;
  38. // 判断是不是激活最后一个selectX变量，是，下次就从 select0 开始
  39. if (switch_index == switch_count) {
  40. switch_index = 0;
  41. }
  42. switch (switch_index) {
  43. case 0:
  44. legend.selected = select0;
  45. break;
  46. case 1:
  47. // selected 是当前选中的
  48. legend.selected = select1;
  49. break;
  50. case 2:
  51. legend.selected = select2;
  52. break;
  53. }
  54. // 设置 option
  55. option.legend = legend;
  56. // 重新加载 option，因为修改了局部，所以不会出现整个页面刷新
  57. myChart.setOption(option);
  58. switch_index++;
  59. }
  60. }, 1000);
  61. }

总结：

1、你可以把自动切换的代码，放到官网例子上哦，写在最下面，你就知道效果了，亲测可用。如下图


2、步骤四所说的缺点，就是你去拖动地图后，等下次切换，又会跳回原来的位置，但是我把代码放到官网例子上，却重现不了。我也不明白怎么回事，反正不能怪我，嘿嘿，我当时只写了这个切换航线的js。

3、这里面还有很多优化的地方，比如，不止“北上广”3个城市的话，有10几个城市，甚至更多，那么，js里面，“var
selectXX;”这代码要写很多，然后，switch里面的case，也要相应的增加，所以如何优化，自己想，我只是个肝后台的，前端展示效果什么的，才不要呢？

坑留给你们。。。

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

流量分析系统----讲解-echarts模拟迁移(结合china.js)的更多相关文章

  1. 流量分析系统----实现-echarts模拟迁移(bmap.js/china.js)

    china.js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 开源流量分析系统 Apache Spot 概述(转)

    原文地址http://blog.nsfocus.net/apache-spot/ Apache Spot 是一个基于网络流量和数据包分析,通过独特的机器学习方法,发现潜在安全威胁和未知网络攻击能力的开 ...

  3. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  4. 流量分析系统---echarts模拟迁移中 ，geocoord从后台获取动态数值

    由于在echarts的使用手册中说了 {Object} geoCoord (geoCoord是Object类型) ,所以不能用传统的字符串拼接或数组的方式赋值.在后台的controller中用Map& ...

  5. 流量分析系统---redis

    1\启动redis 方法一: 修改了某些配置,具体步骤惨开下面的内容 [root@mini1 ~]# service redis stop/start 方法二: [root@mini1 bin]#cd ...

  6. 流量分析系统---flume(测试flume+kafka)

    1.在flume官方网站下载最新的flume     wget http://124.205.69.169/files/A1540000011ED5DB/mirror.bit.edu.cn/apach ...

  7. 流量分析系统---kafka集群部署

    1.集群部署的基本流程 Storm上游数据源之Kakfa 下载安装包.解压安装包.修改配置文件.分发安装包.启动集群 2.基础环境准备 安装前的准备工作(zk集群已经部署完毕)  关闭防火墙 chk ...

  8. 流量分析系统--zookeeper集群部署

    安装zookeeper mkdir apps tar -zxvf zookeeper-3.4.5.tar.gz -C apps [root@mini1 zookeeper-3.4.5]# rm -rf ...

  9. 网络流量分析——NPMD关注IT运维、识别宕机和运行不佳进行性能优化。智能化分析是关键-主动发现业务运行异常。科来做APT相关的安全分析

    科来 做流量分析,同时也做了一些安全分析(偏APT)——参考其官网:http://www.colasoft.com.cn/cases-and-application/network-security- ...

随机推荐

  1. Android实现录屏直播（二）需求才是硬道理之产品功能调研

    请尊重分享成果,转载请注明出处,本文来自Coder包子哥,原文链接:http://blog.csdn.net/zxccxzzxz/article/details/54254244 前面的Android ...

  2. 图谱论(Spectral Graph Theory)基础

    拉普拉斯矩阵(Laplacian matrix),也称为导纳矩阵(Admittance matrix)或者基尔霍夫矩阵(Kirchohoff matrix) 归一化的拉普拉斯矩阵定义为 例子: 拉普拉 ...

  3. Servlet 打包部署

    默认情况下,Servlet 应用程序位于路径 <Tomcat-installation-directory>/webapps/ROOT 下,且类文件放在 <Tomcat-instal ...

  4. Python Socket 网络编程 (服务器端编程)

    服务器端主要做以下工作: 打开 socket 绑定到特定的地址以及端口上 监听连接 建立连接 接收/发送数据 上面已经介绍了如何创建 socket 了,下面一步是绑定. 绑定 socket 函数 bi ...

  5. jQuery EasyUI编辑DataGrid用combobox实现多级联动

    我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascrip ...

  6. MathType公式行距设置的方法

    在使用普通的文档编辑器编辑数学公式的时候,大家会发现一些数学上特殊的符号.公式很难给编辑出来,有时候就算编辑出来了也不符号一些学术的规范.这个时候就可以使用MathType这款公式编辑器来编辑.但是在 ...

  7. python3 - property的使用

    传统的绑定属性值,会把属性暴露出去,而且无法检查参数是否合法,如下: class Test(object): def  __int__(self,age): self.age = age 为了检查参数 ...

  8. Android UI开发第二十七篇——实现左右划出菜单

    年前就想写左右滑动菜单,苦于没有时间,一直拖到现在,这篇代码实现参考了网上流行的SlidingMenu,使用的FrameLayout布局,不是扩展的HorizontalScrollView. 程序中自 ...

  9. convex hull trick CF344.E

    类似于斜率优化的东西,果真CF的E以后才会考点算法啊. 感觉这种优化应该很常见,但这题直线只有第一象限的,但是插入,和查找操作是不变的,按极角排序后就可以直接用这个模板了. #include < ...

  10. codevs1068 乌龟棋==洛谷P1541 乌龟棋

    P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家 ...