Echarts模拟迁徙之飞机变小车

  • 小车样式
  • 小车路径
  • 在模型迁徙代码块中位置
  • Echarts中所有代码
  • 最终效果

小车样式

小车样式通过AI（Adobe Illustrator）软件设计完成

小车路径

AI软件设计完成后，SVG 文件代码如下

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="1024px" height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M727.5,923.582V342.756c0-5.295,2.637-10.256-5.043-10.256h-52.139c8.865,0,6.182-5.204,6.182-11.831V206.928L517.985,71.5H397.447c-8.864,0-20.947,5.541-20.947,12.169v158.685c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.739-79.904,79.825s35.856,79.824,79.943,79.824c0.133,0,0.512-0.009,0.512-0.01v230.371c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.738-79.904,79.824s35.856,79.824,79.943,79.824c0.133,0,0.512-0.01,0.512-0.01v131.599c0,5.294,10.312,8.918,17.994,8.918h327.963C730.137,932.5,727.5,928.876,727.5,923.582z"/>
</svg>

上述代码中path标签下d属性值即为小车路径。即

var carPath = 'path://M727.5,923.582V342.756c0-5.295,2.637-10.256-5.043-10.256h-52.139c8.865,0,6.182-5.204,6.182-11.831V206.928L517.985,71.5H397.447c-8.864,0-20.947,5.541-20.947,12.169v158.685c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.739-79.904,79.825s35.856,79.824,79.943,79.824c0.133,0,0.512-0.009,0.512-0.01v230.371c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.738-79.904,79.824s35.856,79.824,79.943,79.824c0.133,0,0.512-0.01,0.512-0.01v131.599c0,5.294,10.312,8.918,17.994,8.918h327.963C730.137,932.5,727.5,928.876,727.5,923.582z';

在模型迁徙代码块中位置

第一处

替换掉原模型迁徙代码中的planePath即可

第二处

将原planePath位置替换为carPath

Echarts中所有代码

