流量分析系统----讲解-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">
- <!-- 引入 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;
- }
- // 设置 option
- option.legend = legend;
- // 重新加载 option,因为修改了局部,所以不会出现整个页面刷新
- myChart.setOption(option);
- switch_index++;
- }
- }, 1000);
- }
总结:
1、你可以把自动切换的代码,放到官网例子上哦,写在最下面,你就知道效果了,亲测可用。如下图
2、步骤四所说的缺点,就是你去拖动地图后,等下次切换,又会跳回原来的位置,但是我把代码放到官网例子上,却重现不了。我也不明白怎么回事,反正不能怪我,嘿嘿,我当时只写了这个切换航线的js。
3、这里面还有很多优化的地方,比如,不止“北上广”3个城市的话,有10几个城市,甚至更多,那么,js里面,“var
selectXX;”这代码要写很多,然后,switch里面的case,也要相应的增加,所以如何优化,自己想,我只是个肝后台的,前端展示效果什么的,才不要呢?
坑留给你们。。。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
流量分析系统----讲解-echarts模拟迁移(结合china.js)的更多相关文章
- 流量分析系统----实现-echarts模拟迁移(bmap.js/china.js)
china.js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 开源流量分析系统 Apache Spot 概述(转)
原文地址http://blog.nsfocus.net/apache-spot/ Apache Spot 是一个基于网络流量和数据包分析,通过独特的机器学习方法,发现潜在安全威胁和未知网络攻击能力的开 ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
- 流量分析系统---echarts模拟迁移中 ,geocoord从后台获取动态数值
由于在echarts的使用手册中说了 {Object} geoCoord (geoCoord是Object类型) ,所以不能用传统的字符串拼接或数组的方式赋值.在后台的controller中用Map& ...
- 流量分析系统---redis
1\启动redis 方法一: 修改了某些配置,具体步骤惨开下面的内容 [root@mini1 ~]# service redis stop/start 方法二: [root@mini1 bin]#cd ...
- 流量分析系统---flume(测试flume+kafka)
1.在flume官方网站下载最新的flume wget http://124.205.69.169/files/A1540000011ED5DB/mirror.bit.edu.cn/apach ...
- 流量分析系统---kafka集群部署
1.集群部署的基本流程 Storm上游数据源之Kakfa 下载安装包.解压安装包.修改配置文件.分发安装包.启动集群 2.基础环境准备 安装前的准备工作(zk集群已经部署完毕) 关闭防火墙 chk ...
- 流量分析系统--zookeeper集群部署
安装zookeeper mkdir apps tar -zxvf zookeeper-3.4.5.tar.gz -C apps [root@mini1 zookeeper-3.4.5]# rm -rf ...
- 网络流量分析——NPMD关注IT运维、识别宕机和运行不佳进行性能优化。智能化分析是关键-主动发现业务运行异常。科来做APT相关的安全分析
科来 做流量分析,同时也做了一些安全分析(偏APT)——参考其官网:http://www.colasoft.com.cn/cases-and-application/network-security- ...
随机推荐
- java json字符串和对象互转
/** * Created by admin on 2017/7/26. */ public class NewPost { private String title; private String ...
- PCB焊接工艺
1. 有铅焊接工艺 240~260℃. 2. BGA焊盘直径为球径80%.
- 百度UEditor 用require 引入 Thinkphp5 ,图片上传问题
用require引入,用了10分钟:上传图片,用了一个早上(吐血一地.....) 重点:require引入成功后,在需要引用UEditor的文件开头加入(ue的文件夹路径) window.UEDITO ...
- Phaser 桌面和手机游戏HTML5框架
Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格: Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画.输入 管理.瓦片 ...
- jenkins登录使用cas认证
jenkins是目前打包管理项目最牛的工具.http://192.168.35.50:4000/jenkins%20plugin/system/74-cas-plugin.html
- android studio win7开发环境
java 开发环境 这里使用jdk1.7版本,从官网上下载. 点击.正常的window软件的安装方式,一直下一步即可. 环境变量的设置: 在系统属性中,对需要的环境变量进行设置: JAVA_HOME设 ...
- ios 关于collectionView.performBatchUpdates()方法 --时时更新
今天想实现一个简单的collectionView动画效果,查阅相关资料发现,实现 collectionView.performBatchUpdates()方法即可,于是掉坑里了. 文档: public ...
- 爬虫实战【6】Ajax内容解析-今日头条图集
Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). Ajax并不是新的编程语言,而是一种使用现有标准的新方法,当然 ...
- zookeeper安装步骤
zookeeper安装步骤 百度搜索:zookeeper 进入后点击下载: 进入到下载的页面 英文: 中文: 进入版本列表: 进入后复制该链接, 在linux执行wget下载: wget https: ...
- .NET调用JAVA的WebService方法
调用WebService,最简单的办法当然是直接添加WEB引用,然后自动产生代理类,但是在调用JAVA的WebService时并没有这么简单,特别是对于SoapHeader的处理,在网上也有相关资料, ...