echarts采坑之路

echarts和百度地图结合时的坑

关键词：echarts，百度地图，dataToPoint
echarts的地图示例第一个是：杭州热门步行路线 - 百度地图
这时候很多小伙伴都用了这个列子，结果按照官方文档配置下来之后，发现浏览器报错
Cannot read property ‘dataToPoint’ of null，博主就不开心了，照着文档配置的怎么还报错了，我就去到万能的百度，找了一连串，先是以为中国地图china.js没引入，结果不是这个原因，然后我找了一晚上，发现是百度api地图和amap没引入，就查看官网示例源代码，抄了几个引用了。
博主源码链接：https://gitee.com/haoge_niubi/data_visualization_echarts/tree/master/

以下就是示例：

<div id="myChart"></div>
 <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js"></script>
 <script src="http://api.map.baidu.com/api?v=2.0&ak=8EE1W3Pfe209fvStDGsqWYOT08ysTdmL"></script>
 <script src="https://www.echartsjs.com/examples/vendors/echarts/extension/bmap.js"></script>
 <script>
 	var myChart = echarts.init(document.getElementById("myChart"));
 	// Axios请求，跨域代理请自己处理
 	Axios.get('https://www.echartsjs.com/examples/data/asset/data/hangzhou-tracks.json').then(res=>{
      if(!res || !res.data){
        return;
      }
      var busLines = [].concat.apply([], res.data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
          var pt = [busLine[i], busLine[i + 1]];
          if (i > 0) {
            pt = [
              prevPt[0] + pt[0],
              prevPt[1] + pt[1]
            ];
          }
          prevPt = pt;

          points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
          coords: points
        };
      }));
      myChart5.setOption( {
        bmap: {
          center: [116.46, 39.92],
          zoom: 10,
          roam: true,
          mapStyle: {
            styleJson: [{
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'land',
              'elementType': 'all',
              'stylers': {
                'color': '#f3f3f3'
              }
            }, {
              'featureType': 'railway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'color': '#fdfdfd'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'poi',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'green',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'subway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'local',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'building',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'label',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#999999'
              }
            }]
          }
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'bmap',
          polyline: true,
          data: busLines,
          silent: true,
          lineStyle: {
            normal: {
              color: '#c23531',
              color: 'rgb(200, 35, 45)',
              opacity: 0.2,
              width: 1
            }
          },
          progressiveThreshold: 500,
          progressive: 200
        }]
      });
    })
 </script>