高德地图结合echarts呼吸灯

依我司要求，需要在地图上标记上呼吸灯。但是一谷歌，发现很多都要收费的教程，（卑微在线）只好自己慢慢研究了，最终成功实现并分享和我一样的小白哦~

框架：vue-cli

效果图

第一步：申请高德地图key值

这个的话大家，大家直接去高德地图api的官方那边申请，教程很多，我就不说啦~

第二步：在index.html中引入高德地图

  <script src="//webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.CustomLayer"></script>

第三步：下载echarts依赖，和echarts-extension-amap

下载echarts依赖：

npm install echarts --save

下载echarts-extension-amap依赖：

npm install echarts-extension-amap --save

第四步：主要代码

引入echarts呼吸灯，引入高德地图，以及设置样式(详细见代码注释)：

<template>
  <div class="center">
    // 别忘了给装地图的盒子设置长、宽
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 引入echarts
import echarts from 'echarts'
// 引入echarts-extension-amap
import 'echarts-extension-amap'
export default {
  data () {
    return {
      option: ({
        title: {
          text: "设备分布图",
          subtext: "Distribution of fire fighting equipment",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        // 注意：百度地图的是bmap,高德地图的是amap.不是只改一个数值就可以的哦，下载的依赖也不同
        amap: {
          center: [113.944602, 23.030528],  //地图中心坐标
          zoom: 13,  
          roam: true, 
          mapStyle: 'amap://styles/darkblue'  //高德地图的主题
        },
        series: [
          {
            name: "设备数量",
            type: "effectScatter",    //类型气泡图
            coordinateSystem: "amap",
            // 这里我放了假数据，使用的时候 直接替换就好啦
            data: [{ name: "新区", value: [21.783109, 108.379762, 13] }, { name: "佳人", value: [108.379762, 23.783109, 13] }], 
            // symbol: ,  //自定义图标
            symbolSize: function (val) {
              return val[0] / 5;
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            itemStyle: {
              color: "#28cf06"//标注颜色
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      })
    }
  },
  async mounted () {  //别漏了async 哦
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'))

	// 这里赋值呼吸灯的数据 如：this.option.series[0].data = datas

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.option)
  }
}
</script>
<style lang="less">
.center {
  display: flex;
  width: 100%;
  height: 975px;
  #container {
    height: 100%;
    width: 1568px;
  }
}
</style>