地图修改1ECharts Gallery

20:11:45图表已生成
代码
function randomData() {
    return Math.round(Math.random()*300);
}
var worlddata=[
                {name: 'Afghanistan', value: randomData()},
                {name: 'Angola', value: randomData()},
                {name: 'Albania', value: randomData()},
                {name: 'United Arab Emirates', value: randomData()},
                {name: 'Argentina', value: randomData()},
                {name: 'Armenia', value: randomData()},
                {name: 'French Southern and Antarctic Lands', value: randomData()},
                {name: 'Australia', value: randomData()},
                {name: 'Austria', value: randomData()},
                {name: 'Azerbaijan', value: randomData()},
                {name: 'Burundi', value: randomData()},
                {name: 'Belgium', value: randomData()},
                {name: 'Benin', value: randomData()},
                {name: 'Burkina Faso', value: randomData()},
                {name: 'Bangladesh', value: randomData()},
                {name: 'Bulgaria', value: randomData()},
                {name: 'The Bahamas', value: randomData()},
                {name: 'Bosnia and Herzegovina', value: randomData()},
                {name: 'Belarus', value: randomData()},
                {name: 'Belize', value: randomData()},
                {name: 'Bermuda', value: randomData()},
                {name: 'Bolivia', value: randomData()},
                {name: 'Brazil', value: randomData()},
                {name: 'Brunei', value: randomData()},
                {name: 'Bhutan', value: randomData()},
                {name: 'Botswana', value: randomData()},
                {name: 'Central African Republic', value: randomData()},
                {name: 'Canada', value: randomData()},
                {name: 'Switzerland', value: randomData()},
                {name: 'Chile', value: randomData()},
                {name: 'China', value:randomData()},
                {name: 'Ivory Coast', value: randomData()},
                {name: 'Cameroon', value:randomData()},
                {name: 'Democratic Republic of the Congo', value: randomData()},
                {name: 'Republic of the Congo', value: randomData()},
                {name: 'Colombia', value: randomData()},
                {name: 'Costa Rica', value: randomData()},
                {name: 'Cuba', value: randomData()},
                {name: 'Northern Cyprus', value: randomData()},
                {name: 'Cyprus', value: randomData()},
                {name: 'Czech Republic', value: randomData()},
                {name: 'Germany', value: randomData()},
                {name: 'Djibouti', value: randomData()},
                {name: 'Denmark', value: randomData()},
                {name: 'Dominican Republic', value:randomData()},
                {name: 'Algeria', value: randomData()},
                {name: 'Ecuador', value: randomData()},
                {name: 'Egypt', value:randomData()},
                {name: 'Eritrea', value: randomData()},
                {name: 'Spain', value:randomData()},
                {name: 'Estonia', value: randomData()},
                {name: 'Ethiopia', value: randomData()},
                {name: 'Finland', value: randomData()},
                {name: 'Fiji', value: randomData()},
                {name: 'Falkland Islands', value: randomData()},
                {name: 'France', value: randomData()},
                {name: 'Gabon', value: randomData()},
                {name: 'United Kingdom', value: randomData()},
                {name: 'Georgia', value:randomData()},
                {name: 'Ghana', value: randomData()},
                {name: 'Guinea', value: randomData()},
                {name: 'Gambia', value: randomData()},
                {name: 'Guinea Bissau', value: randomData()},
                {name: 'Equatorial Guinea', value: randomData()},
                {name: 'Greece', value: randomData()},
                {name: 'Greenland', value: randomData()},
                {name: 'Guatemala', value: randomData()},
                {name: 'French Guiana', value:randomData()},
                {name: 'Guyana', value: randomData()},
                {name: 'Honduras', value: randomData()},
                {name: 'Croatia', value:randomData()},
                {name: 'Haiti', value: randomData()},
                {name: 'Hungary', value: randomData()},
                {name: 'Indonesia', value: randomData()},
                {name: 'India', value:randomData()},
                {name: 'Ireland', value:randomData()},
                {name: 'Iran', value:randomData()},
                {name: 'Iraq', value: randomData()},
                {name: 'Iceland', value: randomData()},
                {name: 'Israel', value: randomData()},
                {name: 'Italy', value: randomData()},
                {name: 'Jamaica', value: randomData()},
                {name: 'Jordan', value: randomData()},
                {name: 'Japan', value: randomData()},
                {name: 'Kazakhstan', value:randomData()},
                {name: 'Kenya', value: randomData()},
                {name: 'Kyrgyzstan', value: randomData()},
                {name: 'Cambodia', value: randomData()},
                {name: 'South Korea', value: randomData()},
                {name: 'Kosovo', value: randomData()},
                {name: 'Kuwait', value: randomData()},
                {name: 'Laos', value: randomData()},
                {name: 'Lebanon', value: randomData()},
                {name: 'Liberia', value: randomData()},
                {name: 'Libya', value: randomData()},
                {name: 'Sri Lanka', value: randomData()},
                {name: 'Lesotho', value: randomData()},
                {name: 'Lithuania', value: randomData()},
                {name: 'Luxembourg', value: randomData()},
                {name: 'Latvia', value: randomData()},
                {name: 'Morocco', value:randomData()},
                {name: 'Moldova', value: randomData()},
                {name: 'Madagascar', value: randomData()},
                {name: 'Mexico', value: randomData()},
                {name: 'Macedonia', value: randomData()},
                {name: 'Mali', value:randomData()},
                {name: 'Myanmar', value: randomData()},
                {name: 'Montenegro', value:randomData()},
                {name: 'Mongolia', value: randomData()},
                {name: 'Mozambique', value: randomData()},
                {name: 'Mauritania', value: randomData()},
                {name: 'Malawi', value:randomData()},
                {name: 'Malaysia', value: randomData()},
                {name: 'Namibia', value: randomData()},
                {name: 'New Caledonia', value: randomData()},
                {name: 'Niger', value: randomData()},
                {name: 'Nigeria', value: randomData()},
                {name: 'Nicaragua', value: randomData()},
                {name: 'Netherlands', value: randomData()},
                {name: 'Norway', value: randomData()},
                {name: 'Nepal', value: randomData()},
                {name: 'New Zealand', value: randomData()},
                {name: 'Oman', value: randomData()},
                {name: 'Pakistan', value:randomData()},
                {name: 'Panama', value: randomData()},
                {name: 'Peru', value: randomData()},
                {name: 'Philippines', value:randomData()},
                {name: 'Papua New Guinea', value: randomData()},
                {name: 'Poland', value: randomData()},
                {name: 'Puerto Rico', value: randomData()},
                {name: 'North Korea', value: randomData()},
                {name: 'Portugal', value: randomData()},
                {name: 'Paraguay', value:randomData()},
                {name: 'Qatar', value: randomData()},
                {name: 'Romania', value:randomData()},
                {name: 'Russia', value: randomData()},
                {name: 'Rwanda', value: randomData()},
                {name: 'Western Sahara', value: randomData()},
                {name: 'Saudi Arabia', value: randomData()},
                {name: 'Sudan', value:randomData()},
                {name: 'South Sudan', value: randomData()},
                {name: 'Senegal', value:randomData()},
                {name: 'Solomon Islands', value:randomData()},
                {name: 'Sierra Leone', value: randomData()},
                {name: 'El Salvador', value: randomData()},
                {name: 'Somaliland', value: randomData()},
                {name: 'Somalia', value: randomData()},
                {name: 'Republic of Serbia', value: randomData()},
                {name: 'Suriname', value: randomData()},
                {name: 'Slovakia', value: randomData()},
                {name: 'Slovenia', value: randomData()},
                {name: 'Sweden', value:randomData()},
                {name: 'Swaziland', value: randomData()},
                {name: 'Syria', value: randomData()},
                {name: 'Chad', value: randomData()},
                {name: 'Togo', value: randomData()},
                {name: 'Thailand', value:randomData()},
                {name: 'Tajikistan', value: randomData()},
                {name: 'Turkmenistan', value: randomData()},
                {name: 'East Timor', value: randomData()},
                {name: 'Trinidad and Tobago', value: randomData()},
                {name: 'Tunisia', value:randomData()},
                {name: 'Turkey', value: randomData()},
                {name: 'United Republic of Tanzania', value:randomData()},
                {name: 'Uganda', value: randomData()},
                {name: 'Ukraine', value: randomData()},
                {name: 'Uruguay', value: randomData()},
                {name: 'United States of America', value: randomData()},
                {name: 'Uzbekistan', value:randomData()},
                {name: 'Venezuela', value: randomData()},
                {name: 'Vietnam', value:randomData()},
                {name: 'Vanuatu', value: randomData()},
                {name: 'West Bank', value: randomData()},
                {name: 'Yemen', value: randomData()},
                {name: 'South Africa', value: randomData()},
                {name: 'Zambia', value: randomData()},
                {name: 'Zimbabwe', value: randomData()}
            ];
