console
var chartDom = document.getElementById('ec-id');
var myChart = echarts.init(chartDom);
function haversine(lat1, lon1, lat2, lon2, R = 6371) {
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
var ser_dd = []
var ser_ds = {
name: '标记', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin',
symbolSize: 25, data: ser_dd,
label: { show: true, formatter: (p)=>{ return p.data.name;} }
};
var ser_cor1 = [];
var ser_hx1 = {
name: '航线', type: 'lines', coordinateSystem: 'geo', polyline: true,
data: [{ coords: ser_cor1 }],
lineStyle: { color: '#c46e54', width: 2, opacity: 1, type: 'dotted', curveness: 1 }
};
var option = {
geo: {
show: true, map: 'china', roam: true,
left: "4%", right: "4%", top: "2%", bottom: "21%",
itemStyle: {
areaColor: "#0184d5",
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 2,
shadowOffsetX: 5,
},
},
series: [
{ type: "map", name: "地图", geoIndex: 0 },
ser_ds
]
};
myChart.setOption(option);
let cityName,cityId;
myChart.on("click", { seriesName: "地图" }, function (params) {
let name = params.name,
{offsetX,offsetY} = params.event,
xy = myChart.convertFromPixel('geo', [offsetX,offsetY]),
len = haversine(116.405285, 39.904989, xy[0], xy[1]);
ser_dd.push({ name: ''+ser_dd.length,value: xy })
ser_cor1.push(xy);
if(ser_cor1.length == 2){ option.series.push(ser_hx1); }
myChart.setOption(option);
});
<h3><a href="https://echarts.apache.org/zh/index.html" target="_blank">echarts</a>-航线编辑</h3>
<div id="ec-id" style="width:100%;height:600px;border:1px solid rgba(25,186,139,.17)">
123
</div>