echarts使用百度地图扩展热力图

Examples - Apache ECharts

 将以下代码复制到上面的连接上自己调试即可
 

$.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function (data) {
  var points = [].concat.apply(
    [],
    data.map(function (track) {
      //共三个参数，前两个为热力图坐标位置，第三个为热力图热力指标数据
      return track.map(function (seg) {
        return seg.coord.concat([1]);//与visualMap的min/max对应
      });
    })
  );
  console.log(points,"points")
  myChart.setOption(
    (option = {
      animation: true,
      bmap: {
        center: [120.13066322374, 30.240018034923],//地图中心
        zoom: 14,//缩放尺寸
        roam: true//鼠标滚轮是否可以缩放
      },
      visualMap: {
        show: false,
        top: 'top',
        min: 0,
        max: 5,
        seriesIndex: 0,
        calculable: true,
        inRange: {
          color: ['blue', 'blue', 'green', 'yellow', 'red']
        }
      },
      series: [
        {
          type: 'heatmap',//热力图
          coordinateSystem: 'bmap',
          data: points,//坐标
          pointSize: 5,//热力宽度
          blurSize: 5//热力背景模糊
        }
      ]
    })
  );
  // 添加百度地图插件
  var bmap = myChart.getModel().getComponent('bmap').getBMap();
  bmap.addControl(new BMap.MapTypeControl());
});