百度 Echarts 地图-模拟迁徙，实现自动切换地图

百度 Echarts 地图->模拟迁徙，实现自动切换地图

刚好有个项目，然后前端找了这个百度的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"><!-- 引入 jquery --><script src="js/jquery-1.8.3.min.js"></script><!-- 引入 ECharts 文件 --><script src="js/echarts.js"></script><!-- 引入地图 --><script src="js/china.js"></script><!-- 航线自动切换，自己写 --><script src="js/line_auto_switch.js"></script>
</head>
<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div><!-- 下面的script脚本，其实也可以写成一个js，然后引入近来，但这里就不这样做了 --><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>

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;}// 设置 optionoption.legend = legend;// 重新加载 option，因为修改了局部，所以不会出现整个页面刷新myChart.setOption(option);switch_index++;}}, 1000);
}

总结：

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

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

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

坑留给你们。。。

百度 Echarts 地图-模拟迁徙，实现自动切换地图相关推荐

自动驾驶感知——自动驾驶地图
文章目录 1. 地图基础知识 1.1 地图的基本特性 1.2 地图的构成要素 1.3 地图的比例尺 2. 电子地图 2.1 电子地图的特点和优势 2.2 构建电子地图 2.3 存储和表达电子地图 2. ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了. https://github.com/ ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅 ...
离线地图开发之模拟迁徙（含源代码）
源代码:来源:http://www.bigemap.com/offlinemaps/demo/echarts_geolines.html <!DOCTYPE html> <html& ...
echarts中国旅客迁徙地图
功能 1.省份根据数据显示不同的颜色. 2.点击省份可以切换地级市. 3.增加迁徙动态图. Springboot + thymeleaf + Vue + Echarts Echarts学习网站 1.想 ...
Echarts 自动切换选中状态
在很多大屏展示的页面中,需要统计图表自动切换选中状态.Echarts提供的 dispatchAction 方法就可以满足这个需求. 本文针对饼图的自动切换做个记录,以作备忘. 实现效果使用模拟数据表 ...
cad输入法自动切换_百度输入法 Linux 版本发布，支持 Ubuntu/Deepin
国内 Linux 生态发展又添一个惊喜,百度输入法 Linux 版本正式发布.官网显示百度输入法 Linux 版支持 Ubuntu 1804.1810.1904.1910 版本和 Deepin(深度操 ...
echarts模拟迁徙图
index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
根据百度地图API自定义切换地图类型为卫星或普通
业务场景根据实际业务场景的需要,不能直接使用百度地图的控件,所以打算用百度地图API中map类的setMapType()方法实现.在Vue3中使用百度地图API切换地图类型为卫星或普通,创建一个自定 ...
百度ECharts地图GeoJson数据在线下载 2021
百度ECharts地图GeoJson数据在线下载项目中使用到了百度的图表插件ECharts,不得不说是真的好用,但是用到地图部分时,竟然没有地图的json数据包,网上.GitHub搜索,找到的离线包 ...

百度 Echarts 地图-模拟迁徙，实现自动切换地图

百度 Echarts 地图-模拟迁徙，实现自动切换地图相关推荐

最新文章

热门文章