echarts + 百度地图 飞线

效果：

代码地址

集成js

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你自己申请得百度地图ak"></script>
        <script  src="./dist/echarts.min.js" ></script>
        <script src="./dist/extension/bmap.min.js"></script>

添加div

 <div id="main" style="width: 600px;height:400px;"></div>

设置地图样式

 let   mapStyle = {
                styleJson: [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#395a75'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#285069'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',

                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',

                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',

                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',

                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',

                    }, {
                        'featureType': 'green',
                        'elementType': 'all',

                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',

                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',

                    }, {
                        'featureType': 'local',
                        'elementType': 'all',

                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',

                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',

                    }, {
                        'featureType': 'building',
                        'elementType': 'all',

                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',

                    }]
            }

设置飞线样式

let  geo = {
                "map": "bmap",
                "polyline": true,
                "progressiveThreshold": 100,
                "progressive": 400,
                "label": {
                    "emphasis": {
                        "show": false
                    }
                },
                "roam": true,
                "itemStyle": {
                    "normal": {
                        "areaColor": "#E7A060",   //连接线的颜色
                        "borderColor": "#ff9900"   //移动飞线的颜色
                    },
                    "emphasis": {
                        "areaColor": "#F300FF" //
                    }
                }
            }

设置飞线数据

let deviceList = [{
    deviceCount: 1,
    lat: 30.6799428454,
    lng: 104.067923463,
    province: "四川省",
    provinceId: "22",
},
{
    deviceCount: 1,
    lat: 26.6299067414,
    lng: 106.709177096,
    province: "贵州省",
    provinceId: "23",
},
{
    deviceCount: 18,
    lat: 22.8064929356,
    lng: 108.297233556,
    province: "广西壮族自治区",
    provinceId: "25",
}
]

let pointData = []

let lineData = []


  for (var i = 0; i < deviceList.length; i++) {
    let device = deviceList[i];
    if(!device.lng|| !device.lat){
       continue;
    }
    let toName = device.province?device.province:"";
   lineData.push({ "fromName":"总部","toName":toName,"coords":[ [device.lng,device.lat],[116.3,39.9]]});
   pointData.push({"name":toName,"value":[device.lng,device.lat,device.deviceCount]});
}

加载飞线图

 var myChart = echarts.init(document.getElementById('main'));
var option = {
                    //百度地图样式
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 4,
                        roam: true,
                        mapStyle: mapStyle
                    },
                    tooltip : {
                        trigger: 'item',
                        "formatter": function(res){
                            if(res.seriesType==="effectScatter"){
                                return res.name+" "+res.value[2]+' 台';
                            }

                        }
                    },

                    dataRange: {
                        show:false,
                        min : 0,
                        max : 100,
                        calculable : true,
                        color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    // 地图飞线样式选项
                    geo: geo,
                    series: [
                        {
                            //飞线样式
                            "name": "",
                            "type": "lines",
                            "coordinateSystem": "bmap",


                            // "zlevel": 2,
                            "symbol": ['none', 'arrow'],
                            // "symbolSize": 20,
                            "effect": {
                                symbolSize: 5,
                                "show": true,
                                "scaleSize": 2,
                                "period": 20,
                                "color": '#FFF',
                                "shadowBlur": 10,
                                constantSpeed: 50
                                // "show": true,
                                // "period": 6,
                                // "trailLength": 0,
                                // // "symbol": "path://M128 724.224c0 42.432 19.2 80.192 48 103.744l0 84.864C176 941.12 195.2 960 224 960l48 0C300.8 960 320 941.12 320 912.832l0-47.168 384 0 0 47.168C704 941.12 723.2 960 752 960l48 0c28.8 0 48-18.88 48-47.168l0-84.864C876.8 804.352 896 766.656 896 724.224L896 252.608C896 87.552 723.2 64 512 64 300.8 64 128 87.552 128 252.608L128 724.224zM296 771.392c-38.4 0-72-33.024-72-70.72 0-37.696 33.6-70.72 72-70.72 38.4 0 72 33.024 72 70.72C368 738.368 334.4 771.392 296 771.392zM728 771.392c-38.4 0-72-33.024-72-70.72 0-37.696 33.6-70.72 72-70.72s72 33.024 72 70.72C800 738.368 766.4 771.392 728 771.392zM800 488.448l-576 0L224 252.608l576 0L800 488.448z",
                                // "symbolSize": 8  //动画图大小
                            },
                            "lineStyle": {
                                "normal": {
                                    "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#58B3CC'
                                    }, {
                                        offset: 1,
                                        color: '#ffbf31'
                                    }], false),
                                    "width": 2,  //飞线粗细
                                    "opacity": 0.3,
                                    "curveness": 0.3
                                },
                                // normal:{
                                //     borderColor:'rgba(100,149,237,1)',
                                //     borderWidth:0.5,
                                //     areaStyle:{
                                //         color: '#1b1b1b'
                                //     }
                                // }
                            },
                            // "itemStyle": {
                            //     "normal": {
                            //         "borderWidth":1,
                            //         "lineStyle": {
                            //             "type": 'solid',
                            //             "shadowBlur": 10
                            //         }
                            //     }
                            // },
                            "data":lineData,
                        },
                        {
                            //终点点位样式
                            "name": "",
                            "type": "effectScatter",
                            "coordinateSystem": "bmap",

                            // "zlevel": 2,

                            "rippleEffect": {
                                period: 5,
                                scale: 3,
                                "brushType": "stroke"
                            },

                            // symbol:'emptyCircle',
                            symbolSize : 10,


                            // effect : {
                            //     show: true,
                            //     shadowBlur : 0
                            // },

                            itemStyle:{
                                normal:{
                                    "color": "#FF4040"
                                },
                            },

                            "label": {
                                "normal": {
                                    "show": false,
                                    "position": "right",
                                    "formatter": function(res){
                                        if(res.seriesType==="effectScatter"){
                                            return '';
                                        }
                                    }
                                }
                            },
                            // "itemStyle": {
                            //     // "normal": {
                            //     //     "color": "#ff00ff",
                            //     // }
                            //     "normal":{
                            //         "label":{ "show" :true},
                            //         symbolSize: 1000,
                            //         "color": "#FF4040"
                            //     },
                            //     "emphasis": {
                            //         "label":{ "position":'top'}
                            //     }
                            // },
                            //出发点和终点坐标
                            "data": pointData,
                        }
                    ]
                };




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);