飞线echarts effectScatter配置项内容和展示

配置项如下
      let url = 'www.baidu.com'
let attackNode = {
    name: '杭州',
    value: [120.165024, 30.252501],
    ip: '121.40.198.98'
}
var allCity = [{
  "id": 1,
  "name": "南京",
  "value": [118.796877, 32.060255],
  "color": "#00BCD4",
  "attack_times": 6925,
  "ip": '117.88.5.20',
  "type": 'cc',
  "attackName": 'CC攻击'
}]

 var series = [{
     type: 'effectScatter',
     coordinateSystem: 'geo',
     zlevel: 4,
     symbolSize: 20,
     itemStyle: {
         normal: {
             color: '#FAF83899'
         }
     },
     tooltip: {
        formatter: function (params) {
            let data = params.data
            let str = ` 
            ${url} (${data.name})<br>
            节点已成功防御
            `
            return str
        }
     },
     rippleEffect: {
         scale: 2,
         brushType: 'stroke'
     },
     data: [attackNode],
 }
 ];

 //绘制所有城市 显示特效
 allCity.forEach(function(item) {
     series.push({
         name: item.name,
         type: 'lines',
         zlevel: 2,
        "polyline": true,
        "lineStyle": {
            "normal": {
                "width": 0
            }
        },
        "effect": {
            "constantSpeed": 70,
            "show": true,
            "trailLength": 0.6,
            "symbolSize": 2,
            color: item.color,
            loop: true
        },
         data: [{
            fromName: item.fromName,
             toName: item.toName,
             coords: [item.value, attackNode.value]
         }]
     })
     series.push({
         type: 'effectScatter',
         coordinateSystem: 'geo',
         zlevel: 4,
         symbolSize: item.attack_times > 5000 ? item.attack_times / 1000 : 5,
         rippleEffect: {
             scale: 6,
             brushType: 'stroke'
         },
         tooltip: {
            formatter: function (params) {
                let str = ` 
                ${item.ip} (${item.name})<br>
                正在发起 ${item.attackName} (${item.attack_times})
                `
                return str
            }
        },
         itemStyle: {
             normal: {
                color: item.color
             }
         },
         data: [{
             name: item.name,
             value: item.value,
             visualMap: false
         }],
     })
 });



 option = {
     backgroundColor: '#051b4a',
     tooltip: {
         trigger: 'item'
     },
     geo: {
         map: 'china',
         zoom: 1,
         scaleLimit: {
             min: 0.5,
             max: 3
         },
         label: {
             emphasis: {
                 show: true,
                 color: '#fff'
             }
         },
         roam: true,
         itemStyle: {
             normal: {
                 borderColor: 'rgba(147, 235, 248, 1)',
                 borderWidth: 1,
                 areaColor: {
                     type: 'radial',
                     x: 0.5,
                     y: 0.5,
                     r: 0.8,
                     colorStops: [{
                         offset: 0,
                         color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                     }, {
                         offset: 1,
                         color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                     }],
                     globalCoord: false // 缺省为 false
                 },
             },
             emphasis: {
                 areaColor: '#389BB7',
                 borderWidth: 0
             }
         }
     },
     series: series
 };
    
截图如下