您的位置: 首页  >  文章  >  利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入

利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入

分类: 文章 • 2024-02-04 19:20:23
  

利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。



很多小伙伴都来要demo源码，现在我把demo放在我的GitHub上了。
https://github.com/lixinGiting/echarts3_map_demo
希望大家能给我个star鼓励一下。

效果预览 ：http://htmlpreview.github.io/?https://github.com/lixinGiting/echarts3_map_demo/blob/master/index.html

___________________________________________________________________________________________________


工作需要，想通过ECharts3来制作类似于ECharts2实例中模拟迁徙地图的效果，本来认为很简单，后来发现并不好做，上网查找了相关问题，翻来覆去只有相关的问题，却没有一个合适的答案，后来费心尽力，终于做出一点成果，分享给大家。

在ECharts2中模拟迁徙地图为：点击打开链接

在ECharts3中模拟迁徙地图为：点击打开链接

发现有以下要注意的事项，首先与echarts2相比echarts3有很大的改动：

第一点：ECharts2推荐模块化单文件引入；由于echarts依赖底层zrender，你需要同时下载zrender到本地。
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

第二点：ECharts3中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

如果采用echarts3官方给的地图加载方式即
[javascript] view plain copy
  1. <script src="echarts.js"></script>  
  2. <script src="map/js/china.js"></script>  
  3. <script>  
  4. var chart = echarts.init(document.getElementById('main'));  
  5. chart.setOption({  
  6.     series: [{  
  7.         type: 'map',  
  8.         map: 'china'  
  9.     }]  
  10. });  
  11. </script>  

那么会得到和echarts3官方实例一样的黑色背景的地图。

echarts2中的模拟迁徙之所以能显示百度地图的背景，是因为它引入了百度地图。

百度地图和echarts2的结合比较简单，官方也有很多百度地图的扩展实例。具体查看请点击

重点是echart3和百度地图的结合

需要引入百度开发者**，还要引入bmap文件，否则会报错。百度开发者**去百度地图API官网申请即可，很简单。
[javascript] view plain copy
  1. <script src="echarts.js"></script>  
  2. <script src="bmap.js"></script>  
[javascript] view plain copy
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>  

完整的Demo代码：
[javascript] view plain copy
  1. <html>  
  2. <head>  
  3.     <meta charset="utf-8">  
  4.     <style type="text/css">  
  5.         body {  
  6.             margin: 0;  
  7.         }  
  8.         #main {  
  9.             height: 100%;  
  10.         }  
  11.     </style>  
  12. </head>  
  13. <body>  
  14. <div id="main"></div>  
  15. <script src="echarts.js"></script>  
  16. <script src="bmap.js"></script>  
  17. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>  
  18. <script>  
  19. var myChart = echarts.init(document.getElementById('main'));  
  20. var option = {  
  21.         bmap: {  
  22.         center: [113.65,34.76],  
  23.         zoom: 5,  
  24.         roam: true,  
  25.         },   
  26.         series: [{  
  27.             type: 'map',  
  28.             coordinateSystem: 'bmap'  
  29.         }]  
  30. };  
  31. myChart.setOption(option);  
  32. </script>  
  33. </body>  
  34. </html>  

值得注意的是series中的坐标系
[javascript] view plain copy
  1. coordinateSystem: 'bmap'  

然后我们就可以参考着echarts3中的模拟迁徙图补全代码，最终就可以得到以百度地图为背景的echarts模拟迁徙地图，和echrts2中的模拟迁徙实例非常类似。

官方实例图：

利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入

效果图：

