echats 带连接线地图 展示两地间的联通情况

function mapEcharts() {
                let geoCoordMap = {}
                let pointData = []
                let mapData = [];
                window.mapJson.features.forEach(item => {
                    geoCoordMap[item.properties.name] = [item.properties.center[0], item.properties.center[1]]
                     mapData.push({
                        name: item.properties.name,
                        value: 60,
                        cityCode: item.properties.adcode
                    })
                    pointData.push({
                        name: item.properties.name,
                        value: [item.properties.center[0], item.properties.center[1], 60],
                        cityCode: item.properties.adcode
                    })
                   
                })
                
                     // 基于准备好的dom,初始化echarts实例
                 var mapBoxEchart = echarts.init(document.getElementById('anhuimap'));
                 var planePath = 'arrow'; // 箭头的svg
                 // push进去线路开始-结束地点-经纬度
                 var convertData = function(data) {
                     var res = [];
                     for (var i = 0; i < data.length; i++) {
                         var dataItem = data[i];
                         var fromCoord = geoCoordMap[guangxiJson.features[0].properties.name];
                         var toCoord = geoCoordMap[dataItem.name];
                         if (fromCoord && toCoord) {
                             res.push([{
                                coord: toCoord
                             }, {
                                coord: fromCoord
                             }]);
                         }
                     }
                     return res;
                 };
                 var color = ['#fff', '#000000', '#000000']; //圆圈和字的颜色,线的颜色,箭头颜色
                 // 数据
                 var series = [  
                         {
                            type: 'map',
                            geoIndex: 0,
                            map: 'rmap',
                            roam: true,
                            zoom: 1.2,
                            
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                }
                            },
                            data: mapData,

                        },
                 
                 
                         {
                                 //出发地信息
                                 name: '广西壮族自治区',
                                 type: 'lines',
                                 zlevel: 1,
                                 tooltip: {
                                    trigger: "none",
                                },
                                 effect: {
                                     show: window.isProvice?true:false,
                                     period: 6, // 特效动画的时间,单位为 s
                                     trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长
                                     color: 'red', // 移动箭头颜色
                                     symbol: planePath,
                                     symbolSize: 6 // 特效标记的大小
                                 },
                                 lineStyle: {
                                     normal: {
                                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                             offset: 0,
                                             color: '#FEFEFE' // 出发
                                         }, {
                                             offset: 1,
                                             color: '#FEFEFE' // 结束 颜色
                                         }], false),
                                         width:window.isProvice?3:0,
                                         opacity: 0.8,
                                         curveness: 0.2,
                                         type:"dashed",
                                          shadowColor:'#c3c3c3',
                                     }
                                 },
                                 data: convertData(pointData)
                             }, 
                    {
                         
                         name: '广西壮族自治区',
                          tooltip: {
                                    trigger: "none",
                                },
                         type: 'effectScatter',
                         coordinateSystem: 'geo',
                         zlevel: 2,
                         rippleEffect: {
                             brushType: 'stroke'
                         },
                         label: {
                             normal: {
                                 show: true,
                                 position: 'right',
                                 formatter: '{b}',
                                 color:"#ED2C25",
                             }
                         },
                         symbolSize: function(val) {
                             return val[2] / 8;
                         },
                         
                         itemStyle: {
                             normal: {
                                 show:true,
                                color: '#ED2C25'
                            },
                         },
                        
                        data: pointData    
                    }];
                 // 遍历由郑州到其他城市的线路
                 // [
                     // ['广西壮族自治区', HFData]
                 // ].forEach(function(item, i) {
                   
                     // series.push(
                    // );
                // });
         
                // 指定相关的配置项和数据
                var mapBoxOption = {
                     geo: {
                        map: 'rmap',
                        roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                         aspectScale: 0.75,
                        zoom: 1.20,
                         
                        label: {
                             normal: {
                                 show: false,
                                 textStyle: {
                                     color: '#ED2C25'
                                 }
                             },
                             emphasis: { // 对应的鼠标悬浮效果
                                 show: false,
                                 textStyle: {
                                     color: "#FDCF30"
                                }
                            }
                        },
                        itemStyle: {
                            "normal": {
                                // shadowBlur: 20,
                                // shadowColor: 'rgba(0, 0, 0,0.8)',
                                "areaColor": "#EEEDED",
                                "borderColor": "rgba(237,14,14,1)"
                            },
                            "emphasis": {
                                "areaColor": "#c3c3c3",
                                opacity: 1,
                                
                            }
                       }
                     },
                    tooltip: {
                        trigger:window.isProvice? "item":"none",
                        backgroundColor:'rgba(206,64,63,1)',
                        formatter: p => {
                            let val = p.name + ":" + p.value;
                            let txtCon =
                                "<div style='font-size:18px;line-height:40px;min-width:200px;padding:5px;color:#fff'>"+
                                "<img src='./img/serverIcon.png' style='width:34px;height:34px'>"+
                                "<span style='margin-left:10px'>"
                                +val+"</span></div>"
                            return txtCon;
                        }
                    },
                     series: series
                 };
                 // 使用制定的配置项和数据显示图表
                 mapBoxEchart.setOption(mapBoxOption);
                 mapBoxEchart.off('click');
                mapBoxEchart.on('click', echartsMapClick);
                 // echart图表自适应
         window.addEventListener("resize", function() {
                mapBoxEchart.resize();
         });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值