<!-- 1、创建HTML页面基本结构 2、创建展示图形容器 3、引入echarts依赖包 4、初始化echarts对象 5、设置参数 --> <html> <head> <title>北上广深人群迁徙图</title> <meta charset="utf-8" /> <script src="echarts.min.js"></script> <script src="china.js"></script> <script src="jquery-3.5.1.min.js"></script> </head> <body> <div id="main" style="100%;height:100%;"></div> <script> var myEcharts = echarts.init(document.getElementById("main")); var option = { backgroundColor: '#f0ffff', title : { text: '北上广深人群迁徙图', left: 'center', }, tooltip : { trigger: 'item', formatter:function(params){ return "城市："+params.name+" "+(params.value)[2]+"%"; } }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data:['北京', '上海', '广州','深圳'], textStyle: { color: '#f0fff' }, }, geo: { map: 'china', roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#404a59' }, emphasis: { areaColor: '#2a333d' } } } }; var geoCoordMap = null; $.ajax({ url:"dtData.json", async:false, dataType:"json", success:function(data){ geoCoordMap = data; console.log(geoCoordMap); } }); var myData = null; $.ajax({ url:"PopulationData.json", async:false, dataType:"json", success:function(data){ myData = [ ["北京",data.BJData], ["上海",data.SHData], ["广州",data.GZData], ["深圳",data.SZData] ]; } }); 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; }; function getData(data){ var citydata = []; data.forEach(function(item,i){ var myname = item[1].name; var myvalue = item[1].value; var mycoord = geoCoordMap[myname]; mycoord.push(myvalue); citydata.push({ 'name':myname, 'value':mycoord } ); }); return citydata; } var color = ['yellow','#46bee9','#a6c84c','#ffa022']; var series = []; $.each(myData,function(i,item){ series.push( { name: item[0], type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: color[i], 0, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'lines', zlevel: 2, symbol: ['none', 'arrow'], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: 'emptyCircle', symbolSize: 3 }, lineStyle: { normal: { color: color[i], 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2]*3; }, itemStyle: { normal: { color: color[i] } }, data: getData(item[1]) } ); }); option.series = series; myEcharts.setOption(option); </script> </body> </html>
