echarts热力图展示

在angular项目中使用echarts的热力图，代码如下：

let dom = document.getElementById('main');
this.myChart = echarts.init(dom);
let option = {
    animation: false,
    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: [
                [120.14322240845, 30.236064370321, 1],
                [120.14280555506, 30.23633761213, 1],
                [120.14307598649, 30.236125905084, 1],
                [120.14301682797, 30.236035316745, 1],
                [120.1428734612, 30.236160551632, 1],
                [120.14200215328, 30.23595702204, 1],
                [120.14138577045, 30.236113748704, 1],
                [120.1400398833, 30.235973050702, 1],
                [120.13893453465, 30.23517220446, 1],
                [120.1382899739, 30.234062922977, 1],
            ],
            pointSize: 5,
            blurSize: 6
        }
    ]
};
this.myChart.setOption(option);

运行结果：

怎么实现热力图呀，用echart或百度地图都可以，只要能实现就行，请能人指点下

angular + 百度地图热力图：

        this.map = new BMap.Map('main');
        let point = new BMap.Point(124.354706, 40.000499);
        this.map.centerAndZoom(point, 7); // 初始化地图，设置中心点坐标和地图级别
        this.map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                window['BMAP_NORMAL_MAP'],
                window['BMAP_HYBRID_MAP']
            ]
        }));
        this.map.setCurrentCity('丹东');
        this.map.enableScrollWheelZoom(true); // 允许滚轮缩放

        let points = [];
        for (let i = 0; i < 1000;i++) {
            points.push(
                {
                    lng: 124.354706 + 0.001 * Math.floor(Math.random() * 10 + 1),
                    lat: 40.000499 + 0.001 * Math.floor(Math.random() * 10 + 1),
                    count: Math.floor(Math.random() * 10 + 1),
                }
            );
        }

        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js';
        document.body.appendChild(script);
        setTimeout(() => {
            let heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 20,opacity: 0.4,
                gradient: {.1: 'blue', .3: 'blue', .5: 'green', .7: 'yellow', .9: 'red'}
            });
            this.map.addOverlay(heatmapOverlay);
            heatmapOverlay.setDataSet({ data: points, max: 10 });
        },2000);

效果图：

import * as echarts from 'echarts';

var ROOT_PATH =
  'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var app = {};

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

$.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]);
      });
    })
  );
  myChart.setOption(
    (option = {
      animation: false,
      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: 6
        }
      ]
    })
  );
  // 添加百度地图插件
  var bmap = myChart.getModel().getComponent('bmap').getBMap();
  bmap.addControl(new BMap.MapTypeControl());
});

option && myChart.setOption(option);