实现效果:
关键代码:
主要在 series 数据格式:
series: [
// 流向线条
{
name: '保定',
type: "lines",
zlevel: 1,
symbol: ["none", "arrow"],
effect: {
show: true,
period: 6, // 速度
trailLength: 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: {
color: "#fdc631",
width: 1,
curveness: 0.2
},
data: [
{
coords: [
[121.4648, 31.2891], // 流出位置
[115.655772, 39.018781] // 流入位置
]
},
{
coords: [
[106.550483, 29.563707],
[115.655772, 39.018781],
]
}
]
},
// 地图上的点
{
name: "保定",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
show: true,
position: "right",
formatter: "{b}"
},
itemStyle: {
color: "#fdc631",
symbolSize: 10
},
data: [
{
"name": "保定",
"value": [
115.655772,
39.018781
]
},
{
"name": "重庆",
"value": [
106.550483,
29.563707,
]
},
{
"name": "上海",
"value": [
121.4648,
31.2891,
]
},
{
"name": "广州",
"value": [
113.5107,
23.2196,
]
}
]
}
]
完整配置代码
options = {
backgroundColor: "#000079",
geo: {
map: "china",
itemStyle: {
normal: {
borderWidth: 1,
areaColor: "#0e2770",
borderColor: "#3AD7FF",
shadowBlur: 2,
shadowColor: "#3AA5FF",
},
},
emphasis: {
color: "#fff",
areaColor: "#032654",
},
},
series: [
{
type: "lines",
zlevel: 1,
symbol: ["none", "arrow"],
effect: {
show: true,
period: 6,
trailLength: 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: {
color: "#fdc631",
width: 1,
curveness: 0.2
},
data: [
{
coords: [
[121.4648, 31.2891], // 流出位置
[115.655772, 39.018781] // 流入位置
]
},
{
coords: [
[106.550483, 29.563707],
[115.655772, 39.018781],
]
}
]
},
// 地图上的点
{
name: "保定",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
show: true,
position: "right",
formatter: "{b}"
},
itemStyle: {
color: "#fdc631",
symbolSize: 10
},
data: [
{
"name": "保定",
"value": [
115.655772,
39.018781
]
},
{
"name": "重庆",
"value": [
106.550483,
29.563707,
]
},
{
"name": "上海",
"value": [
121.4648,
31.2891,
]
},
{
"name": "广州",
"value": [
113.5107,
23.2196,
]
}
]
}
]
}