echarts+高德地图api+react 实现迁徙图

下面是主要代码

import AMapLoader from '@amap/amap-jsapi-loader';
import * as echarts from 'echarts';
import 'echarts-extension-amap';

 

useEffect(() => {
    AMapLoader.load({
      key: mapKey,
      version: '2.0', // '1.4.15' '2.0',
      AMapUI: {
        version: '1.1',
        plugins: ['overlay/SimpleMarker'],
      },
      Loca: {
        version: '2.0', // '1.3.2' '2.0'
      },
    })
      .then((AMap) => {
        setAMap(AMap);        
        let map = null;
        const chart = echarts.init(
          document.getElementById(`mapContainer${dots}`)
        );
        const defaultOption = {
          // 加载 amap 组件
          amap: {
            // 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
            viewMode: '3D',
            // 高德地图支持的初始化地图配置
            // 高德地图初始中心经纬度
            center: mapCenter,
            // 高德地图初始缩放级别
            zoom: mapZoom,
            resizeEnable: true,
            pitch: 45,
            showLabel: true,
            mapStyle: `amap://styles/${mapStyle}`,
          },
          tooltip: {},
          series: [],
        };
        chart.setOption(defaultOption);
        const amapComponent = chart.getModel().getComponent('amap'); // 获取 ECharts 高德地图组件
        // 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
        map = amapComponent.getAMap();
        setMap(map);
        setChart(chart);
      })
      .catch((error) => {
        console.log('error---->', error);
      });
  }, [line]);

接着查 echarts  lines ,scatter, effectScatter 的配置定制自己想要的效果，注意以上三项配置中要加上： coordinateSystem: 'amap',  如
 

 series: [
        // 呼吸点
        {
          type: 'effectScatter',
          coordinateSystem: 'amap',
          zlevel: 200,
          animation: false,
          showEffectOn: 'render',
          rippleEffect: {
            period: 4, // 动画时间，值越小速度越快
            brushType: 'stroke', // 波纹绘制方式 stroke, fill
            scale: 16,
            color: 'orange',
            },
          }
}  

 最后chart.setOption 就可以看到自己想要的效果了，当然了,map.add(xxx) 加入标记，线啥的都是可以正常使用的；

本文参考了： (240条消息) echarts结合amap (echarts-extension-amap)_前端一枚的博客-CSDN博客