Echarts地图实现放射性线

实现Echarts地图实现放射性线如图所示效果：

直接上代码：（代码可直接放到echarts官方实例运行），有疑问可随时评论或者私信

var color = ['#46bee9'];
var series = [];
var res = [];
var lineData = [
    {
        "val":32,
        "blat":31.57,
        "blon":120.3,
        "elat":23.05,
        "elon":113.75,
        "bcitysim":"无锡市",
        "ecitysim":"东莞市"
    },
    {
        "val":32,
        "blat":30.57,
        "blon":110.3,
        "elat":23.05,
        "elon":113.75,
        "bcitysim":"无锡市",
        "ecitysim":"东莞市"
    },
     {
        "val":32,
        "blat":28.57,
        "blon":110.3,
        "elat":23.05,
        "elon":113.75,
        "bcitysim":"无锡市",
        "ecitysim":"东莞市"
    },
     {
        "val":32,
        "blat":40.57,
        "blon":120.3,
        "elat":23.05,
        "elon":113.75,
        "bcitysim":"无锡市",
        "ecitysim":"东莞市"
    },
     {
        "val":32,
        "blat":38.57,
        "blon":115.3,
        "elat":23.05,
        "elon":113.75,
        "bcitysim":"无锡市",
        "ecitysim":"东莞市"
    },
];
for (var i = 0; i < lineData.length; i++) {
 res.push({
  fromName:lineData[i].bcitysim,
  toName:lineData[i].ecitysim,
  coords: [
   [lineData[i].blon,lineData[i].blat],
   [lineData[i].elon, lineData[i].elat]
   ],
  count:lineData[i].val 
 });

}
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
series.push({
    name: '',
    type: 'lines',
    zlevel: 1,
    effect: {
        show: true,
        constantSpeed: 20,
        symbol: planePath,
        symbolSize: 10,
        trailLength: 0,
    },
    tooltip:{
     formatter:function(param){
      return param.data.fromName+'>'+param.data.toName+'
趟次：'+param.data.count
     }
    },
    lineStyle: {
     normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#58B3CC'
                }, {
                    offset: 1, color: '#F58158'
                }], false),
            width: 2,
            opacity: 0.5,
            curveness: 0.1
        }
    },
    data: res
},{
 type: 'map',
    mapType: 'china',
    top:'20%',
    tooltip:{
     show:false
    },
 itemStyle: {
        areaColor: '#00196d',
        borderColor: '#0a53e9'
    },
    emphasis:{
     label:{
      show:false
     },
     itemStyle:{
      areaColor: '#00196d',
            borderColor: '#0a53e9'
     }
    }
});
option = {
    backgroundColor: '#010347',
    title: {
        text: '假数据',
        textStyle: {
            color: '#ffffff'
        }
    },
    legend: {
            show: true,
            selected: {},
            x: 'left',
            orient: 'vertical',
            textStyle: {
                color: 'white'
            },
            data: []
        },
     tooltip : {
         trigger: 'item',
         show : true,
     },
     geo: {
         map: 'china',
         label: {
             show:false
         },
         top:'20%',
         roam: false,
         itemStyle: {
                areaColor: '#00196d',
                borderColor: '#1773c3',
                shadowColor: '#1773c3',
                shadowBlur: 20
         }
     },
     series: series
};