console
var chartDom = document.getElementById('ec-id');
var myChart = echarts.init(chartDom);
var cnMap = echarts.getMap('china'), sdata = []
if(cnMap&&cnMap.geoJson){
//地市标记数据
sdata = echarts.getMap('china').geoJson.features.map((f)=>{
return {name:f.properties.name,value:f.properties.cp};
})
}
var ser_ds = {
name: '地市', type: 'scatter', coordinateSystem: 'geo',
symbolSize: 5, data: sdata,
itemStyle: { normal: {color: '#FFA500'}}
};
var svg_fj = 'path://M596.562 830.99l11.947-192.1 367.547 183.187V710.714L'
+'615.134 370.097V155.791c-0.02-56.63-45.548-142.138-101.694-142.138S'
+'411.767 99.161 411.767 155.791v214.255L50.842 710.766v111.363l361.472'
+'-183.187 14.755 207.926a131.335 131.335 0 0 0 1.12 14.61l-65.71 '
+'59.938v66.13L514.259 937l2.434-0.83L662 987.547v-66.13l-67.782-'
+'61.843 2.287-28.583z';
var svg_wrj = 'path://M629.3504 927.8976a211.3024 211.3024 0 0 1-53.0432-89.'
+'1904 29.184 29.184 0 1 1 55.9616-16.5888 152.1664 152.'
+'1664 0 1 0 189.44-189.44 29.3376 29.3376 0 0 1 16.5376'
+'-56.32 210.8928 210.8928 0 1 1-208.896 351.5392z m-528'
+'.2304-4.1472a211.0976 211.0976 0 0 1 88.3712-351.232 2'
+'9.2352 29.2352 0 0 1 16.6912 56.0128 152.4736 152.4736 '
+'0 1 0 189.7472 189.44 29.184 29.184 0 1 1 55.9616 16.5'
+'376 211.5584 211.5584 0 0 1-52.9408 89.2416 209.92 209'
+'.92 0 0 1-297.728 0z m128.8704-126.9248a103.0656 103.06'
+'56 0 0 1-1.1264-146.688l46.08-46.08a133.12 133.12 0 0 0'
+' 0-188.16l-46.08-46.08a103.0144 103.0144 0 0 1 1.1264-1'
+'46.8416 105.0624 105.0624 0 0 1 146.688 3.7888l43.4176 '
+'43.52a132.6592 132.6592 0 0 0 187.8528 0l46.08-46.08a10'
+'2.4 102.4 0 0 1 146.3808 1.1776 105.5232 105.5232 0 0 1'
+'-3.84 146.7904l-43.4176 43.52a133.12 133.12 0 0 0 0 188'
+'.16l46.08 46.08a103.0656 103.0656 0 0 1-1.2288 146.688 '
+'99.8912 99.8912 0 0 1-70.0928 28.0064 108.544 108.544 0'
+' 0 1-76.8-31.7952l-43.4176-43.52a132.6592 132.6592 0 0 '
+'0-187.8528 0l-43.4176 43.52a108.4416 108.4416 0 0 1-76.'
+'544 31.7952 100.1472 100.1472 0 0 1-69.888-27.8016z m17'
+'1.52-293.2736a112.64 112.64 0 1 0 112.64-112.64 112.64 '
+'112.64 0 0 0-112.64 112.64z m58.368 0a54.1184 54.1184 0'
+' 1 1 54.1184 54.2208 54.272 54.272 0 0 1-54.1696-54.220'
+'8zM182.1184 450.4576A210.8416 210.8416 0 1 1 394.752 10'
+'0.096a211.968 211.968 0 0 1 51.8144 85.3504 29.184 29.1'
+'84 0 1 1-55.6032 17.7664 152.1664 152.1664 0 0 0-252.72'
+'32-61.44 152.9344 152.9344 0 0 0 0 215.6544 150.6304 15'
+'0.6304 0 0 0 61.44 37.5296 29.2352 29.2352 0 0 1-8.8064'
+' 57.1392 30.72 30.72 0 0 1-8.7552-1.6384z m619.52-22.68'
+'16a29.2864 29.2864 0 0 1 19.712-36.352 152.4736 152.473'
+'6 0 1 0-189.44-189.44 29.184 29.184 0 1 1-55.9616-16.58'
+'88 211.1488 211.1488 0 0 1 53.4016-89.344 210.5344 210.'
+'5344 0 0 1 359.2192 149.1456 210.9952 210.9952 0 0 1-15'
+'0.6816 202.2912 30.2592 30.2592 0 0 1-8.2944 1.1776 29.'
+'2352 29.2352 0 0 1-27.9552-20.8896z';
var ser_hx1 = {
name: '北京-新疆',
type: 'lines',
coordinateSystem: 'geo',
polyline: true,//为 true 还可以设置更多coords点
data: [{ coords: [
[116.405285,39.904989],
[111,41],[101,41.5],[90,41.2],
[85.617733,40.792818]//起点-终点
]}],
lineStyle: { color: '#c46e54', width: 2, opacity: 1, type: 'dotted', curveness: 1 },
effect: {
show: true, period: 20, color: '#a10000', constantSpeed: 80,
trailLength: 0, symbolSize: 20, symbol: svg_fj
},
};
var ser_hx2 = {
name: '北京-海南', type: 'lines', coordinateSystem: 'geo',
data: [{ coords: [ [116.405285,39.904989],[109.83119,19.031971] ]}],
lineStyle: { width: 1, opacity: 1, type: 'dotted' },
};
var ser_hx2w = {
name: '北京-海南-飞行中', type: 'lines', coordinateSystem: 'geo',
data: [{ coords: [ [116.405285,39.904989], [113.1182375,29.46848] ]}],
lineStyle: { color: 'yellow',width: 3, opacity: 1, type: 'dotted' },
symbol: ['',svg_wrj], symbolSize: 15
};
var option = {
title: [
{ left: 'center', text: '飞行器航迹图' },
{ left: 'center', text: '航线-高度航程', left: "7%", top: "72%", }
],
geo: {
show: true, map: 'china', roam: true,
left: "2%", right: "2%", top: "2%", bottom: "2%",
itemStyle: { areaColor: "#0184d5", shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 2, shadowOffsetX: 5, },
},
grid:{ left: "3%", right: "62%", top: "75%", bottom: "5%", },
xAxis: { type: 'value', splitLine: { show: false }, max: 12, name: '航程km' },
yAxis: { type: 'value', splitLine: { show: false }, max: 320, name: '高度m' },
series: [
{ type: "map", name: "地图", geoIndex: 0 },
ser_ds,//地市标记
ser_hx1,//航线-1
ser_hx2, ser_hx2w,
{
data: [[0,0], [1,100], [2,210], [3,200], [4,210], [5,220], [6,210]],
type: 'line', smooth: true, lineStyle: { color: 'yellow' },
markArea: { data: [
[{yAxis:240},{yAxis:210}],
[{yAxis:210},{yAxis:180}]
] },
markLine: {
data: [{yAxis:120},{yAxis:300}]
}
}
]
};
myChart.setOption(option);
//console.log(myChart);
<h1><a href="https://echarts.apache.org/zh/index.html" target="_blank">echarts</a>地图-地点-航迹-高度</h1>
<div id="ec-id" style="width:100%;height:700px;border:1px solid rgba(25,186,139,.17)">123</div>