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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值