本实例原始信息：
作者：anix
演示地址：Echarts模拟迁徙
源码地址：GitHub-ananix-qianxi

前言

“百度地图春节人口迁徙大数据”（简称“百度迁徙”）是百度在春运期间推出的技术品牌项目，为业界首个以“人群迁徙”为主题的大数据可视化项目。

准备

• 开发工具
  由于是前端页面项目，所以一般的编辑器都可以，推荐使用vs code
  如果要自己挂载本地geo地图，则需要本地服务器环境，使用vs code时，安装Live Server插件即可
• 引入文件
  echarts文件*
  地图文件
  jquery文件

编写

1. 引入资源

<!-- 线上资源--><!-- <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> -->

1. 准备dom（将来放echarts图表的位置）

<div id="container" style="height: 100%"></div>

1. 初始化一个 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//...});

1. 指定图表的配置项和数据

// 在上一步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};

1. 注册option显示图表

     if (option && typeof option === "object") {//注册option显示图表myChart.setOption(option, true);}

1. 加自己的相关控制代码

           //自己的控制代码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即可
。。。

扩展

结合百度地图的模拟迁徙