网络攻击流量图（中国/全球）ECharts Gallery

20:11:45图表已生成
代码
        var countMax = 2000
        var randomInt = function(min = 0, max = 1000) {
            var num = Math.random() * (max - min) + min
            return parseInt(num, 10)
        }

        var geoCoordMap = {
            "江苏": [118.8062, 31.9208],
            '黑龙江': [127.9688, 45.368],
            '内蒙古': [110.3467, 41.4899],
            "吉林": [125.8154, 44.2584],
            '北京市': [116.4551, 40.2539],
            "辽宁": [123.1238, 42.1216],
            "河北": [114.4995, 38.1006],
            "天津": [117.4219, 39.4189],
            "山西": [112.3352, 37.9413],
            "陕西": [109.1162, 34.2004],
            "甘肃": [103.5901, 36.3043],
            "宁夏": [106.3586, 38.1775],
            "青海": [101.4038, 36.8207],
            "新疆": [87.9236, 43.5883],
            "四川": [103.9526, 30.7617],
            "重庆": [108.384366, 30.439702],
            "山东": [117.1582, 36.8701],
            "河南": [113.4668, 34.6234],
            "安徽": [117.29, 32.0581],
            "湖北": [114.3896, 30.6628],
            "浙江": [119.5313, 29.8773],
            "福建": [119.4543, 25.9222],
            "江西": [116.0046, 28.6633],
            "湖南": [113.0823, 28.2568],
            "贵州": [106.6992, 26.7682],
            "云南": [102.9199, 25.4663],
            "广东": [113.12244, 23.009505],
            "广西": [108.479, 23.1152],
            "海南": [110.3893, 19.8516],
            '上海': [121.4648, 31.2891],
            "西藏": [91.11, 29.97],
            '尼日利亚': [-4.388361, 11.186148],
            '美国洛杉矶': [-118.24311, 34.052713],
            '香港邦泰': [114.195466, 22.282751],
            '美国芝加哥': [-87.801833, 41.870975],
            '加纳库马西': [-4.62829, 7.72415],
            '英国曼彻斯特': [-1.657222, 51.886863],
            '德国汉堡': [10.01959, 54.38474],
            '哈萨克斯坦阿拉木图': [45.326912, 41.101891],
            '俄罗斯伊尔库茨克': [89.116876, 67.757906],
            '巴西': [-48.678945, -10.493623],
            '埃及达米埃塔': [31.815593, 31.418032],
            '西班牙巴塞罗纳': [2.175129, 41.385064],
            '柬埔寨金边': [104.88659, 11.545469],
            '意大利米兰': [9.189948, 45.46623],
            '乌拉圭蒙得维的亚': [-56.162231, -34.901113],
            '莫桑比克马普托': [32.608571, -25.893473],
            '阿尔及利亚阿尔及尔': [3.054275, 36.753027],
            '阿联酋迪拜': [55.269441, 25.204514],
            '匈牙利布达佩斯': [17.108519, 48.179162],
            '澳大利亚悉尼': [150.993137, -33.675509],
            '美国加州': [-121.910642, 41.38028],
            '澳大利亚墨尔本': [144.999416, -37.781726],
            '墨西哥': [-99.094092, 19.365711],
            '加拿大温哥华': [-123.023921, 49.311753]
        }

        // points 所有攻击流量, 由多个攻击向量组成(from -> to), from == 1, to >= 1
        var points = [{
                'from': {
                    'name': '北京市',
                },
                'to': [{
                    'name': '福建',
                    'count': randomInt()
                }, {
                    'name': '江西',
                    'count': randomInt()
                }, {
                    'name': '湖南',
                    'count': randomInt()
                }, {
                    'name': '贵州',
                    'count': randomInt()
                }, {
                    'name': '云南',
                    'count': randomInt()
                }, {
                    'name': '广东',
                    'count': randomInt()
                }, {
                    'name': '广西',
                    'count': randomInt()
                }, {
                    'name': '海南',
                    'count': randomInt()
                }, {
                    'name': '上海',
                    'count': randomInt()
                }, {
                    'name': '西藏',
                    'count': randomInt()
                }, {
                    'name': '北京市',
                    'count': randomInt()
                }, {
                    'name': '辽宁',
                    'count': randomInt()
                }, {
                    'name': '河北',
                    'count': randomInt()
                }, {
                    'name': '天津',
                    'count': randomInt()
                }, {
                    'name': '四川',
                    'count': randomInt()
                }]
            },

            {
                'from': {
                    'name': '四川',
                },
                'to': [{
                    'name': '江苏',
                    'count': randomInt()
                }, {
                    'name': '黑龙江',
                    'count': randomInt()
                }, {
                    'name': '内蒙古',
                    'count': randomInt()
                }, {
                    'name': '吉林',
                    'count': randomInt()
                }, {
                    'name': '北京市',
                    'count': randomInt()
                }, {
                    'name': '辽宁',
                    'count': randomInt()
                }, {
                    'name': '河北',
                    'count': randomInt()
                }, {
                    'name': '天津',
                    'count': randomInt()
                }, {
                    'name': '山西',
                    'count': randomInt()
                }, {
                    'name': '陕西',
                    'count': randomInt()
                }, {
                    'name': '甘肃',
                    'count': randomInt()
                }, {
                    'name': '宁夏',
                    'count': randomInt()
                }, {
                    'name': '青海',
                    'count': randomInt()
                }, {
                    'name': '新疆',
                    'count': randomInt()
                }, {
                    'name': '重庆',
                    'count': randomInt()
                }, {
                    'name': '山东',
                    'count': randomInt()
                }, {
                    'name': '河南',
                    'count': randomInt()
                }, {
                    'name': '安徽',
                    'count': randomInt()
                }, {
                    'name': '湖北',
                    'count': randomInt()
                }, {
                    'name': '浙江',
                    'count': randomInt()
                }]
            }
        ]

        /*
            获取每个散点坐标
            将所有的 from, to 中的coord收集
            value 值为 to 的所有count之和，例如 北京->新疆 100, 四川 -> 新疆 200, 则 新疆 value = 300
            返回数据: [
                { name: '北京', value: [116.4551, 40.2539, 1930] },
                { name: '浙江', value: [119.5313, 29.8773, 58] }
            ]
        */
        function getScatterData(data) {
            var res = []
            var coords = {}
            var values = {}

            for (var i = 0; i < data.length; i++) {
                var from_data = data[i].from
                var to_data = data[i].to
                // 将 from 先记录
                coords[from_data.name] = geoCoordMap[from_data.name]
                if (!values.hasOwnProperty(from_data.name)) {
                    values[from_data.name] = 0
                }


                // 遍历 to
                to_data.map(function(item) {
                    // 记录 value 如果存在 直接记录 数值相加
                    if (values.hasOwnProperty(item.name)) {
                        values[item.name] = values[item.name] + item.count
                    } else {
                        values[item.name] = item.count
                    }

                    // 记录 coord, 如果重复 就不记录了, 前提是保证 每个 name 只能对应唯一的 coord
                    if (!coords.hasOwnProperty(item.name)) {
                        coords[item.name] = geoCoordMap[item.name]
                    }
                })
            }

            // 拼装数据
            for (var n in coords) {
                res.push({
                    name: n,
                    value: coords[n].concat(values[n])
                })
            }

            return res

        }

        /*
            获取连线数据 连线方向 from -> to
            返回数据: [
                { coords: [ [116.4551, 40.2539], [119.5313, 29.8773] ], value: 510},
            ]
        */
        function getLinesData(data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i]
                res = res.concat(
                    dataItem.to.map(function(item) {
                        return {
                            // name: item.name,
                            coords: [geoCoordMap[dataItem.from.name], geoCoordMap[item.name], item.name, item.count],
                            value: item.count
                        }
                    })
                )
            }
            return res
        }

        option = {
            backgroundColor: '#013954',
            title: {
                text: '网络攻击流量图（中国/全球）',
                subtext: '@idhyt',
                x: 'center',
                top: 20,
                textStyle: {
                    color: "#fff"
                },
            },
            geo: {
                map: 'china',
                show: true,
                aspectScale: 0.75, //长宽比
                layoutCenter: ["50%", "40%"], //地图位置
                layoutSize: "80%",
                zoom: 1.1,
                roam: true, //是否允许缩放
                label: {
                    normal: {
                        // 是否显示省份名称
                        show: false,
                        textStyle: {
                            color: '#1DE9B6'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#FFA07A' // 'rgb(183,185,14)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgb(147, 235, 248)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: '#09132c' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#274d68' // 100% 处的颜色
                            }],
                            globalCoord: true // 缺省为 false
                        },
                        shadowColor: 'rgb(58,115,192)',
                        shadowOffsetX: 5,
                        shadowOffsetY: 6
                    },
                    emphasis: {
                        // areaColor: '#2AB8FF',
                        areaColor: 'rgb(46,229,206)',
                        borderWidth: 0.1,
                        color: 'green',
                        label: {
                            show: true
                        }
                    }
                },
            },
            // 图例值控制 数值越大 颜色越深
            visualMap: {
                min: 0,
                max: countMax,
                top: '40%',
                right: 100,
                // bottom: 400,
                range: [0, countMax],
                show: true,
                calculable: true,
                // color: ["#0bc7f3"],
                textStyle: {
                    color: "#fff"
                },

            },
            // 提示信息
            tooltip: {
                trigger: "item",
                backgroundColor: "#1540a1",
                borderColor: "#FFFFCC",
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: "z-index:100",
                formatter: function(params, ticket, callback) {
                    // 散点提示信息
                    if (params.componentSubType === 'effectScatter') {
                        return "<span style='color:#fff;'>" + params.name + "</span><br/> 被攻击次数：" + params.value[2]
                    } else
                    if (params.componentSubType === 'lines') {
                        return "<span style='color:#fff;'>" + params.data.coords[2] + '</span><br/> be attacked：' + params.data.coords[3]
                    }
                }
            },
            toolbox: {
                x: 'center',
                top: 80,
                feature: {
                    myTool1: {
                        show: true,
                        title: 'China',
                        icon: 'path://M828.823 847.837l63.619 0 0-64.263-63.619 0 0 64.263zM510.741 912.091l127.23 0 0 64.268-127.23 0 0-64.268zM1008.606 153.874l-123.609-106.174c-9.098-7.766-21.691-9.837-32.765-5.203l-95.677 39.911-77.1 48.831c-10.186 6.556-15.85 18.329-14.575 30.402l9.609 94.608-89.001 61.763-104.905 12.524-83.851-46.016-52.098-102.629c-7.891-15.553-26.654-21.852-42.239-14.204l-113.053 55.718c-10.939 5.398-17.875 16.587-17.875 28.87l0 42.147-37.728 37.149-42.878 0c-8.204 0-16.159 3.21-22.074 9.001l-57.257 55.716c-12.974 12.658-12.974 33.612 0 46.27l50.198 48.849 28.818 137.906c1.524 7.276 5.474 13.829 11.262 18.449l104.391 84.514c5.661 4.56 12.665 7.063 19.914 7.063l115.024 0 0 69.921c0 17.743 14.246 32.14 31.802 32.14l128.062 0 57.959 39.851c10.052 6.931 23.09 7.439 33.653 1.349l78.75-45.443 108.661-41.321c5.788-2.189 10.746-6.103 14.444-11.113l68.384-94.862c3.947-5.534 6.109-12.148 6.109-18.899l0-93.573c0-8.684-3.498-16.976-9.605-23.007l-39.95-39.204 50.571-33.67c4.708-3.091 8.463-7.394 11.01-12.465l35.498-71.541 89.765-63.11c8.522-6.029 13.615-15.852 13.615-26.353l0-129.687c0-9.431-4.138-18.385-11.262-24.475l0 0zM956.243 291.195l-82.762 58.314c-4.319 3.075-7.884 7.185-10.238 11.954l-35.249 71.06-76.719 50.845c-16.992 11.306-19.281 35.531-4.709 49.867l58.716 57.712 0 69.532-56.685 78.682-104.261 40.091-65.907 37.659-49.687-34.18c-5.28-3.675-11.513-5.593-17.939-5.593l-106.114 0 0-69.923c0-17.743-14.249-32.14-31.81-32.14l-135.626 0-86.841-70.252-28.431-136.362c-1.342-6.315-4.454-12.09-9.103-16.528l-33.395-32.577 29.198-23.591 38.107 0c8.271 0 16.286-3.267 22.209-9.12l56.549-55.716c6.045-5.985 9.545-14.266 9.545-22.949l-5.284-10.079 72.521-58.554 42.309 83.347c2.926 5.728 7.505 10.467 13.105 13.557l101.405 55.733c5.789 3.089 12.404 4.364 18.961 3.583l122.647-14.695c5.09-0.646 9.989-2.462 14.249-5.414l111.073-76.985c9.613-6.691 14.826-18.058 13.617-29.759l-9.539-93.766 55.601-35.666 72.778-29.952 97.711 83.93 0 97.936-0.001 0zM956.243 291.195z',
                        onclick: function(e) {
                            regionSwitch(e.scheduler.ecInstance, r = 0)
                        }
                    },
                    myTool2: {
                        show: true,
                        title: 'World',
                        icon: 'path://M496 0c-273.952 0-496 222.048-496 496s222.048 496 496 496 496-222.048 496-496-222.048-496-496-496zM927.2 480l-191.872 0c-1.76-70.88-14.368-138.592-36.736-200.576 43.2-18.016 83.136-41.984 119.552-70.304 64.736 72.672 105.216 167.04 109.056 270.88zM478.304 927.104c-53.184-44.288-97.792-101.792-130.432-168.576 41.888-13.088 86.272-20.256 132.128-21.728l0 190.368c-0.576 0-1.12-0.032-1.696-0.064zM513.632 64.896c60.352 50.24 109.6 117.536 142.912 196.032-45.632 15.584-94.112 24.64-144.576 26.24l0-222.368c0.608 0.032 1.12 0.064 1.664 0.096zM566.944 70.336c88.32 14.688 167.552 55.936 229.248 115.648-33.504 25.696-70.112 47.456-109.696 63.936-29.12-69.024-69.984-130.048-119.552-179.584zM480 64.8l0 222.368c-50.464-1.632-98.976-10.656-144.576-26.24 33.312-78.496 82.56-145.792 142.912-196.032 0.576-0.032 1.088-0.064 1.664-0.096zM305.472 249.952c-39.52-16.48-76.16-38.24-109.664-63.936 61.664-59.712 140.928-100.96 229.248-115.648-49.6 49.504-90.432 110.528-119.584 179.584zM323.36 290.432c49.344 17.12 101.92 27.104 156.64 28.768l0 160.8-191.328 0c1.728-67.008 13.6-131.04 34.688-189.568zM480 512l0 192.8c-50.464 1.536-99.264 9.792-145.248 24.608-27.712-65.984-44.064-139.488-46.08-217.408l191.328 0zM425.056 921.664c-79.136-13.152-151.008-47.616-209.44-97.664 31.52-21.856 65.6-40.352 102.016-54.4 27.904 57.856 64.416 109.216 107.424 152.064zM512 927.2l0-190.368c45.824 1.472 90.24 8.64 132.128 21.728-32.672 66.784-77.248 124.288-130.432 168.576-0.544 0-1.12 0.032-1.696 0.064zM674.368 769.6c36.384 14.048 70.432 32.576 102.016 54.4-58.432 50.016-130.304 84.512-209.44 97.664 43.008-42.848 79.488-94.208 107.424-152.064zM657.248 729.408c-46.016-14.816-94.816-23.072-145.248-24.608l0-192.8 191.328 0c-2.016 77.92-18.4 151.424-46.08 217.408zM512 480l0-160.8c54.688-1.664 107.264-11.616 156.64-28.736 21.056 58.528 32.928 122.56 34.688 189.568l-191.328 0zM173.888 209.12c36.416 28.32 76.352 52.288 119.52 70.304-22.368 61.984-34.976 129.696-36.736 200.576l-191.872 0c3.84-103.84 44.32-198.208 109.088-270.88zM64.8 512l191.872 0c1.984 81.76 19.072 158.976 48.096 228.384-40.544 15.808-78.336 36.864-113.216 61.792-75.136-74.784-122.56-177.024-126.752-290.176zM800.448 802.144c-34.88-24.896-72.672-45.984-113.248-61.792 29.056-69.408 46.112-146.624 48.128-228.384l191.872 0c-4.192 113.184-51.648 215.424-126.752 290.176z',
                        onclick: function(e) {
                            regionSwitch(e.scheduler.ecInstance, r = 1)
                        }
                    }
                },
                iconStyle: {
                    normal: {
                        borderColor: '#fff'
                    },
                    emphasis: {
                        borderColor: '#b1e4ff'
                    }
                },
            },
            series: [{
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    zlevel: 1,
                    // 涟漪特效
                    rippleEffect: {
                        period: 15, //动画时间，值越小速度越快
                        scale: 4, //波纹圆环最大限制，值越大波纹越大
                        brushType: 'fill' //波纹绘制方式 stroke, fill
                    },
                    // hoverAnimation: true,
                    label: {
                        normal: {
                            // 是否显示name
                            show: true,
                            formatter: '{b}', //圆环显示文字
                            position: 'top', //显示位置
                            offset: [5, 0], //偏移设置
                            color: '#1DE9B6'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    // symbolSize: 12,
                    symbol: "circle",
                    symbolSize: function(val) {
                        if (!val[2]) return 6
                        return 6 + val[2] / (countMax / 10) //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#1DE9B6'
                                /* function (params) { //随机颜色
                                                               // return "#"+("00000"+((params.data.value[2]*16777215+0.5)>>0).toString(16)).slice(-6);
                                                               return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                                                           }*/
                                ,

                            // shadowBlur: 10,
                            // shadowColor: '#333'
                        }
                    },

                    data: getScatterData(points)
                },
                {
                    type: 'lines',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                        symbolSize: 5, //图标大小
                    },
                    lineStyle: {
                        normal: {
                            width: 1, //线条宽度
                            opacity: 0.1, //0.1, //尾迹线条透明度
                            curveness: 0.3 //尾迹线条曲直度
                        }
                    },
                    data: getLinesData(points)
                }
            ]
        };

        /*
            0: China
            1: World
        */
        function regionSwitch(ecIns, r = 0) {
            var op = JSON.parse(JSON.stringify(option))
            if (r === 0) {
                op.geo.map = 'china'
                op.series[0].data = getScatterData(points)
                op.series[1].data = getLinesData(points)

            } else if (r === 1) {
                op.geo.map = 'world'
                // points 所有攻击流量, 由多个攻击向量组成(from -> to), from == 1, to >= 1
                var worldPoints = [{
                    'from': {
                        'name': '上海',
                    },
                    'to': [{
                            'name': '加拿大温哥华',
                            'count': randomInt()
                        }, {
                            'name': '墨西哥',
                            'count': randomInt()
                        }, {
                            'name': '澳大利亚墨尔本',
                            'count': randomInt()
                        },
                        {
                            'name': '美国加州',
                            'count': randomInt()
                        }, {
                            'name': '澳大利亚悉尼',
                            'count': randomInt()
                        }, {
                            'name': '匈牙利布达佩斯',
                            'count': randomInt()
                        }, {
                            'name': '阿联酋迪拜',
                            'count': randomInt()
                        }, {
                            'name': '阿尔及利亚阿尔及尔',
                            'count': randomInt()
                        },
                        {
                            'name': '莫桑比克马普托',
                            'count': randomInt()
                        }, {
                            'name': '美国洛杉矶',
                            'count': randomInt()
                        }, {
                            'name': '香港邦泰',
                            'count': randomInt()
                        }, {
                            'name': '美国芝加哥',
                            'count': randomInt()
                        }, {
                            'name': '加纳库马西',
                            'count': randomInt()
                        }, {
                            'name': '英国曼彻斯特',
                            'count': randomInt()
                        }, {
                            'name': '德国汉堡',
                            'count': randomInt()
                        }, {
                            'name': '哈萨克斯坦阿拉木图',
                            'count': randomInt()
                        }, {
                            'name': '俄罗斯伊尔库茨克',
                            'count': randomInt()
                        }, {
                            'name': '巴西',
                            'count': randomInt()
                        }, {
                            'name': '埃及达米埃塔',
                            'count': randomInt()
                        }, {
                            'name': '西班牙巴塞罗纳',
                            'count': randomInt()
                        }, {
                            'name': '柬埔寨金边',
                            'count': randomInt()
                        }, {
                            'name': '意大利米兰',
                            'count': randomInt()
                        }, {
                            'name': '乌拉圭蒙得维的亚',
                            'count': randomInt()
                        }
                    ]
                }]
                op.series[0].data = getScatterData(worldPoints)
                op.series[1].data = getLinesData(worldPoints)
            }

            ecIns.setOption(op)
        }
        /*
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <script src="echarts.min.js"></script>
            <script src="world.js"></script>
            <script src="china.js"></script>

        </head>
        <body>
        	<div id="maps" style="width: '100%'; height:1000px;"></div>
        	<script>
        		var maps = echarts.init(document.getElementById('maps'));
        		maps.setOption(option);
        	</script>
        </body>
        </html>
        */
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
