echarts写飞机航线类图形

 var geoCoordMap = {
                '黑龙江': [127.9688, 45.368],
                '北京': [116.4551, 40.2539],
                "陕西": [109.1162, 34.2004],
                "新疆": [87.9236, 43.5883],
                "西藏": [91.11, 29.97],
                "重庆": [108.384366, 30.439702],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "广东": [113.12244, 23.009505],
                '上海': [121.4648, 31.2891],
                '温江区': [103.9526, 30.7617],
            
 };
 var dataT = [
                {
                    name: '上海',
                    value: 321 
                },
                {
                    name: '广东',
                    value: 123,
                },
                {
                    name: '重庆',
                    value: 433,
                },
                {
                    name: '北京',
                    value: 111,
                },
                {
                    name: '云南',
                    value: 261,
                },
                {
                    name: '陕西',
                    value: 123,
                },
                {
                    name: '新疆',
                    value: 771,
                },
                {
                    name: '西藏',
                    value: 91,
                },
                {
                    name: '贵州',
                    value: 230,
                },
                {
                    name: '黑龙江',
                    value: 165,
                }
            ];

 geoCoordMap['四川'] = [103.9526, 30.7617];



 var GZData = [];
 var tempData = ['四川', GZData];

 dataT.map((item, index) => {
     var arr = [];
     arr.push(item)
     arr.push({
         name: '四川'
     })
     GZData.push(arr)
 })

 var convertData = function(data) {
     var res = [];
     for (var i = 0; i < data.length; i++) {
         var dataItem = data[i];
         var fromCoord = geoCoordMap[dataItem[0].name];
         var toCoord = geoCoordMap[dataItem[1].name];
         if (fromCoord && toCoord) {
             res.push({
                 fromName: dataItem[0].name,
                 toName: dataItem[1].name,
                 coords: [fromCoord, toCoord],
                 value: dataItem[0].value
             });
         }
     }
     return res;
 };

 var color = ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46', '#27bbfe'];
 var series = [{
     type: 'map',
     map: 'china',
     //    width: '100%',
     zoom: 1.1  //可以显示map最外围的边框轮廓
     geoIndex: 1,
     zlevel: 1,
     //    aspectScale: 0.75, //长宽比
     showLegendSymbol: false, // 存在legend时显示
     label: {
         normal: {
             show: false,
         },
         emphasis: {
             show: false,
             textStyle: {
                 color: '#fff'
             }
         }
     },
     roam: false,
     itemStyle: {
         normal: {
             areaColor: 'rgba(128, 128, 128, 0)',
             borderColor: '#49a7d5', //省市边界线00fcff 516a89

         },
         emphasis: {
             areaColor: 'rgba(128, 128, 128, 0)',
         }
     },
     data: [{
         name: '南海诸岛',
         value: 0,
         itemStyle: {
             normal: {
                 opacity: 0,
                 label: {
                     show: false
                 }
             }
         }
     }]
 }, ];

 series.push({
     name: tempData[0],
     type: 'lines',
     zlevel: 3,
     symbol: ['none', 'circle'], 
     effect: {
         show: true,
         period: 3, //箭头指向速度,值越小速度越快
         trailLength: 0.01, //特效尾迹长度[0,1]值越大,尾迹越长重
         symbolSize: 4, //图标大小
     },
     lineStyle: {
         normal: {
             opacity: 1,
             curveness: 0.4, //曲线的弯曲程度
             color: '#609fd4'
         }
     },
     data: convertData(tempData[1])
 }, {
     name: tempData[0],
     type: 'scatter',
     coordinateSystem: 'geo',
     zlevel: 2,
     rippleEffect: {
         brushType: 'stroke'
     },
     label: {
         normal: {
             show: true,
             position: 'right',
             formatter: '{b}',

         }
     },
      symbolSize: function (val) {
          console.log(val)
          return val[2]/20+5;
      },
     itemStyle: {
         normal: {
             //                fontSize: 80,
         }
     },
     data: tempData[1].map(function(dataItem) {
         return {
             name: dataItem[0].name,
             value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
         };
     })
 }, {
     type: 'effectScatter',
     coordinateSystem: 'geo',
     zlevel: 4,
     symbolSize: 30,
     label: {
         normal: {
             show: true,
             position: 'right',
             formatter: '{b}',

             color: 'white'
         }
     },
     itemStyle: {
         normal: {
             color: 'white'
         }
     },
     rippleEffect: {
         scale: 4,
         brushType: 'stroke'
     },
     data: [{
         name: tempData[0],
         value: geoCoordMap[tempData[0]],
         visualMap: false
     }],
 });

 option = {
     tooltip: {
         trigger: 'item',
         formatter: function(params) {
             if (params.seriesType == "scatter" && params.name != tempData[0]) {
                 return "<br>" + params.data.name + " ---> " + params.seriesName + "<br />数量1:" + params.data.value[2];
             } else if (params.seriesType == "lines") {
                 return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量2:" + params.data.value;
             } else {
                 return params.name;
             }
         }
     },
     visualMap: {
         min: 70,
         max: 1000,
         //            textStyle: {
         //                color: '#fff',
         //            },
         show: true,
         pieces: [{
                        max: 200,
                        label: '未请假',
                        color: '#c23c33'
                    },
                    {
                        min: 200,
                        label: '无异常',
                        color: '#2c9a42'
                    }
                ],
        color: '#fff',
        textStyle: {
                    color: '#fff',
                },
     },
     geo: {
         map: 'china',
         zoom: 0.98,
         zlevel: 2,
         label: {
             emphasis: {
                 show: false
             },
         },
         roam: false, //是否允许缩放
         itemStyle: {
             normal: {
                 areaColor: '#214278',
                 borderColor: '#195BB9', //省市边界线00fcff 516a89

             },
             emphasis: {
                 color: '#112246' //悬浮背景
             }
         },
     },
     series: series
 };

生成图片如下
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值