echartsjs數據地圖（帶數據排行）

效果預覽：

代碼（放入【echartsjs編輯器】裏即可執行）：

var data = [ {
    name:"北京",
    value:223
}, {
    name:"上海",
    value:110
}, {
    name:"廣州",
    value:94
}, {
    name:"深圳",
    value:153
}, {
    name:"成都",
    value:68
}, {
    name:"南京",
    value:63
}, {
    name:"杭州",
    value:34
}, {
    name:"青島",
    value:51
}, {
    name:"西安",
    value:29
}, {
    name:"呼和浩特",
    value:34
}, {
    name:"拉薩",
    value:14
}, {
    name:"烏魯木齊",
    value:22
}, {
    name:"西寧",
    value:22
}, {
    name:"哈爾濱",
    value:40
} ];

var geoCoordMap = {
    "青島":[ 120.33, 36.07 ],
    "拉薩":[ 91.11, 29.97 ],
    "西藏":[ 91.11, 29.97 ],
    "上海":[ 121.48, 31.22 ],
    "廈門":[ 118.1, 24.46 ],
    "福州":[ 119.3, 26.08 ],
    "福建":[ 119.3, 26.08 ],
    "張家口":[ 114.87, 40.82 ],
    "寧波":[ 121.56, 29.86 ],
    "南寧":[ 108.33, 22.84 ],
    "廣西":[ 108.33, 22.84 ],
    "廣州":[ 113.23, 23.16 ],
    "廣東":[ 113.23, 23.16 ],
    "太原":[ 112.53, 37.87 ],
    "山西":[ 112.53, 37.87 ],
    "昆明":[ 102.73, 25.04 ],
    "雲南":[ 102.73, 25.04 ],
    "深圳":[ 114.07, 22.62 ],
    "海口":[ 110.35, 20.02 ],
    "海南":[ 110.35, 20.02 ],
    "大連":[ 121.62, 38.92 ],
    "瀋陽":[ 123.38, 41.8 ],
    "遼寧":[ 123.38, 41.8 ],
    "蘇州":[ 120.62, 31.32 ],
    "長春":[ 125.35, 43.88 ],
    "吉林":[ 125.35, 43.88 ],
    "銀川":[ 106.27, 38.47 ],
    "寧夏":[ 106.27, 38.47 ],
    "南昌":[ 115.89, 28.68 ],
    "江西":[ 115.89, 28.68 ],
    "西寧":[ 101.74, 36.56 ],
    "青海":[ 101.74, 36.56 ],
    "呼和浩特":[ 111.65, 40.82 ],
    "內蒙":[ 111.65, 40.82 ],
    "成都":[ 104.06, 30.67 ],
    "四川":[ 104.06, 30.67 ],
    "西安":[ 108.95, 34.27 ],
    "陝西":[ 108.95, 34.27 ],
    "重慶":[ 106.54, 29.59 ],
    "南京":[ 118.78, 32.04 ],
    "江蘇":[ 118.78, 32.04 ],
    "貴陽":[ 106.71, 26.57 ],
    "貴州":[ 106.71, 26.57 ],
    "北京":[ 116.46, 39.92 ],
    "烏魯木齊":[ 87.68, 43.77 ],
    "新疆":[ 87.68, 43.77 ],
    "杭州":[ 120.19, 30.26 ],
    "浙江":[ 120.19, 30.26 ],
    "濟南":[ 117, 36.65 ],
    "山東":[ 117, 36.65 ],
    "蘭州":[ 103.73, 36.03 ],
    "甘肅":[ 103.73, 36.03 ],
    "天津":[ 117.2, 39.13 ],
    "鄭州":[ 113.65, 34.76 ],
    "河南":[ 113.65, 34.76 ],
    "哈爾濱":[ 126.63, 45.75 ],
    "黑龍江":[ 126.63, 45.75 ],
    "石家莊":[ 114.48, 38.03 ],
    "河北":[ 114.48, 38.03 ],
    "長沙":[ 113, 28.21 ],
    "湖南":[ 113, 28.21 ],
    "合肥":[ 117.27, 31.86 ],
    "安徽":[ 117.27, 31.86 ],
    "武漢":[ 114.31, 30.52 ],
    "湖北":[ 114.31, 30.52 ]
};

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;
};

var convertedData = [ convertData(data), convertData(data.sort(function(a, b) {
    return b.value - a.value;
}).slice(0, 6)) ];

data.sort(function(a, b) {
    return a.value - b.value;
});

var selectedItems = [];

var categoryData = [];

var barData = [];

var sum = 0;

var count = data.length;

for (var i = 0; i < data.length; i++) {
    categoryData.push(data[i].name);
    barData.push(data[i].value);
    sum += data[i].value;
}