var geoCoordMap = {
    上海: [121.4648, 31.2891],
    尼日利亚: [-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]
};
var BJData = [
    [{
        name: "尼日利亚",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "美国洛杉矶",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "香港邦泰",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "美国芝加哥",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "加纳库马西",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "英国曼彻斯特",
        value: 0
    }, {
        name: "上海"
    }],
    [{
        name: "德国汉堡",
        value: 6280
    }, {
        name: "上海"
    }],
    [{
        name: "哈萨克斯坦阿拉木图",
        value: 7255
    }, {
        name: "上海"
    }],
    [{
        name: "俄罗斯伊尔库茨克",
        value: 8125
    }, {
        name: "上海"
    }],
    [{
        name: "巴西",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "埃及达米埃塔",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "西班牙巴塞罗纳",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "柬埔寨金边",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "意大利米兰",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "乌拉圭蒙得维的亚",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "莫桑比克马普托",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "阿尔及利亚阿尔及尔",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "阿联酋迪拜",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "匈牙利布达佩斯",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "澳大利亚悉尼",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "美国加州",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "澳大利亚墨尔本",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "墨西哥",
        value: 3590
    }, {
        name: "上海"
    }],
    [{
        name: "加拿大温哥华",
        value: 3590
    }, {
        name: "上海"
    }]
];
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([{
                    coord: fromCoord,
                    value: dataItem[0].value
                },
                {
                    coord: toCoord
                }
            ]);
        }
    }
    return res;
};
var convertData2 = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[1].name];
        var toCoord = geoCoordMap[dataItem[0].name];
        if (fromCoord && toCoord) {
            res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                },
                {
                    coord: toCoord
                }
            ]);
        }
    }
    return res;
};

