由于echarts4以上版本不支持中国地图，所以需要下载一下china.json文件到自己的项目中，可在我的github上下载，地址：https://github.com/LuXiaoNa/chinaMap.git
在vue项目中实现代码如下：
<template>
<div>
<div ref="mapEcharts" style="height: 420px; width: 680px"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; //使用echarts5.0以上的版本不支持地图，需要引入china.json
import dataJson from "@/utils/china.json"; //引入china.json
export default {
name: "map",
props: { //该文件是子组件，父组件引用传值即可
chartData: {
type: Array,
default: () => [],
required: true,
},
},
watch: {
chartData: {
deep: true,
handler(val) {
echarts.registerMap("china", dataJson); //注册地图范围选择器
this.chart = echarts.init(this.$refs.mapEcharts);
window.onresize = this.chart.resize; //如果容器变大小，自适应从新构图
this.setOptions(val);
},
},
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
data() {
return {
chart: null,
};
},
methods: {
setOptions(data = []) {
this.chart.setOption({
tooltip: { //触摸地图悬浮显示的内容样式
triggerOn: "mousemove", //mousemove、click
padding: 8,
borderWidth: 1,
borderColor: "#409eff",
backgroundColor: "rgba(255,255,255,0.7)",
textStyle: {
color: "#000000",
fontSize: 13,
},
},
geo: {
// 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
map: "china",
aspectScale: 0.75,
zoom: 1.19, //地图的显示大小
label: {
//地图上的文字
show: true,
textStyle: {
color: "#ABB4C2",
},
},
roam: true /*是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启*/,
itemStyle: {
/*地图区域的多边形 图形样式*/
normal: {
areaColor: {
// 地图区域的颜色
type: "radial", // 径向渐变
x: 0.2, // 圆心 x,y
y: 0.6,
r: 0.6, // 半径
colorStops: [
{
offset: 0,
color: "#083d6b", // 0% 处的颜色
},
{
offset: 1,
color: "#0c1620", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderColor: "rgba(147, 235, 248, 0.5)", // 图形的描边颜色
borderWidth: 1, // 描边宽度 0表示无描边
shadowColor: "rgba(128, 217, 248, 0.5)", // 阴影颜色
shadowOffsetX: -1 /*阴影水平方向上的偏移距离。*/,
shadowOffsetY: 1 /*阴影垂直方向上的偏移距离。*/,
shadowBlur: 5, // 图形阴影的模糊大小
},
emphasis: {
areaColor: "#073458", //触摸区域的背景颜色
borderWidth: 0,
},
},
},
series: [
// 地图的线路图动画效果相关设置
{
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 15, //特效动画的时间，单位为 s。
trailLength: 0, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
scale: 0, //波纹圆环最大限制，值越大波纹越大 ,重要，否则显示越来越多
symbol:
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z", //线上的飞机图标，可直接复制使用
symbolSize: 15, //图标的大小
},
lineStyle: {
normal: {
color: "#839b52",
width: 2, //尾迹航线宽度
opacity: 0.4,
curveness: 0.2, //线的弯曲度
},
},
data: data,
},
],
});
},
},
};
</script>其中数据结构是有地点的经纬度构成的三维数据，如下所示：
[[[113.811,22.639],[ 119.125,33.791]],[[118.128, 24.544],[ 119.125, 33.791]]]实现效果如下图所示：
