流量分析系统----讲解-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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/line_auto_switch.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例，
// 这句和最后一句，都是必须的。只是中间部分改变了。根据官网教程来的
var myChart = echarts.init(document.getElementById('main'));
//中间部分，就是最上面第一张图，官网示例的代码复制写到这里
//模拟迁徙： http://echarts.baidu.com/demo.html#geo-lines
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

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

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

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

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

//************************
//******航线自动切换*********
//************************
$(document).ready(function(){
auto_switch_timer();
});
//用来选中的节点，因为默认是 “北京 Top10” 先选中的，默认为select0
//'北京 Top10', '上海 Top10', '广州 Top10'
var select0 = {
'北京 Top10' : true,
'上海 Top10' : false,
'广州 Top10' : false
};
var select1 = {
'北京 Top10' : false,
'上海 Top10' : true,
'广州 Top10' : false
};
var select2 = {
'北京 Top10' : false,
'上海 Top10' : false,
'广州 Top10' : true
};
var restTime = 2;// 2秒切换一次
var switch_index = 1;//激活的select变量，因为0是默认的，所以从1开始
var switch_count = 3;//总共有多少个 select变量
/* 倒计时js */
function auto_switch_timer() {
// debugger;
var intDiff = parseInt(restTime);// 倒计时总秒数量
window.setInterval(function() {
if (intDiff > 0) {
intDiff--;
} else {
intDiff = parseInt(restTime);
// 获取 option 里的 legend 参数
var legend = option.legend;
// 判断是不是激活最后一个selectX变量，是，下次就从 select0 开始
if (switch_index == switch_count) {
switch_index = 0;
}
switch (switch_index) {
case 0:
legend.selected = select0;
break;
case 1:
// selected 是当前选中的
legend.selected = select1;
break;
case 2:
legend.selected = select2;
break;
}
// 设置 option
option.legend = legend;
// 重新加载 option，因为修改了局部，所以不会出现整个页面刷新
myChart.setOption(option);
switch_index++;
}
}, 1000);
}

总结：

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

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

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

坑留给你们。。。

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