世界地图ECharts Gallery

20:11:45图表已生成
代码
var geoCoordMap = {
    '上海': [121.4648, 31.2891],
    '尼日利亚': [-4.388361, 11.186148],
    '美国加州': [-121.910642, 41.38028],
    '澳大利亚墨尔本': [144.999416, -37.781726],
    '墨西哥': [-99.094092, 19.365711],
    '加拿大温哥华': [-123.023921, 49.311753]
};
var cityValue = {
    '上海': [10],
    '尼日利亚': [48],
    '美国加州': [28],
    '澳大利亚墨尔本': [726],
    '墨西哥': [711],
    '加拿大温哥华': [53]
}
var BJData = [
    [{name:'上海'}, {name:'加拿大温哥华',value:95}]
];
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
            }, {
                coord: toCoord
            }]);
        }
    }
    return res;
};
var seriesData = [];

seriesData = [
    {
        name: ' Top10',
        type: 'lines',
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#c70019',
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: '#c70019',
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(BJData)
    },{
    type: 'scatter',
    coordinateSystem: 'geo',
    zlevel: 2,
    rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 2, //波纹圆环最大限制，值越大波纹越大
        trailLength: 0,
    },
    label: {
        normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: '{b}' //圆环显示文字
        },
        emphasis: {
            show: true
        }
    },
    symbol: 'circle',
    symbolSize: 2,
    itemStyle: {
        normal: {
            show: false,
            color: '#c70019'
        }
    },
    data: [{
        name: '加拿大温哥华',
        value: [-123.023921, 49.311753, 3590]
    }]
},{
    type: 'effectScatter',
    coordinateSystem: 'geo',
    zlevel: 2,
    rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 2, //波纹圆环最大限制，值越大波纹越大
        trailLength: 0,
    },
    label: {
        normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: '{b}' //圆环显示文字
        },
        emphasis: {
            show: true
        }
    },
    symbol: 'circle',
    symbolSize: 2,
    itemStyle: {
        normal: {
            show: false,
            color: '#c70019'
        }
    },
    data: [{
        name: '上海',
        value: [121.4648, 31.2891, 3590]
    }]
}]

option = {
    backgroundColor: '#404a59',
    title: {
        text: '世界地图',
        subtext: 'From Excel',
        left: 'center',
        top: 'top',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var value = (params.value + '').split('.');
            value = value[1].split(',')[1];
            return params.name;
        }
    },
    visualMap: {
        show: false,
        min: 0,
        max: 150,
        inRange: {
            symbolSize: [1, 100]
        }
    },
    geo: {
        name: '世界地图',
        type: 'map',
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#efefef',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#999'
            }
        }
    },
    series: seriesData
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
