echarts结合高德地图

<div class='mapContainer'>
  <div id='echarts-amap'></div>
</div>

.mapContainer, #echarts-amap {
  width: 100%;
  height: 100%;
}

import * as echarts from 'echarts'
import 'echarts-extension-amap'
import AMap from 'AMap'
import geoJson from '@/utils/china.json'
let chart = ''
let amap = ''
let option = {
	 // 加载 amap 组件
	 amap: {
	   // 高德地图中心经纬度
	   // center: [108.39, 39.9],
	   // 高德地图缩放
	   zoom: 4,
	   // zooms: [4, 18], // 缩放比例范围
	   // 启用resize
	   resizeEnable: true,
	   // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
	   // renderOnMoving: true,
	   // 自定义地图样式主题
	   mapStyle: 'amap://styles/darkblue'
	 },
	 tooltip: {
	   trigger: 'item',
	   padding: 0,
	   borderWidth: 0,
	   backgroundColor: 'transparent',
	   formatter: (params) => {
	     const data = params.data
	     let heatMapBox = `
	       <div class="heatMapBox">
	         <div class="title">
	           ${data.name}
	         </div>
	         <div class="content">
	           <p>展示的数据描述：<span>${data.xx || '--'}</span></p>
	         </div>
	       </div>
	     `
	     return heatMapBox
	   }
	 },
	 animation: false,
     series: [
        {
          name: 'name',
          type: 'effectScatter',
          // 使用高德地图坐标系
          coordinateSystem: 'amap',
          data: [],
          symbolSize: function (val) {
            return val[2] / 10
          },
          encode: {
            // 编码使用数组中第三个元素作为value维度
            value: 2
          },
          showEffectOn: 'render', // 配置完成后显示特效
          rippleEffect: {
            brushType: 'fill',
            number: 2,
            color: '#763c4c'
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#f5eadd' // 0% 处的颜色
              }, {
                offset: 1, color: '#f05247' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          zlevel: 1
        }
      ]
    }

实现为动态水波纹效果

onMounted(() => {
  // 初始化ECharts
  chart = echarts.init(document.getElementById('echarts-amap'))
  // 初始展示全国数据
  getWholeCountry()
  drawMap()
})

const drawMap = () => {
 chart.setOption(option)
  // 从ECharts实例中取到高德地图组件实例
  amap = chart.getModel().getComponent('amap').getAMap()
  // 行政区绘制
  geoJson.features.forEach(item => {
    addPolygon(item.geometry.coordinates[0])
  })
}

// 区域绘制
function addPolygon (data) {
  let polygon = new AMap.Polygon({
    path: data,
    fillColor: '#0b1a40',
    fillOpacity: 0.5,
    strokeColor: 'transparent',
    zIndex: 11
  })
  polygon.on('mouseover', () => {
    polygon.setOptions({
      fillOpacity: 0.5,
      fillColor: '#0e2162'
    })
  })
  polygon.on('mouseout', () => {
    polygon.setOptions({
      fillOpacity: 0.5,
      fillColor: '#0b1a40'
    })
  })
  polygon.setMap(amap)
}

// 初始展示全国数据
async function getWholeCountry () {
  const { code, message, result } = await xxxx({})
  if (code !== 200) return
  let list = res.result || []
  let arr = [] // 展示的点 数据
  list.forEach(item => {
    arr.push({
      xxx: item.xxx,
      value: [item.longitude, item.latitude, 200]
    })
    option.series[0].data = arr
    chart.setOption({
      series: option.series
    })
  })
  amap.setFitView()
}

// 获取路线
const getCoordinatesFn = async () => {
   let res = await getAPi(params)
   const path = res.result.xxx || []
   // [[116.088859, 39.767266], [116.088859, 39.767266]] 这种结构的数组
   // 绘制轨迹
   const polyline = new AMap.Polyline({
     path,
     borderWeight: 2, // 线条宽度，默认为 1
     strokeColor: '#387cff', // 线条颜色
     lineJoin: 'round', // 折线拐点连接处样式
     lineCap: 'round'
   })
   polyline.setMap(amap)
   // 下面为添加起点终点的逻辑 根据业务需要添加
   if (xxx) {		      
     markerStart && amap.remove(markerStart)
     markerEnd && amap.remove(markerEnd)
     // 起点
     markerStart = new AMap.Marker({
       icon: new AMap.Icon({
         size: new AMap.Size(20, 20), // 图标尺寸
         image: 'https://xxx.xxx.png', // Icon的图像
         imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
         imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
       }),
       position: path[0],
       label: {
         direction: 'top'
       },
       offset: new AMap.Pixel(-10, -10)
     })
     markerStart.setMap(amap)
     // 终点
     markerEnd = new AMap.Marker({
       icon: new AMap.Icon({
         size: new AMap.Size(20, 20), // 图标尺寸
         image: 'https://xxx.xxx.png', // Icon的图像
         imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
         imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
       }),
       position: path[path.length - 1],
       label: {
         direction: 'top'
       },
       offset: new AMap.Pixel(-5, -8)
     })
     markerEnd.setMap(amap)
     amap.setFitView([polyline])
   }
 }