下面是主要代码
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博客