vue+vue_cli3 + typeScript + echarts热力图

准备工作

1、申请百度地图秘钥http://lbsyun.baidu.com/apiconsole/key/create
注：如果是运行在浏览器端，Referer白名单只写 * 即可，入下图所示：

2、开始
2.1、index.html
在public/index.html中，在header中引入所需js文件

2.2 vue.config.js 加入下面这行代码

module.exports = {
 	configureWebpack: {
         externals: {
             "BMap": "BMap"
         }
	 }
}

2.3、写heatMap.vue组件（此组件为子组件，我还会在父组件中进行调用）

<template>
 	<div ref="thermodynamic" class="thermodynamic" :id="id"> </div>
</template>
<script lang="ts">
 import { Component, Vue, Prop, Watch } from "vue-property-decorator"
 import 'echarts/extension/bmap/bmap.js'


 declare const BMap: any;

 @Component({})
 export default class About extends Vue {
     // prop
     @Prop({ required: true, default: '1'}) id!: string
     @Prop({ required: true, default: [] }) points!: any[]

     options: any = {}
     myChart: any = {}

     @Watch('points', {deep: true})
     onDataChanged(val: any, oldVal: any) {
         this.drawMultiLine()
     }


     mounted() {
         this.drawMultiLine()
     }

     drawMultiLine() {
         this.myChart = (this as any).$echarts.init(
             <HTMLDivElement | HTMLCanvasElement> document.getElementById(this.id)
         );

         this.options = {
             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: this.points,
                 pointSize: 5,
                 blurSize: 6
             }]
         };



         // 加载默认参数
         (this as any).myChart.setOption(this.options);
         // window.addEventListener("resize", (this as any).myChart.resize);

         // 添加百度地图插件
         let bmap = (this as any).myChart.getModel().getComponent('bmap').getBMap();
         bmap.addControl(new BMap.MapTypeControl());
         
     }
 }
</script>

<style lang="less">
 .thermodynamic {
     width: 100%;
     height: 100%;
 }
</style>

2.4、父组件传值

<template>
	<div>
    	<heatMapChart  id="thermodynamicChartID" :points="points"/>  
	</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import heatMapChart from '@/components/Charts/heatMap.vue'
import Axios from 'axios'

@Component({
 	components: { thermodynamicChart }
})

export default class About extends Vue {

     points: any[] = []
 
     mounted() {
         this.getData()
     }

     getData(){
     	//这里的hangzhou-tracks.json文件，是从echarts热力图官方安利中拿到的，在官方示例中，console.log最初的data，复制保存在本地即可。
         Axios.get("http://localhost:8080/data/hangzhou-tracks.json").then((res: any) => {
             let data  = res.data
             this.points = [].concat.apply([], data.map(function (track: any) {
                 return track.map(function (seg:any) {
                     return seg.coord.concat([1]);
                 });
             }));
         });
     }
}
</script>

最后的效果图：