ECharts模拟百度迁徙实例
本实例原始信息：
作者：anix
演示地址：Echarts模拟迁徙
源码地址：GitHub-ananix-qianxi
前言
“百度地图春节人口迁徙大数据”（简称“百度迁徙”）是百度在春运期间推出的技术品牌项目，为业界首个以“人群迁徙”为主题的大数据可视化项目。
准备
- 开发工具
由于是前端页面项目，所以一般的编辑器都可以，推荐使用vs code
如果要自己挂载本地geo地图，则需要本地服务器环境，使用vs code时，安装Live Server插件即可 - 引入文件
echarts文件*
地图文件
jquery文件
编写
- 引入资源
<!-- 线上资源-->
<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> -->
<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> -->
<!--本地资源-->
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<!-- <script src="js/china.js"></script> -->
- 准备dom（将来放echarts图表的位置）
<div id="container" style="height: 100%"></div>
- 初始化一个 echarts 实例
// 基于准备好的dom，初始化echarts实例
// 方式一：使用china.js地图初始化方式
// var myChart = echarts.init(document.getElementById('container'));
// 方式二：使用地定义geo地图文件初始化方法，需要提前准备好china.json地图文件
$.get('js/map/china.json', function (chinaJson) {
//注册地图
echarts.registerMap('china', chinaJson);
//初始化echarts实例
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
//...option
//...data
//...set
//...
});
- 指定图表的配置项和数据
// 在上一步option的位置
// 0 准备option对象
option = null;
// 1 准备数据
// 地区坐标信息
var geoCoordMap = {
'上海': [121.4648, 31.2891],
'东莞': [113.8953, 22.901],
'东营': [118.7073, 37.5513],
'中山': [113.4229, 22.478],
'临汾': [111.4783, 36.1615],
//...
//此处省略部分数据...
'长治': [112.8625, 36.4746],
'阳泉': [113.4778, 38.0951],
'青岛': [120.4651, 36.3373],
'韶关': [113.7964, 24.7028]
};
// 准备流向信息，value为地区的数据值
var BJData = [
[{ name: '北京' }, { name: '上海', value: 95 }],
[{ name: '北京' }, { name: '广州', value: 90 }],
[{ name: '北京' }, { name: '大连', value: 80 }],
[{ name: '北京' }, { name: '南宁', value: 70 }],
[{ name: '北京' }, { name: '南昌', value: 60 }],
[{ name: '北京' }, { name: '拉萨', value: 50 }],
[{ name: '北京' }, { name: '长春', value: 40 }],
[{ name: '北京' }, { name: '包头', value: 30 }],
[{ name: '北京' }, { name: '重庆', value: 20 }],
[{ name: '北京' }, { name: '常州', value: 10 }]
];
var SHData = [
[{ name: '上海' }, { name: '包头', value: 95 }],
//省略部分数据...
];
var GZData = [
[{ name: '广州' }, { name: '福州', value: 95 }],
//省略部分数据...
[{ name: '广州' }, { name: '海口', value: 10 }]
];
var LZData = [
[{ name: '兰州' }, { name: '福州', value: 95 }],
//省略部分数据...
];
// 流向图标，可自定义
var planePath = 'arrow'
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
// 准备自己个性化的数据
var lanzhou = {
name: '点',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
//波纹的绘制方式，可选 'stroke' 和 'fill'
},
showEffectOn: "render",//显示涟漪
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 180;
},
itemStyle: {
normal: {
color: "red"
}
},
//
data: [
{
name: "lanzhou",
value: [103.5901, 36.3043, 1092],
tooltip: {
//formatter: '中心资源校： <br />{b0}'
formatter: function (item, ticket, callback) {
let res = "中心资源校：" + item.name + "<br />地区教学点：";
for (let i = 0, l = LZData.length; i < l; i++) {
res += '<br/>& ' + LZData[i][1].name;
}
return res
},
}
}
//...
// 准备系列series
var series = [lanzhou];
[['北京', BJData], ['上海', SHData], ['广州', GZData], ['兰州', LZData]].forEach(function (item, i) {
series.push({
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
tooltip: {
//formatter: '{a} >{b}{c1}{d}'
formatter: function (sdasd, ticket, callback) {
let res = "" + sdasd.data.fromName + "->>>" + sdasd.data.toName;
return res
},
},
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 8
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
//地图上的点
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
//波纹的绘制方式，可选 'stroke' 和 'fill'
},
showEffectOn: "emphasis",//高亮时候显示涟漪
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
tooltip: {
formatter: '地区教学点: <br />{b0} '
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
// 2 将数据放到option里
option = {
backgroundColor: '#404a59',
title: {
text: '教育资源流向',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
//formatter: '中心资源校：{b0}<br />地区教学点：{b1}{c}{d}'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['北京 Top10', '上海 Top10', '广州 Top10', '兰州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'multiple'//'single' 或者 'multiple' 使用单选或者多选模式
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: series
};
- 注册option显示图表
if (option && typeof option === "object") {
//注册option显示图表
myChart.setOption(option, true);
}
- 加自己的相关控制代码
//自己的控制代码
myChart.on('click', function (params) {
var labelselect;
if (params.componentSubType === 'effectScatter') {
// 点击到了 effectScatter 上
switch (params.name + " Top10") {
case "上海 Top10":
labelselect = {
"上海 Top10": true,
"兰州 Top10": false,
"北京 Top10": false,
"广州 Top10": false
};
break;
case "lanzhou Top10":
labelselect = {
"上海 Top10": false,
"兰州 Top10": true,
"北京 Top10": false,
"广州 Top10": false
};
break;
case "北京 Top10":
labelselect = {
"上海 Top10": false,
"兰州 Top10": false,
"北京 Top10": true,
"广州 Top10": false
};
break;
case "广州 Top10":
labelselect = {
"上海 Top10": false,
"兰州 Top10": false,
"北京 Top10": false,
"广州 Top10": true
};
break;
default:
labelselect = {
"上海 Top10": false,
"兰州 Top10": false,
"北京 Top10": false,
"广州 Top10": false
};
}
}
option.legend.selected = labelselect;
myChart.setOption(option, true);
});
测试
其他工具自行启动服务访问文件即可
vs code右键，点击open with live server即可
。。。
扩展
结合百度地图的模拟迁徙
ECharts模拟百度迁徙实例的更多相关文章
- ECharts模拟迁徙案例
ECharts模拟迁徙案例 独立页面:http://211.140.7.173:8081/t/wuhairui/ditu/a.html
- 流量分析系统----讲解-echarts模拟迁移(结合china.js)
百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...
- ECharts 散点图+百度地图（案例转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial-2/ ECharts 实现地图散点图(下) 小红 2016-06-13 ECharts, ...
- Splinter学习－－初探1，模拟百度搜索
Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...
- POST模拟百度登录和自动发帖
这里用HttpClient发包模拟百度登录和发帖,验证码部分采用机器下载人工识别. 登陆百度的原理:1. 访问https://passport.baidu.com/v2/api/?getapi& ...
- Webbrowser模拟百度一下子点击事件
Webbrowser模拟百度一下点击事件新建一个form,有一个button和一个webbrowser控件.然后webbrowser一开始加载的就是百度主页.然后在文本框里输入点东西,如何做到点击bu ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- python--selenium简单模拟百度搜索点击器
python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...
- JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- java单例模式实现
1.最基本的单例模式 /** * @author LearnAndGet * @time 2018年11月13日 * 最基本的单例模式 */ public class SingletonV1 { pr ...
- append和push和pop区别
append() 操作的是DOM节点,在被选元素的结尾(内部结尾)插入指定内容: push() 向数组末尾插入一个或者多个元素,并且返回新的长度: pop() 删除 ...
- Windows10 修改键位映射
https://blog.csdn.net/lhdalhd1996/article/details/90741092 1.为什么要修改键位我的笔记本键盘上下键是这样的: 很想捶死产品经理,你是从来不用 ...
- Collapse 折叠面板
通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 <el-collapse v-model="activeNames" @change="ha ...
- C#session配置
web Form 网页是基于HTTP的,它们没有状态, 这意味着它们不知道所有的请求是否来自同一台客户端计算机,网页是受到了破坏,以及是否得到了刷新,这样就可能造成信息的丢失. 于是, 状态管理就成了 ...
- [log4j]log4j简单配置
步骤: 1.导入jar包:log4j-1.2.17.jar 2.编写log4j配置文件:log4j.properties ### set log levels - for more verbose l ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第14节 高级篇幅之SpringBoot多环境配置_59、SpringBoot多环境配置介绍和项目实战
笔记 1.SpringBoot多环境配置介绍和项目实战(核心知识) 简介:SpringBoot介绍多环境配置和使用场景 1.不同环境使用不同配置 例如数据库配置,在开发的时候, ...
- Web jsp开发学习——数据库的另一种连接方式（配置静态数据库连接池）
1.导包 2.找到sever里的sever.xml,配置静态数据库连接池 <Context docBase="bookstore" path="/booksto ...
- POJO是什么，javabean是什么，以及POJO与javabean的区别
POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称.使用POJO名称是为了避免和EJB混淆起来, 而 ...
- PHP进阶之路 -- 02 面向对象
PHP进阶之路-- 之 “面向对象” 基础 概念 类的介绍和定义 类的属性 类常量 类的自动加载 构造函数和析构函数 访问控制 对象继承 范围解析操作符 static静态关键字 抽象类 对象接口 Tr ...