var geoCoordMap = {'上海': [121.4648,31.2891],'东莞': [113.8953,22.901],'东营': [118.7073,37.5513],'中山': [113.4229,22.478],'临汾': [111.4783,36.1615],'临沂': [118.3118,35.2936],'丹东': [124.541,40.4242],'丽水': [119.5642,28.1854],'乌鲁木齐': [87.9236,43.5883],'佛山': [112.8955,23.1097],'保定': [115.0488,39.0948],'兰州': [103.5901,36.3043],'包头': [110.3467,41.4899],'北京': [116.4551,40.2539],'北海': [109.314,21.6211],'南京': [118.8062,31.9208],'南宁': [108.479,23.1152],'南昌': [116.0046,28.6633],'南通': [121.1023,32.1625],'厦门': [118.1689,24.6478],'台州': [121.1353,28.6688],'合肥': [117.29,32.0581],'呼和浩特': [111.4124,40.4901],'咸阳': [108.4131,34.8706],'哈尔滨': [127.9688,45.368],'唐山': [118.4766,39.6826],'嘉兴': [120.9155,30.6354],'大同': [113.7854,39.8035],'大连': [122.2229,39.4409],'天津': [117.4219,39.4189],'太原': [112.3352,37.9413],'威海': [121.9482,37.1393],'宁波': [121.5967,29.6466],'宝鸡': [107.1826,34.3433],'宿迁': [118.5535,33.7775],'常州': [119.4543,31.5582],'广州': [113.5107,23.2196],'廊坊': [116.521,39.0509],'延安': [109.1052,36.4252],'张家口': [115.1477,40.8527],'徐州': [117.5208,34.3268],'德州': [116.6858,37.2107],'惠州': [114.6204,23.1647],'成都': [103.9526,30.7617],'扬州': [119.4653,32.8162],'承德': [117.5757,41.4075],'拉萨': [91.1865,30.1465],'无锡': [120.3442,31.5527],'日照': [119.2786,35.5023],'昆明': [102.9199,25.4663],'杭州': [119.5313,29.8773],'枣庄': [117.323,34.8926],'柳州': [109.3799,24.9774],'株洲': [113.5327,27.0319],'武汉': [114.3896,30.6628],'汕头': [117.1692,23.3405],'江门': [112.6318,22.1484],'沈阳': [123.1238,42.1216],'沧州': [116.8286,38.2104],'河源': [114.917,23.9722],'泉州': [118.3228,25.1147],'泰安': [117.0264,36.0516],'泰州': [120.0586,32.5525],'济南': [117.1582,36.8701],'济宁': [116.8286,35.3375],'海口': [110.3893,19.8516],'淄博': [118.0371,36.6064],'淮安': [118.927,33.4039],'深圳': [114.5435,22.5439],'清远': [112.9175,24.3292],'温州': [120.498,27.8119],'渭南': [109.7864,35.0299],'湖州': [119.8608,30.7782],'湘潭': [112.5439,27.7075],'滨州': [117.8174,37.4963],'潍坊': [119.0918,36.524],'烟台': [120.7397,37.5128],'玉溪': [101.9312,23.8898],'珠海': [113.7305,22.1155],'盐城': [120.2234,33.5577],'盘锦': [121.9482,41.0449],'石家庄': [114.4995,38.1006],'福州': [119.4543,25.9222],'秦皇岛': [119.2126,40.0232],'绍兴': [120.564,29.7565],'聊城': [115.9167,36.4032],'肇庆': [112.1265,23.5822],'舟山': [122.2559,30.2234],'苏州': [120.6519,31.3989],'莱芜': [117.6526,36.2714],'菏泽': [115.6201,35.2057],'营口': [122.4316,40.4297],'葫芦岛': [120.1575,40.578],'衡水': [115.8838,37.7161],'衢州': [118.6853,28.8666],'西宁': [101.4038,36.8207],'西安': [109.1162,34.2004],'贵阳': [106.6992,26.7682],'连云港': [119.1248,34.552],'邢台': [114.8071,37.2821],'邯郸': [114.4775,36.535],'郑州': [113.4668,34.6234],'鄂尔多斯': [108.9734,39.2487],'重庆': [107.7539,30.1904],'金华': [120.0037,29.1028],'铜川': [109.0393,35.1947],'银川': [106.3586,38.1775],'镇江': [119.4763,31.9702],'长春': [125.8154,44.2584],'长沙': [113.0823,28.2568],'长治': [112.8625,36.4746],'阳泉': [113.4778,38.0951],'青岛': [120.4651,36.3373],'韶关': [113.7964,24.7028]
};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}],[{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 GZData = [[{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 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';
var carPath = 'path://M727.5,923.582V342.756c0-5.295,2.637-10.256-5.043-10.256h-52.139c8.865,0,6.182-5.204,6.182-11.831V206.928L517.985,71.5H397.447c-8.864,0-20.947,5.541-20.947,12.169v158.685c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.739-79.904,79.825s35.856,79.824,79.943,79.824c0.133,0,0.512-0.009,0.512-0.01v230.371c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.738-79.904,79.824s35.856,79.824,79.943,79.824c0.133,0,0.512-0.01,0.512-0.01v131.599c0,5.294,10.312,8.918,17.994,8.918h327.963C730.137,932.5,727.5,928.876,727.5,923.582z';
var path = [planePath,carPath];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 series = [];
[['北京', BJData], ['上海', SHData], ['广州', GZData]].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,symbol: ['none', 'arrow'],symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: carPath,symbolSize: 15},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'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function (val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function (dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});
});option = {backgroundColor: '#404a59',title : {text: '模拟迁徙',subtext: '数据纯属虚构',left: 'center',textStyle : {color: '#fff'}},tooltip : {trigger: 'item'},legend: {orient: 'vertical',top: 'bottom',left: 'right',data:['北京 Top10', '上海 Top10', '广州 Top10'],textStyle: {color: '#fff'},selectedMode: 'single'},geo: {map: 'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#404a59'},emphasis: {areaColor: '#2a333d'}}},series: series
};

