SOURCE

console 命令行工具 X clear

                    
>
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>

本项目引用的自定义外部资源