console.log(categoryData);

console.log(sum + "   " + count);

option = {
    backgroundColor:"#404a59",
    animation:true,
    animationDuration:1e3,
    animationEasing:"cubicInOut",
    animationDurationUpdate:1e3,
    animationEasingUpdate:"cubicInOut",
    title:[ {
        text:"2018年全年主要城市業務數據彙總",
        subtext:"內部數據請勿外傳",
        left:"center",
        top:20,
        textStyle:{
            color:"#fff"
        }
    }, {
        id:"statistic",
        text:"數據排行",
        right:160,
        top:60,
        width:100,
        textStyle:{
            color:"#fff",
            fontSize:16
        }
    } ],
    // toolbox: {
    //     iconStyle: {
    //         normal: {
    //             borderColor: '#fff'
    //         },
    //         emphasis: {
    //             borderColor: '#b1e4ff'
    //         }
    //     },
    //     feature: {
    //         dataZoom: {},
    //         brush: {
    //             type: ['rect', 'polygon', 'clear']
    //         },
    //         saveAsImage: {
    //             show: true
    //         }
    //     }
    // },
    // brush: {
    //     outOfBrush: {
    //         color: '#abc'
    //     },
    //     brushStyle: {
    //         borderWidth: 2,
    //         color: 'rgba(0,0,0,0.2)',
    //         borderColor: 'rgba(0,0,0,0.5)',
    //     },
    //     seriesIndex: [0, 1],
    //     throttleType: 'debounce',
    //     throttleDelay: 300,
    //     geoIndex: 0
    // },
    geo:{
        map:"china",
        center:[ 115.98561551896913, 36.20500049089619 ],
        zoom:1,
        label:{
            emphasis:{
                show:false
            }
        },
        roam:true,
        itemStyle:{
            normal:{
                areaColor:"#323c48",
                borderColor:"#111"
            },
            emphasis:{
                areaColor:"#2a333d"
            }
        }
    },
    tooltip:{
        trigger:"item"
    },
    grid:{
        right:50,
        top:100,
        bottom:40,
        width:"20%"
    },
    xAxis:{
        type:"value",
        scale:true,
        position:"top",
        boundaryGap:false,
        splitLine:{
            show:false
        },
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        axisLabel:{
            show:false,
            margin:2,
            textStyle:{
                color:"#aaa"
            }
        }
    },
    yAxis:{
        type:"category",
        nameGap:16,
        axisLine:{
            show:true,
            lineStyle:{
                color:"#ddd"
            }
        },
        axisTick:{
            show:false,
            lineStyle:{
                color:"#ddd"
            }
        },
        axisLabel:{
            interval:0,
            textStyle:{
                color:"#ddd"
            }
        },
        data:categoryData
    },
    series:[ {
        type:"effectScatter",
        coordinateSystem:"geo",
        data:convertedData[0],
        symbolSize:function(val) {
            return val[2] / 10;
        },
        showEffectOn:"render",
        rippleEffect:{
            brushType:"stroke"
        },
        hoverAnimation:true,
        label:{
            normal:{
                formatter:"{b}",
                position:"right",
                show:true
            }
        },
        itemStyle:{
            normal:{
                color:"#f4e925",
                shadowBlur:10,
                shadowColor:"#333"
            }
        },
        zlevel:1
    }, {
        id:"bar",
        zlevel:2,
        type:"bar",
        symbol:"none",
        itemStyle:{
            normal:{
                color:"#ddb926"
            }
        },
        label:{
            show:true,
            position:"right"
        },
        data:data
    } ]
};

function renderBrushed(params) {
    var mainSeries = params.batch[0].selected[0];
    var selectedItems = [];
    var categoryData = [];
    var barData = [];
    var maxBar = 30;
    var sum = 0;
    var count = 0;
    for (var i = 0; i < mainSeries.dataIndex.length; i++) {
        var rawIndex = mainSeries.dataIndex[i];
        var dataItem = convertedData[0][rawIndex];
        var pmValue = dataItem.value[2];
        sum += pmValue;
        count++;
        selectedItems.push(dataItem);
    }
    selectedItems.sort(function(a, b) {
        // return b.value[2] - a.value[2];
        return a.value - b.value;
    });
    for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
        categoryData.push(selectedItems[i].name);
        barData.push(selectedItems[i].value[2]);
    }
    this.setOption({
        yAxis:{
            data:categoryData
        },
        xAxis:{
            axisLabel:{
                show:!!count
            }
        },
        title:{
            id:"statistic",
            text:count ? "平均: " + (sum / count).toFixed(4) :""
        },
        series:{
            id:"bar",
            // sort:'descending',
            data:barData
        }
    });
}