var series = [];
[
    ["上海", BJData]
].forEach(function(item, i) {
    series.push(
        {
            name: '',
            type: 'map',
            geoIndex: 0,
            mapType: 'world',
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%",
            roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:worlddata
        },
        {
            type: "lines",
            zlevel: 2,
            effect: {
                show: true,
                color: "#0bc7f3",
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "arrow", //箭头图标
                symbolSize: 5 //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 0, //尾迹线条透明度
                    curveness: 0.3 //尾迹线条曲直度
                }
            },

            data: convertData(item[1])
        }, {
            type: "lines",
            zlevel: 2,
            effect: {
                show: true,
                color:'#FF0000',
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "arrow", //箭头图标
                symbolSize: 5 //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 0, //尾迹线条透明度
                    curveness: -0.3 //尾迹线条曲直度
                }
            },

            data: convertData2(item[1])
        },{
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    color: "#0bc7f3",
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: "{b}" //圆环显示文字
                },
                emphasis: {
                    show: true,
                    color: "#FF6A6A"
                }
            },
            symbol: "circle",
            symbolSize: function(val) {
                return 4 + val[2] / 1000; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: true,
                   color: "#0bc7f3",
                },
                emphasis: {
                    show: true,
                    color: "#FF6A6A"
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([100]),
                    visualMap: false
                };
            })
        },
        //被攻击点
        {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
                period: 4,
                brushType: "stroke",
                scale: 4
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    color: "#00ffff",
                    formatter: "{b}",
                    textStyle: {
                        color: "red",
                    }
                },
                emphasis: {
                    show: true,
                    color: "#FF6A6A"
                }
            },
            symbol: "pin",
            symbolSize: 30,
            itemStyle: {
                normal: {
                    show: true,
                    color: "red",
                },
                emphasis: {
                    show: true,
                    color: "#FF6A6A"
                }
            },
            data: [{
                name: item[0],
                value: geoCoordMap[item[0]].concat([100]),
                visualMap: false
            }]
        }
    );
});

option = {
    backgroundColor: '#000',
    tooltip: {
        trigger: "item",
        backgroundColor: "#1540a1",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function(params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
                "<span style='color:#fff;'>" +
                name +
                "</span><br/>数据：" +
                value;
            return res;
        }
    },
    visualMap: {
        //图例值控制
        show:false,
        type: 'piecewise',
        pieces: [
            {max: 80,color:'red'}, 
            {min: 80, max: 120,color:'yellow'},
            {min: 120,color:'green'}
        ],
        calculable: true,
        // inRange: {
        //     color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
        // }
    },
    geo: {
        map: "world",
        show:true,
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true, //是否允许缩放
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "120%",
        itemStyle: {
            normal: {
                show:'true',
                color: "#04284e", //地图背景色
                borderColor: "#5bc1c9" //省市边界线
            },
            emphasis: {
                show:'true',
                color: "rgba(37, 43, 61, .5)" //悬浮背景
            }
        }
    },

    series: series
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