最终效果

Echarts模拟迁徙之飞机变小车相关推荐

  1. echarts模拟迁徙图

    index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...

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

    利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了. https://github.com/ ...

  3. 利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅

    利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21  10065人阅 ...

  4. 离线地图开发之模拟迁徙（含源代码）

    源代码:来源:http://www.bigemap.com/offlinemaps/demo/echarts_geolines.html <!DOCTYPE html> <html& ...

  5. 在Vue项目中使用echarts完成迁徙图（Map组件）

    在Vue项目中使用echarts完成迁徙图 此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答 代码我放在了gith ...

  6. 2019年大学生智能车大赛室外光电组+在ROS下搭建仿真模拟环境，编程控制小车完成定位导航仿真

    2019年大学生智能车大赛室外光电组+在ROS下搭建仿真模拟环境,编程控制小车完成定位导航仿真 一.前言 二.准备工作 1.创建工作空间 2.下载racecar源代码包,并编译工程 三.启动仿真 1. ...

  7. c语言变大变小的图片,51单片机模拟水滴由小变大然后滴落现象（附带C语言源码）...

    51单片机模拟水滴由小变大然后滴落现象(附带C语言源码) [复制链接] #include typedef unsigned char u8; typedef signed char v8; typed ...

  8. 158：vue+openlayers 地图上Echarts模拟飞机循环飞行

    第158个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中添使用Echarts的模拟飞机飞行,借助于一个插件ol-echarts可以加载Echarts相关的配置,关键点是 ...

  9. android webview测速,学习分享，echarts模拟宽带测速效果 附Demo演示地址！！

    相信大家在平时的开发过程中经常会需要和图形图标打交道,最近接到一个需求,制作一个类似宽带测速的界面,要求使用仪表盘表示宽带下载速度,折线图表示上传速度并用柱状图跳动表示每一秒由客户端向各大媒体网站百度 ...

最新文章

  1. linux（ubuntu）环境下安装及配置JDK
  2. 浅谈ClickableSpan ， 实现TextView文本某一部分文字的点击响应
  3. Oracle-计算岁数
  4. Java –远景JDK 8
  5. git 配置免密登陆
  6. 如何在Chrome浏览器中创建账户？
  7. SQL SERVER中的纵横查询
  8. CCF201809-1 卖菜
  9. Ubuntu16.04下禁用scp、sftp和winscp
  10. 傅里叶变换与Matlab
  11. 图像的数字化（以某化探异常图为例——地球物理）
  12. ucharts 柱状图圆角_调整柱状图圆角弧度
  13. 网页制作html基础知识思维导图
  14. c语言算术运算的作用,C语言算术运算符和算术表达式
  15. 求1至10乘阶的总和及求任意数乘阶
  16. vSphere Client连接主机提示远程服务器响应时间过长
  17. 失眠 我们该怎么办？
  18. OS X EI Captan 中Rootless
  19. Android MTK 放电曲线以及库轮值矫正
  20. 深度强化学习中的好奇心

热门文章

  1. 手把手搭建Guacamole教程
  2. 机器学习中对核函数的理解
  3. 输入n行的杨辉三角java,杨辉三角 Java代码 可以根据输入 输出相应行数的杨辉三角...
  4. 基于LSTM的股票价格预测模型【附源码】
  5. C 指针 | 从底层原理到花式技巧（图文详解）
  6. NVMe SSD 学习总结 04 ：NVME 优势：性能、维护性、单T性能、延迟、I/O效率和产品形态
  7. 曾国藩谕纪鸿(咸丰六年九月二十九夜）- 勤俭自持，习劳习苦
  8. 离散采样——Alias Method
  9. Redis-布隆过滤器（Bloom Filter）详解
  10. 计算机办公软件培训策划,计算机办公软件应用培训教学计划.pdf