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, fillscale: 16,color: 'orange',},}
}  

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

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