本實例原始信息：
作者：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}ozvdkddzhkzd'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}ozvdkddzhkzd'},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即可
。。。
擴展
結合百度地圖的模擬遷徙
轉載于:https://www.cnblogs.com/gwzzayy/p/11289024.html
總結
以上是生活随笔為你收集整理的ECharts模拟百度迁徙实例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