利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入
[javascript] view plain copy
  1. <html>  
  2. <head>  
  3.     <meta charset="utf-8">  
  4.     <style type="text/css">  
  5.         body {  
  6.             margin: 0;  
  7.         }  
  8.         #main {  
  9.             height: 100%;  
  10.         }  
  11.     </style>  
  12. </head>  
  13. <body>  
  14. <div id="main"></div>  
  15. <script src="echarts.js"></script>  
  16. <script src="bmap.js"></script>  
  17. <script src="china.js"></script>  
  18. <script src="world.js"></script>  
  19. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  
  20. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>  
  21. <script>  
  22. var myChart = echarts.init(document.getElementById('main'));  
  23.   
  24. var geoCoordMap = {  
  25.     '上海': [121.4648,31.2891],  
  26.     '东莞': [113.8953,22.901],  
  27.     '东营': [118.7073,37.5513],  
  28.     '中山': [113.4229,22.478],  
  29.     '临汾': [111.4783,36.1615],  
  30.     '临沂': [118.3118,35.2936],  
  31.     '丹东': [124.541,40.4242],  
  32.     '丽水': [119.5642,28.1854],  
  33.     '乌鲁木齐': [87.9236,43.5883],  
  34.     '佛山': [112.8955,23.1097],  
  35.     '保定': [115.0488,39.0948],  
  36.     '兰州': [103.5901,36.3043],  
  37.     '包头': [110.3467,41.4899],  
  38.     '北京': [116.4551,40.2539],  
  39.     '北海': [109.314,21.6211],  
  40.     '南京': [118.8062,31.9208],  
  41.     '南宁': [108.479,23.1152],  
  42.     '南昌': [116.0046,28.6633],  
  43.     '南通': [121.1023,32.1625],  
  44.     '厦门': [118.1689,24.6478],  
  45.     '台州': [121.1353,28.6688],  
  46.     '合肥': [117.29,32.0581],  
  47.     '呼和浩特': [111.4124,40.4901],  
  48.     '咸阳': [108.4131,34.8706],  
  49.     '哈尔滨': [127.9688,45.368],  
  50.     '唐山': [118.4766,39.6826],  
  51.     '嘉兴': [120.9155,30.6354],  
  52.     '大同': [113.7854,39.8035],  
  53.     '大连': [122.2229,39.4409],  
  54.     '天津': [117.4219,39.4189],  
  55.     '太原': [112.3352,37.9413],  
  56.     '威海': [121.9482,37.1393],  
  57.     '宁波': [121.5967,29.6466],  
  58.     '宝鸡': [107.1826,34.3433],  
  59.     '宿迁': [118.5535,33.7775],  
  60.     '常州': [119.4543,31.5582],  
  61.     '广州': [113.5107,23.2196],  
  62.     '廊坊': [116.521,39.0509],  
  63.     '延安': [109.1052,36.4252],  
  64.     '张家口': [115.1477,40.8527],  
  65.     '徐州': [117.5208,34.3268],  
  66.     '德州': [116.6858,37.2107],  
  67.     '惠州': [114.6204,23.1647],  
  68.     '成都': [103.9526,30.7617],  
  69.     '扬州': [119.4653,32.8162],  
  70.     '承德': [117.5757,41.4075],  
  71.     '拉萨': [91.1865,30.1465],  
  72.     '无锡': [120.3442,31.5527],  
  73.     '日照': [119.2786,35.5023],  
  74.     '昆明': [102.9199,25.4663],  
  75.     '杭州': [119.5313,29.8773],  
  76.     '枣庄': [117.323,34.8926],  
  77.     '柳州': [109.3799,24.9774],  
  78.     '株洲': [113.5327,27.0319],  
  79.     '武汉': [114.3896,30.6628],  
  80.     '汕头': [117.1692,23.3405],  
  81.     '江门': [112.6318,22.1484],  
  82.     '沈阳': [123.1238,42.1216],  
  83.     '沧州': [116.8286,38.2104],  
  84.     '河源': [114.917,23.9722],  
  85.     '泉州': [118.3228,25.1147],  
  86.     '泰安': [117.0264,36.0516],  
  87.     '泰州': [120.0586,32.5525],  
  88.     '济南': [117.1582,36.8701],  
  89.     '济宁': [116.8286,35.3375],  
  90.     '海口': [110.3893,19.8516],  
  91.     '淄博': [118.0371,36.6064],  
  92.     '淮安': [118.927,33.4039],  
  93.     '深圳': [114.5435,22.5439],  
  94.     '清远': [112.9175,24.3292],  
  95.     '温州': [120.498,27.8119],  
  96.     '渭南': [109.7864,35.0299],  
  97.     '湖州': [119.8608,30.7782],  
  98.     '湘潭': [112.5439,27.7075],  
  99.     '滨州': [117.8174,37.4963],  
  100.     '潍坊': [119.0918,36.524],  
  101.     '烟台': [120.7397,37.5128],  
  102.     '玉溪': [101.9312,23.8898],  
  103.     '珠海': [113.7305,22.1155],  
  104.     '盐城': [120.2234,33.5577],  
  105.     '盘锦': [121.9482,41.0449],  
  106.     '石家庄': [114.4995,38.1006],  
  107.     '福州': [119.4543,25.9222],  
  108.     '秦皇岛': [119.2126,40.0232],  
  109.     '绍兴': [120.564,29.7565],  
  110.     '聊城': [115.9167,36.4032],  
  111.     '肇庆': [112.1265,23.5822],  
  112.     '舟山': [122.2559,30.2234],  
  113.     '苏州': [120.6519,31.3989],  
  114.     '莱芜': [117.6526,36.2714],  
  115.     '菏泽': [115.6201,35.2057],  
  116.     '营口': [122.4316,40.4297],  
  117.     '葫芦岛': [120.1575,40.578],  
  118.     '衡水': [115.8838,37.7161],  
  119.     '衢州': [118.6853,28.8666],  
  120.     '西宁': [101.4038,36.8207],  
  121.     '西安': [109.1162,34.2004],  
  122.     '贵阳': [106.6992,26.7682],  
  123.     '连云港': [119.1248,34.552],  
  124.     '邢台': [114.8071,37.2821],  
  125.     '邯郸': [114.4775,36.535],  
  126.     '郑州': [113.4668,34.6234],  
  127.     '鄂尔多斯': [108.9734,39.2487],  
  128.     '重庆': [107.7539,30.1904],  
  129.     '金华': [120.0037,29.1028],  
  130.     '铜川': [109.0393,35.1947],  
  131.     '银川': [106.3586,38.1775],  
  132.     '镇江': [119.4763,31.9702],  
  133.     '长春': [125.8154,44.2584],  
  134.     '长沙': [113.0823,28.2568],  
  135.     '长治': [112.8625,36.4746],  
  136.     '阳泉': [113.4778,38.0951],  
  137.     '青岛': [120.4651,36.3373],  
  138.     '韶关': [113.7964,24.7028]  
  139. };  
  140.   
  141. var BJData = [  
  142.     [{name:'北京'}, {name:'上海',value:95}],  
  143.     [{name:'北京'}, {name:'广州',value:90}],  
  144.     [{name:'北京'}, {name:'大连',value:80}],  
  145.     [{name:'北京'}, {name:'南宁',value:70}],  
  146.     [{name:'北京'}, {name:'南昌',value:60}],  
  147.     [{name:'北京'}, {name:'拉萨',value:50}],  
  148.     [{name:'北京'}, {name:'长春',value:40}],  
  149.     [{name:'北京'}, {name:'包头',value:30}],  
  150.     [{name:'北京'}, {name:'重庆',value:20}],  
  151.     [{name:'北京'}, {name:'常州',value:10}]  
  152. ];  
  153.   
  154. var SHData = [  
  155.     [{name:'上海'},{name:'包头',value:95}],  
  156.     [{name:'上海'},{name:'昆明',value:90}],  
  157.     [{name:'上海'},{name:'广州',value:80}],  
  158.     [{name:'上海'},{name:'郑州',value:70}],  
  159.     [{name:'上海'},{name:'长春',value:60}],  
  160.     [{name:'上海'},{name:'重庆',value:50}],  
  161.     [{name:'上海'},{name:'长沙',value:40}],  
  162.     [{name:'上海'},{name:'北京',value:30}],  
  163.     [{name:'上海'},{name:'丹东',value:20}],  
  164.     [{name:'上海'},{name:'大连',value:10}]  
  165. ];  
  166.   
  167. var GZData = [  
  168.     [{name:'广州'},{name:'福州',value:95}],  
  169.     [{name:'广州'},{name:'太原',value:90}],  
  170.     [{name:'广州'},{name:'长春',value:80}],  
  171.     [{name:'广州'},{name:'重庆',value:70}],  
  172.     [{name:'广州'},{name:'西安',value:60}],  
  173.     [{name:'广州'},{name:'成都',value:50}],  
  174.     [{name:'广州'},{name:'常州',value:40}],  
  175.     [{name:'广州'},{name:'北京',value:30}],  
  176.     [{name:'广州'},{name:'北海',value:20}],  
  177.     [{name:'广州'},{name:'海口',value:10}]  
  178. ];  
  179.   
  180. var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';  
  181.   
  182. var convertData = function (data) {  
  183.     var res = [];  
  184.     for (var i = 0; i < data.length; i++) {  
  185.         var dataItem = data[i];  
  186.         var fromCoord = geoCoordMap[dataItem[0].name];  
  187.         var toCoord = geoCoordMap[dataItem[1].name];  
  188.         if (fromCoord && toCoord) {  
  189.             res.push({  
  190.                 fromName: dataItem[0].name,  
  191.                 toName: dataItem[1].name,  
  192.                 coords: [fromCoord, toCoord]  
  193.             });  
  194.         }  
  195.     }  
  196.     return res;  
  197. };  
  198.   
  199. var color = ['#a6c84c', '#ffa022', '#46bee9'];  
  200. var series = [];  
  201. [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {  
  202.     series.push({  
  203.             name: item[0] + ' Top10',  
  204.             type: 'lines',  
  205.             coordinateSystem: 'bmap',  
  206.             zlevel: 1,  
  207.             effect: {  
  208.                 show: true,  
  209.                 period: 6,  
  210.                 trailLength: 0.7,  
  211.                 color: '#fff',  
  212.                 symbolSize: 3  
  213.             },  
  214.             lineStyle: {  
  215.                 normal: {  
  216.                     color: color[i],  
  217.                     width: 0,  
  218.                     curveness: 0.2  
  219.                 }  
  220.             },  
  221.             data: convertData(item[1])  
  222.         },  
  223.         {  
  224.             name: item[0] + ' Top10',  
  225.             type: 'lines',  
  226.             coordinateSystem: 'bmap',  
  227.             zlevel: 2,  
  228.             effect: {  
  229.                 show: true,  
  230.                 period: 6,  
  231.                 trailLength: 0,  
  232.                 symbol: planePath,  
  233.                 symbolSize: 15  
  234.             },  
  235.             lineStyle: {  
  236.                 normal: {  
  237.                     color: color[i],  
  238.                     width: 1,  
  239.                     opacity: 0.4,  
  240.                     curveness: 0.2  
  241.                 }  
  242.             },  
  243.             data: convertData(item[1])  
  244.         },  
  245.         {  
  246.             name: item[0] + ' Top10',  
  247.             type: 'effectScatter',  
  248.             coordinateSystem: 'bmap',  
  249.             zlevel: 2,  
  250.             rippleEffect: {  
  251.                 brushType: 'stroke'  
  252.             },  
  253.             label: {  
  254.                 normal: {  
  255.                     show: true,  
  256.                     position: 'right',  
  257.                     formatter: '{b}'  
  258.                 }  
  259.             },  
  260.             symbolSize: function (val) {  
  261.                 return val[2] / 8;  
  262.             },  
  263.             itemStyle: {  
  264.                 normal: {  
  265.                     color: color[i]  
  266.                 }  
  267.             },  
  268.             data: item[1].map(function (dataItem) {  
  269.                 return {  
  270.                     name: dataItem[1].name,  
  271.                     value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])  
  272.                 };  
  273.             })  
  274.         });  
  275. });  
  276.   
  277. option = {  
  278.     backgroundColor: '#404a59',  
  279.     title : {  
  280.         text: '模拟迁徙',  
  281.         subtext: '数据纯属虚构',  
  282.         left: 'center',  
  283.         textStyle : {  
  284.             color: '#fff'  
  285.         }  
  286.     },  
  287.     tooltip : {  
  288.         trigger: 'item'  
  289.     },  
  290.     legend: {  
  291.         orient: 'vertical',  
  292.         top: 'bottom',  
  293.         left: 'right',  
  294.         data:['北京 Top10', '上海 Top10', '广州 Top10'],  
  295.         textStyle: {  
  296.             color: '#fff'  
  297.         },  
  298.         selectedMode: 'single'  
  299.     },  
  300.     dataRange: {  
  301.         min: 0,  
  302.         max: 100,  
  303.         x: 'right',  
  304.         calculable: true,  
  305.         color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],  
  306.         textStyle: {  
  307.             color: '#fff'  
  308.         }  
  309.     },  
  310.     bmap: {  
  311.         center: [115.97, 29.71],  
  312.         zoom: 5,  
  313.         roam: true  
  314.     },  
  315.     series: series  
  316. };  
  317.   
  318.   
  319.   
  320.   
  321.   
  322. myChart.setOption(option);  
  323. </script>  
  324. </body>  
  325. </html>  

相关推荐