echarts基本地图

echarts基本地图

var data = [
     {name: '杭州', value: 250}
];
var geoCoordMap = {
    '杭州':[120.19,30.26]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    backgroundColor: '#404a59',
    //标题
    title: {
        text: '测试',
        subtext: '',
        sublink: '',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    //鼠标悬浮显示值
    tooltip : {
        trigger: 'item',
        show:false
    },

    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false//显示区域位置
            }
        },
        roam: true,//缩放和平移
        itemStyle: {
            //常态
            normal: {
                areaColor: '#323c48',//地图区域的颜色
                borderColor: '#111'//图形的描边颜色
            },
            //高亮状态
            emphasis: {
                areaColor: '#2a333d'//图形的颜色
            }
        }
    },
    series : [
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            //点大小
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',//绘制完成后显示波纹
            rippleEffect: {
                period:1,//动画速度
                scale:2,//波纹的范围
                brushType: 'fill'//波纹样式(fill填充型)
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',//圆颜色
                    shadowBlur: 10,
                    shadowColor: '#333'//阴影
                }
            },
            zlevel: 1
        }
    ]
};