Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻

记录最近使用echarts制作地图的过程及部分代码：

其中在网络上借鉴了不少优秀的源码，在此感谢他们的开源精神。

先看效果：

（一）态势图、热点图、轨迹图及全屏功能

 

全屏效果：

（二）改普通地图为百度底图

 

（三）三级下钻地图

 

相关代码：

（一）

<div id="mapdiv">
    <div class="row">
        <div id="map1" class="col-sm-6 mapdiv" style="background-color: #0a6aa1"></div>
        <div id="map2" class="col-sm-6 mapdiv" style="background-color: #1e9765"></div>
    </div>

    <div class="row">
        <div id="map3" class="col-sm-6 mapdiv" style="background-color: #6a5a8c"></div>
        <div id="map4" class="col-sm-6 mapdiv" style="background-color: #3A87AD"></div>
    </div>
</div>

<div id="mask" style="height: 100%;width: 100%;">
    <div id="mask-header">
        <button>退出</button>
    </div>
    <%--<div id="mask-body"></div>--%>
    <%-- style="height: 600px;width: 100%;"--%>
</div>

// ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
// Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen.

//这是设置全屏的宽高随屏幕的不同宽度而变化
$("#mask-body").width($(document.body).width() - 100);
$("#mask-body").height($(document.body).height() - 20);
$("#mask").css('display', "none");
$("#mask-header>button").click(function () {
    $("#mask").css('display', "none");
    $("#mapdiv").css('display', 'block');
});

// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
// require.config({
//     paths: {
//         echarts: '../html/www/js'
//     }
// });

//图一
function createmap1(id, data) {
    $.get(_ctx + '/map/json/china.json', function (geoJson) {
        var map1 = echarts.init(document.getElementById(id))
        echarts.registerMap('china', geoJson)
        var option = {
            backgroundColor: '#D7E7FF',
            // title : {
            //     text: 'iphone销量',
            //     subtext: '纯属虚构',
            //     x:'center'
            // },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     x:'left',
            //     data:['iphone3','iphone4','iphone5']
            // },
            dataRange: {
                min: 0,
                max: 2500,
                color: ["#E5672C", "#E0E52C", "#2D65BE"],
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                // orient : 'vertical',
                x: 'right',
                y: 'bottom',
                feature: {
                    mark: {show: true},
                    // dataView : {show: true, readOnly: false},
                    restore: {show: true},
                    // saveAsImage : {show: true}
                    myTool2: {
                        show: true,
                        title: '全屏显示',
                        icon: 'image://../img/fullscreen.png',
                        onclick: function () {
                            $("#mapdiv").css('display', 'none');
                            $("#mask").css("display", "block");
                            $("body").css("overflow-y", "hidden");
                            $('#mask-body').remove();
                            $('#mask').append('<div id="mask-body"></div>');
                            $("#mask-body").width($(document.body).width() - 100);
                            // $("#mask-body").height($(document.body).height()-20);
                            $("#mask-body").height($(window).height() - 20);
                            createmap1("mask-body", map1data);
                        }
                    }
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: 'iphone3',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: data
                }
            ]
        };
        map1.setOption(option, true)
    });
}

//图二
function createmap2(id, data, geoCoordMap) {
    $.get(_ctx + '/map/json/china.json', function (geoJson) {

        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 option = {
            // backgroundColor: '#ffffff',
            backgroundColor: '#404a59',
            /*title: {
             text: '全国主要城市空气质量',
             subtext: 'data from PM25.in',
             sublink: 'http://www.pm25.in',
             left: 'center',
             textStyle: {
             color: '#fff'
             }
             },*/
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + '<br/>' +
                        params.seriesName + ": " + params.value[2]
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'left',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            toolbox: {
                show: true,
                // orient : 'vertical',
                x: 'right',
                y: 'bottom',
                feature: {
                    mark: {show: true},
                    // dataView : {show: true, readOnly: false},
                    restore: {show: true},
                    // saveAsImage : {show: true}
                    myTool2: {
                        show: true,
                        title: '全屏显示',
                        icon: 'image://../img/fullscreen.png',
                        onclick: function () {
                            $("#mapdiv").css('display', 'none');
                            $("#mask").css("display", "block");
                            $("body").css("overflow-y", "hidden");
                            $('#mask-body').remove();
                            $('#mask').append('<div id="mask-body"></div>');
                            $("#mask-body").width($(document.body).width() - 100);
                            // $("#mask-body").height($(document.body).height()-20);
                            $("#mask-body").height($(window).height() - 20);
                            createmap2("mask-body", map2data, geoCoordMap);
                        }
                    }
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 3)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'fill'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },