效果图：
* [![20200508_183147.mp4 (447.42KB)](https://gw.alipayobjects.com/mdn/prod_resou/afts/img/ANNs6TKOR3isAAAAAAAAAAABkARQnAQ)](https://www.yuque.com/blueheart/blog/hlckeg?_lake_card=%7B%22status%22%3A%22done%22%2C%22name%22%3A%2220200508_183147.mp4%22%2C%22size%22%3A458163%2C%22percent%22%3A100%2C%22taskId%22%3A%222NVucy2b3K0o%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22hB5dr%22%2C%22videoId%22%3A%22inputs%2Fprod%2Fyuque%2F2020%2F726433%2Fmp4%2F1588934122691-c09f232d-a7ea-4082-ac13-010540d9a07d.mp4%22%2C%22card%22%3A%22video%22%7D#hB5dr)> 上代码，方便以后查阅！

1、html 文件

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>个人轨迹图</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  7.         <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
  8.         <link rel="stylesheet" href="../css/common.css">
  9.     </head>
  10.     <body>
  11.         <div id="main"></div>
  12.         <script src="../js/echarts.js"></script>
  13.         <script src="../js/echarts-gl.min.js"></script>
  14.         <script src="../js/jquery.min.js"></script>
  15.         <script src="../js/bmap.min.js"></script>
  16.         <script src="../data/data.js"></script>
  17.         <script src="../set/settings.js"></script>
  18.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yPCSLTLWeViz91a5GxkPcn5d2OzQlkcY"></script>
  19.         <script>
  21.             var myChart = echarts.init(document.getElementById('main'));
  23.             console.log(data);
  25.             if(colorOrWidth == 0){
  26.                 var lines2 = data.features.map(function(theD){
  27.                     return{
  28.                         coords:theD.geometry.coordinates
  29.                     }
  30.                 })
  31.             };
  33.             if(colorOrWidth == 1){
  34.                 var lines2 = data.features.map(function(theD){
  35.                     return{
  36.                         coords:theD.geometry.coordinates,
  37.                         lineStyle:{
  38.                             normal:{
  39.                                 color: theColorRamp[theD.properties.value-1],
  40.                             }
  41.                         }
  42.                     }
  43.                 })
  44.             }
  46.             if(colorOrWidth == 2){
  47.                 var lines2 = data.features.map(function(theD){
  48.                     return{
  49.                         coords:theD.geometry.coordinates,
  50.                         lineStyle:{
  51.                             normal:{
  52.                                 width: theD.properties.value * theWidthRatio,
  53.                             }
  54.                         }
  55.                     }
  56.                 })
  57.             }
  59.             if(colorOrWidth == 3){
  60.                 var lines2 = data.features.map(function(theD){
  61.                     return{
  62.                         coords:theD.geometry.coordinates,
  63.                         lineStyle:{
  64.                             normal:{
  65.                                 color: theColorRamp[theD.properties.value-1],
  66.                                 width: theD.properties.value * theWidthRatio
  67.                             }
  68.                         }
  69.                     }
  70.                 })
  71.             }
  74.             myChart.setOption(option = {
  75.                 bmap: {
  76.                     center: theCenter,
  77.                     zoom: theZoom,
  78.                     roam: true,
  79.                     mapStyle: {
  80.                       'styleJson': mapStyle
  81.                     }
  82.                 },
  83.                 series: [{
  84.                     type: 'lines',
  85.                     coordinateSystem: 'bmap',
  86.                     polyline: true,
  87.                     data: lines2,
  88.                     silent: true,
  89.                     lineStyle: {
  90.                         normal: {
  91.                             // color: '#c23531',
  92.                             color: theColor,
  93.                             opacity: theOpac,
  94.                             width: theWidth
  95.                         }
  96.                     },
  97.                     progressiveThreshold: 500,
  98.                     progressive: 200
  99.                 }, {
  100.                     type: 'lines',
  101.                     coordinateSystem: 'bmap',
  102.                     polyline: true,
  103.                     data: lines2,
  104.                     lineStyle: {
  105.                         normal: {
  106.                             width: 0
  107.                         }
  108.                     },
  109.                     effect: {
  110.                         period: thePeriod,
  111.                         constantSpeed: theSpeed,
  112.                         show: effectShow,
  113.                         trailLength: theEffLength,
  114.                         symbolSize: theEffWidth
  115.                     },
  116.                     zlevel: 1
  117.                 }]
  118.             });
  120.         </script>
  121.     </body>
  122. </html>

2、setting 文件

  1. // 此脚本用于修改图表的参数
  3. // 路线属性
  4. var colorOrWidth = 3; // 0代表既不用色彩也不用宽度来表示值，1代表用色彩，2代表用宽度，3代表二者皆用
  5. var theColorRamp = ['#49FF94', '#FFFD2A', '#FF2594', '#ff2a36', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']; // 路线颜色
  6. var theWidthRatio = 0.2 // 宽度与值的比值
  8. // 固定属性，当该属性没有和值相关，会自动设成如下值
  9. var theColor = 'rgb(200, 35, 45)'; // 线的颜色
  10. var theWidth = 3;    // 线的宽度
  11. var theOpac = 0.3;  // 线的透明度
  13. // 地图相关
  14. var theCenter = [114.066239, 22.531889]; // 中心点坐标
  15. var theZoom = 18; //视角远近 数字
  17. // 动画效果
  18. var effectShow = true;// 是否展示动画
  19. var theSpeed = 0;   // 尾迹速度，当尾迹速度不等于 0 时，使用单次循环时间作为速度依据
  20. var thePeriod = 2;   // 单次循环时间，只有当尾迹速度为 0 时才能生效
  21. var theEffWidth = 6;   // 尾迹宽度
  22. var theEffLength = 0.5; // 尾迹长度
  24. // 百度地图
  25. // 百度地图的accesstoken需要到 html 的第18行 自行进行替换
  26. var mapStyle = [
  27.     {
  28.         "featureType": "water",
  29.         "elementType": "all",
  30.         "stylers": {
  31.             "color": "#021019"
  32.         }
  33.     },
  34.     {
  35.         "featureType": "highway",
  36.         "elementType": "geometry.fill",
  37.         "stylers": {
  38.             "color": "#000000"
  39.         }
  40.     },
  41.     {
  42.         "featureType": "highway",
  43.         "elementType": "geometry.stroke",
  44.         "stylers": {
  45.             "color": "#147a92"
  46.         }
  47.     },
  48.     {
  49.         "featureType": "arterial",
  50.         "elementType": "geometry.fill",
  51.         "stylers": {
  52.             "color": "#000000"
  53.         }
  54.     },
  55.     {
  56.         "featureType": "arterial",
  57.         "elementType": "geometry.stroke",
  58.         "stylers": {
  59.             "color": "#0b3d51"
  60.         }
  61.     },
  62.     {
  63.         "featureType": "local",
  64.         "elementType": "geometry",
  65.         "stylers": {
  66.             "color": "#000000"
  67.         }
  68.     },
  69.     {
  70.         "featureType": "land",
  71.         "elementType": "all",
  72.         "stylers": {
  73.             "color": "#08304b"
  74.         }
  75.     },
  76.     {
  77.         "featureType": "railway",
  78.         "elementType": "geometry.fill",
  79.         "stylers": {
  80.             "color": "#000000"
  81.         }
  82.     },
  83.     {
  84.         "featureType": "railway",
  85.         "elementType": "geometry.stroke",
  86.         "stylers": {
  87.             "color": "#08304b"
  88.         }
  89.     },
  90.     {
  91.         "featureType": "subway",
  92.         "elementType": "geometry",
  93.         "stylers": {
  94.             "lightness": -70
  95.         }
  96.     },
  97.     {
  98.         "featureType": "building",
  99.         "elementType": "geometry.fill",
  100.         "stylers": {
  101.             "color": "#000000"
  102.         }
  103.     },
  104.     {
  105.         "featureType": "all",
  106.         "elementType": "labels.text.fill",
  107.         "stylers": {
  108.             "color": "#857f7f"
  109.         }
  110.     },
  111.     {
  112.         "featureType": "all",
  113.         "elementType": "labels.text.stroke",
  114.         "stylers": {
  115.             "color": "#000000"
  116.         }
  117.     },
  118.     {
  119.         "featureType": "building",
  120.         "elementType": "geometry",
  121.         "stylers": {
  122.             "color": "#022338"
  123.         }
  124.     },
  125.     {
  126.         "featureType": "green",
  127.         "elementType": "geometry",
  128.         "stylers": {
  129.             "color": "#062032"
  130.         }
  131.     },
  132.     {
  133.         "featureType": "boundary",
  134.         "elementType": "all",
  135.         "stylers": {
  136.             "color": "#1e1c1c"
  137.         }
  138.     },
  139.     {
  140.         "featureType": "manmade",
  141.         "elementType": "geometry",
  142.         "stylers": {
  143.             "color": "#022338"
  144.         }
  145.     },
  146.     {
  147.         "featureType": "poi",
  148.         "elementType": "all",
  149.         "stylers": {
  150.             "visibility": "off"
  151.         }
  152.     },
  153.     {
  154.         "featureType": "all",
  155.         "elementType": "labels.icon",
  156.         "stylers": {
  157.             "visibility": "off"
  158.         }
  159.     },
  160.     {
  161.         "featureType": "all",
  162.         "elementType": "labels.text.fill",
  163.         "stylers": {
  164.             "color": "#2da0c6",
  165.             "visibility": "on"
  166.         }
  167.     }
  168. ]

3、数据格式：

将shp文件转换成geojson，替换到 data.js 文件中

data.js 相关代码：

  1. var data = {geojson 数据}