效果图：
    image.png
    **

    直接上全代码，代码中有注释方便以后回顾

    **

    1. <!DOCTYPE html>
    2. <html style="height: 100%">
    3. <head>
    4.     <meta charset="utf-8">
    5. </head>
    6. <body style="height: 100%; margin: 0">
    7. <div id="container" style="height: 100%"></div>
    8. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    9. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    10. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    11. <script type="text/javascript"
    12.         src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    13. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    14. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    15. <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=yPCSLTLWeViz91a5GxkPcn5d2OzQlkcY"></script>
    16. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    17. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    18. <script type="text/javascript">
    19.     var dom = document.getElementById("container");
    20.     var myChart = echarts.init(dom);
    21.     var app = {};
    22.     option = null;
    23.     var data = [
    24.         ['大庆', 125.03, 46.58, 279],
    25.         ['武汉', 114.31, 30.52, 273],
    26.         ['合肥', 117.27, 31.86, 229],
    27.         ['菏泽', 115.480656, 35.23375, 194],
    28.         ['廊坊', 116.7, 39.53, 193],
    29.         ['衢州', 118.88, 28.97, 177],
    30.         ['长沙', 113, 28.21, 175],
    31.         ['岳阳', 113.09, 29.37, 169],
    32.         ['金华', 119.64, 29.12, 157],
    33.         ['湘潭', 112.91, 27.87, 154],
    34.         ['保定', 115.48, 38.85, 153],
    35.         ['常德', 111.69, 29.05, 152],
    36.         ['莱芜', 117.67, 36.19, 148],
    37.         ['石家庄', 114.48, 38.03, 147],
    38.         ['株洲', 113.16, 27.83, 143],
    39.         ['秦皇岛', 119.57, 39.95, 136],
    40.         ['洛阳', 112.44, 34.7, 134],
    41.         ['丽水', 119.92, 28.45, 133],
    42.         ['义乌', 120.06, 29.32, 132],
    43.         ['宜昌', 111.3, 30.7, 130],
    44.         ['荆州', 112.239741, 30.335165, 127],
    45.         ['德州', 116.29, 37.45, 120],
    46.         ['济宁', 116.59, 35.38, 120],
    47.         ['唐山', 118.02, 39.63, 119],
    48.         ['平顶山', 113.29, 33.75, 119],
    49.         ['邢台', 114.48, 37.05, 119],
    50.         ['芜湖', 118.38, 31.33, 117],
    51.         ['聊城', 115.97, 36.45, 116],
    52.         ['哈尔滨', 126.63, 45.75, 114],
    53.         ['郑州', 113.65, 34.76, 113],
    54.         ['泰安', 117.13, 36.18, 112],
    55.         ['诸暨', 120.23, 29.71, 112],
    56.         ['富阳', 119.95, 30.07, 106],
    57.         ['天津', 117.2, 39.13, 105],
    58.         ['南充', 106.110698, 30.837793, 104],
    59.         ['临沂', 118.35, 35.05, 103],
    60.         ['沧州', 116.83, 38.33, 100],
    61.         ['临安', 119.72, 30.23, 99],
    62.         ['兰州', 103.73, 36.03, 99],
    63.         ['邯郸', 114.47, 36.6, 98],
    64.         ['九江', 115.97, 29.71, 96],
    65.         ['温州', 120.65, 28.01, 95],
    66.         ['德阳', 104.37, 31.13, 93],
    67.         ['济南', 117, 36.65, 92],
    68.         ['安阳', 114.35, 36.1, 90],
    69.         ['开封', 114.35, 34.79, 90],
    70.         ['鞍山', 122.85, 41.12, 86],
    71.         ['溧阳', 119.48, 31.43, 86],
    72.         ['库尔勒', 86.06, 41.68, 86],
    73.         ['淄博', 118.05, 36.78, 85],
    74.         ['乌鲁木齐', 87.68, 43.77, 84],
    75.         ['枣庄', 117.57, 34.86, 84],
    76.         ['杭州', 120.19, 30.26, 84],
    77.         ['衡水', 115.72, 37.72, 80],
    78.         ['包头', 110, 40.58, 80],
    79.         ['绵阳', 104.73, 31.48, 80],
    80.         ['北京', 116.46, 39.92, 79],
    81.         ['徐州', 117.2, 34.26, 79],
    82.         ['焦作', 113.21, 35.24, 75],
    83.         ['句容', 119.16, 31.95, 75],
    84.         ['克拉玛依', 84.77, 45.59, 72],
    85.         ['渭南', 109.5, 34.52, 72],
    86.         ['马鞍山', 118.48, 31.56, 72],
    87.         ['宝鸡', 107.15, 34.38, 72],
    88.         ['贵阳', 106.71, 26.57, 71],
    89.         ['无锡', 120.29, 31.59, 71],
    90.         ['本溪', 123.73, 41.3, 71],
    91.         ['滨州', 118.03, 37.36, 70],
    92.         ['台州', 121.420757, 28.656386, 67],
    93.         ['南京', 118.78, 32.04, 67],
    94.         ['重庆', 106.54, 29.59, 66],
    95.         ['潍坊', 119.1, 36.62, 65],
    96.         ['扬州', 119.42, 32.39, 64],
    97.         ['常州', 119.95, 31.79, 64],
    98.         ['牡丹江', 129.58, 44.6, 63],
    99.         ['遵义', 106.9, 27.7, 63],
    100.         ['绍兴', 120.58, 30.01, 63],
    101.         ['金坛', 119.56, 31.74, 62],
    102.         ['东营', 118.49, 37.46, 62],
    103.         ['西安', 108.95, 34.27, 61],
    104.         ['北海', 109.12, 21.49, 60],
    105.         ['镇江', 119.44, 32.2, 59],
    106.         ['桂林', 110.28, 25.29, 59],
    107.         ['张家界', 110.479191, 29.117096, 59],
    108.         ['宜兴', 119.82, 31.36, 59],
    109.         ['宜宾', 104.56, 29.77, 58],
    110.         ['呼和浩特', 111.65, 40.82, 58],
    111.         ['成都', 104.06, 30.67, 58],
    112.         ['大同', 113.3, 40.12, 58],
    113.         ['阳江', 111.95, 21.85, 57],
    114.         ['泸州', 105.39, 28.91, 57],
    115.         ['西宁', 101.74, 36.56, 57],
    116.         ['自贡', 104.778442, 29.33903, 56],
    117.         ['吉林', 126.57, 43.87, 56],
    118.         ['锦州', 121.15, 41.13, 54],
    119.         ['南昌', 115.89, 28.68, 54],
    120.         ['柳州', 109.4, 24.33, 54],
    121.         ['三亚', 109.511909, 18.252847, 54],
    122.         ['三门峡', 111.19, 34.76, 53],
    123.         ['胶州', 120.03336, 36.264622, 52],
    124.         ['银川', 106.27, 38.47, 52],
    125.         ['张家港', 120.555821, 31.875428, 52],
    126.         ['嘉兴', 120.76, 30.77, 51],
    127.         ['长春', 125.35, 43.88, 51],
    128.         ['沈阳', 123.38, 41.8, 50],
    129.         ['苏州', 120.62, 31.32, 50],
    130.         ['茂名', 110.88, 21.68, 50],
    131.         ['石嘴山', 106.39, 39.04, 49],
    132.         ['大连', 121.62, 38.92, 47],
    133.         ['临汾', 111.5, 36.08, 47],
    134.         ['吴江', 120.63, 31.16, 47],
    135.         ['肇庆', 112.44, 23.05, 46],
    136.         ['江门', 113.06, 22.61, 45],
    137.         ['章丘', 117.53, 36.72, 45],
    138.         ['铜川', 109.11, 35.09, 44],
    139.         ['平度', 119.97, 36.77, 44],
    140.         ['佛山', 113.11, 23.05, 44],
    141.         ['海口', 110.35, 20.02, 44],
    142.         ['宿迁', 118.3, 33.96, 43],
    143.         ['咸阳', 108.72, 34.36, 43],
    144.         ['珠海', 113.52, 22.3, 42],
    145.         ['长治', 113.08, 36.18, 41],
    146.         ['深圳', 114.07, 22.62, 41],
    147.         ['寿光', 118.73, 36.86, 40],
    148.         ['盘锦', 122.070714, 41.119997, 40],
    149.         ['太原', 112.53, 37.87, 39],
    150.         ['清远', 113.01, 23.7, 39],
    151.         ['中山', 113.38, 22.52, 39],
    152.         ['昆明', 102.73, 25.04, 39],
    153.         ['韶关', 113.62, 24.84, 38],
    154.         ['嘉峪关', 98.289152, 39.77313, 38],
    155.         ['广州', 113.23, 23.16, 38],
    156.         ['延安', 109.47, 36.6, 38],
    157.         ['南宁', 108.33, 22.84, 37],
    158.         ['营口', 122.18, 40.65, 37],
    159.         ['惠州', 114.4, 23.09, 37],
    160.         ['江阴', 120.26, 31.91, 37],
    161.         ['蓬莱', 120.75, 37.8, 37],
    162.         ['常熟', 120.74, 31.64, 36],
    163.         ['东莞', 113.75, 23.04, 36],
    164.         ['河源', 114.68, 23.73, 36],
    165.         ['淮安', 119.15, 33.5, 36],
    166.         ['泰州', 119.9, 32.49, 36],
    167.         ['连云港', 119.16, 34.59, 35],
    168.         ['葫芦岛', 120.836932, 40.711052, 35],
    169.         ['揭阳', 116.35, 23.55, 34],
    170.         ['荣成', 122.41, 37.16, 34],
    171.         ['昆山', 120.95, 31.39, 33],
    172.         ['宁波', 121.56, 29.86, 33],
    173.         ['湛江', 110.359377, 21.270708, 33],
    174.         ['莱州', 119.942327, 37.177017, 32],
    175.         ['湖州', 120.1, 30.86, 32],
    176.         ['汕头', 116.69, 23.39, 32],
    177.         ['抚顺', 123.97, 41.97, 31],
    178.         ['玉溪', 102.52, 24.35, 31],
    179.         ['张家口', 114.87, 40.82, 31],
    180.         ['阳泉', 113.57, 37.85, 31],
    181.         ['瓦房店', 121.979603, 39.627114, 30],
    182.         ['即墨', 120.45, 36.38, 30],
    183.         ['福州', 119.3, 26.08, 29],
    184.         ['烟台', 121.39, 37.52, 28],
    185.         ['丹东', 124.37, 40.13, 27],
    186.         ['太仓', 121.1, 31.45, 27],
    187.         ['曲靖', 103.79, 25.51, 27],
    188.         ['厦门', 118.1, 24.46, 26],
    189.         ['汕尾', 115.375279, 22.786211, 26],
    190.         ['潮州', 116.63, 23.68, 26],
    191.         ['梅州', 116.1, 24.55, 25],
    192.         ['文登', 122.05, 37.2, 25],
    193.         ['上海', 121.48, 31.22, 25],
    194.         ['攀枝花', 101.718637, 26.582347, 25],
    195.         ['威海', 122.1, 37.5, 25],
    196.         ['承德', 117.93, 40.97, 25],
    197.         ['拉萨', 91.11, 29.97, 24],
    198.         ['云浮', 112.02, 22.93, 24],
    199.         ['南通', 121.05, 32.08, 23],
    200.         ['胶南', 119.97, 35.88, 22],
    201.         ['泉州', 118.58, 24.93, 21],
    202.         ['莱西', 120.53, 36.86, 21],
    203.         ['日照', 119.46, 35.42, 21],
    204.         ['金昌', 102.188043, 38.520089, 19],
    205.         ['青岛', 120.33, 36.07, 18],
    206.         ['乳山', 121.52, 36.89, 18],
    207.         ['赤峰', 118.87, 42.28, 16],
    208.         ['盐城', 120.13, 33.38, 15],
    209.         ['齐齐哈尔', 123.97, 47.33, 14],
    210.         ['鄂尔多斯', 109.781327, 39.608266, 12],
    211.         ['招远', 120.38, 37.35, 12],
    212.         ['舟山', 122.207216, 29.985295, 12],
    213.         ['海门', 121.15, 31.89, 9]
    214.     ];
    216.     function convertdata(d) {
    217.         var res = [];
    218.         for (var i = 0; i < d.length; i++) {
    219.             res.push({
    220.                 name: d[i][0],
    221.                 value: [d[i][1], d[i][2], d[i][3]]
    222.             });
    223.         }
    224.         return res;
    225.     }
    227.     var data2 = convertdata(data)
    230.     option = {
    231.         title: {
    232.             text: '平面底图POI数据可视化',
    233.             subtext: '蓝心小伙伴的学习之旅',
    234.             left: 'center',
    235.             top: '8%'
    236.         },
    237.         //提示框组件
    238.         tooltip: {
    239.             trigger: 'item',
    240.         },
    241.         visualMap: {
    242.             type: 'continuous',
    243.             min: 0,
    244.             max: 100,
    245.             left: '30%',//visualMap 组件离容器左侧的距离
    246.             //left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
    247.             // 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
    248.             top: 'bottom',
    249.             text: ['高', '低'],
    250.             calculable: true
    251.         },
    252.         geo: { //地理坐标系组件
    253.             map: 'china',   //地图类型。
    254.             label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
    255.                 emphasis: {
    256.                     show: false //点击省份的时候显示不显示 名称
    257.                 }
    258.             },
    259.             roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
    260.             itemStyle: { //地图区域的多边形 图形样式
    261.                 normal: {
    262.                     areaColor: 'lightgray', //地图区域的颜色
    263.                     borderColor: 'dimgray' //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
    264.                 },
    265.                 emphasis: {
    266.                     areaColor: 'white'
    267.                 }
    268.             }
    269.         },
    270.         series: [
    271.             {
    272.                 name: 'pm2.5',
    273.                 type: 'scatter',
    274.                 coordinateSystem: 'geo',
    275.                 data: data2.slice(5,),
    276.                 symbolSize: function (val) {
    277.                     return val[2] / 5;
    278.                 },
    279.                 label: {
    280.                     normal: {
    281.                         formatter: '{b}',
    282.                         position: 'right',
    283.                         show: false
    284.                     },
    285.                     emphasis: {
    286.                         show: true
    287.                     }
    288.                 },
    289.                 itemStyle: {
    290.                     normal: {
    291.                         color: 'white',
    292.                         shadowBlur: 10, //图形阴影的模糊大小
    293.                         shadowColor: '#333'//阴影颜色
    294.                     }
    295.                 },
    296.             },
    297.             {
    298.                 name: 'Top 5',
    299.                 type: 'effectScatter', //带有涟漪特效动画的散点（气泡）图
    300.                 coordinateSystem: 'geo', ////该系列使用的坐标系
    301.                 data: data2.slice(0, 5),
    302.                 symbolSize: function (val) {
    303.                     return val[2] / 8;
    304.                 },
    305.                 showEffectOn: 'render', //配置何时显示特效.'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
    306.                 rippleEffect: {  //涟漪特效相关配置。
    307.                     brushType: 'stroke'  //波纹的绘制方式，可选 'stroke' 和 'fill'。
    308.                 },
    309.                 hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
    310.                 label: {
    311.                     normal: {
    312.                         formatter: '{b}',
    313.                         position: 'right',
    314.                         show: true
    315.                     }
    316.                 },
    317.                 itemStyle: {
    318.                     normal: {
    319.                         color: 'brown',
    320.                         shadowBlur: 10,
    321.                         shadowColor: '#333'
    322.                     }
    323.                 }
    324.             }
    325.         ]
    326.     };
    327.     ;
    328.     if (option && typeof option === "object") {
    329.         myChart.setOption(option, true);
    330.     }
    331. </script>
    332. </body>
    333. </html>

    城市poi数据模板.xlsx