百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak 矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据 接下来的实现是通过矢量图的方式来实现的

基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10.     <script src="../js/jquery.min.js"></script>
  11. </head>
  13. <body>
  14.     <div style="width: 600px;height:400px"></div>
  15.     <script> 
  16.         var mCharts = echarts.init(document.querySelector("div")) 
  17.         $.get('../json/map/china.json', function (chinaJson) {
  18.              echarts.registerMap('chinaMap', chinaJson) 
  19.              var option = { geo: {type: 'map',
  20.              // map是一个固定的值 
  21.              map: 'chinaMap',
  22.              //chinaMap需要和registerMap中的第一个参数保持一致 
  23.             } };
  24.             mCharts.setOption(option)
  25.          })
  28.     </script>
  29. </body>
  31. </html>

用vscode打开一定要使用本地服务器的方式 注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应 该将其置于 HTTP 的服务之下方可正常展示地图

image.png
image.png

地图的常见配置

  • 缩放拖动: roam ```javascript var mCharts = echarts.init(document.querySelector(“div”)) 
    1.   $.get('../json/map/china.json', function (chinaJson) {
    2.        echarts.registerMap('chinaMap', chinaJson) 
    3.        var option = { geo: {type: 'map',
    4.        // map是一个固定的值 
    5.        map: 'chinaMap',
    6.        //chinaMap需要和registerMap中的第一个参数保持一致 
    7.        roam: true, 
    8.        // 运行使用鼠标进行拖动和缩放,此时鼠标可以拖动地图
    9.       } };
    10.       mCharts.setOption(option)
    11.    })
  2. - **名称显示: label**
  3. ```javascript
  4.    var mCharts = echarts.init(document.querySelector("div")) 
  5.         $.get('../json/map/china.json', function (chinaJson) {
  6.              echarts.registerMap('chinaMap', chinaJson) 
  7.              var option = { geo: {type: 'map',
  8.              // map是一个固定的值 
  9.              map: 'chinaMap',
  10.              //chinaMap需要和registerMap中的第一个参数保持一致 
  11.              roam: true, 
  12.              // 运行使用鼠标进行拖动和缩放,此时鼠标可以拖动地图
  13.              label: { show: true } 
  14.              //显示名称
  15.             } };
  16.             mCharts.setOption(option)
  17.          })
  • 初始缩放比例: zoom
  • 地图中心点: center 
    1.   var mCharts = echarts.init(document.querySelector("div")) 
    2.       $.get('../json/map/china.json', function (chinaJson) {
    3.            echarts.registerMap('chinaMap', chinaJson) 
    4.            var option = { geo: {type: 'map',
    5.            // map是一个固定的值 
    6.            map: 'chinaMap',
    7.            //chinaMap需要和registerMap中的第一个参数保持一致 
    8.            roam: true, 
    9.            // 运行使用鼠标进行拖动和缩放,此时鼠标可以拖动地图
    10.            label: { show: true },
    11.            //显示名称
    12.            zoom: 0.9, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
    13.            center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示
    14.           } };
    15.           mCharts.setOption(option)
    image.png

    地图常见效果

    visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过 dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10.     <script src="../js/jquery.min.js"></script>
  11. </head>
  13. <body>
  14.     <div style="width: 600px;height:400px;border:1px solid red"></div>
  15.     <script>
  16.         var mCharts = echarts.init(document.querySelector("div"))
  17.         $.get('../json/map/china.json',
  18.             function (chinaJson) {
  19.                 echarts.registerMap('chinaMap', chinaJson)
  20.                 var airData = [{ name: '北京', value: 39.92 },
  21.                 { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 },
  22.                 { name: '重庆', value: 66 }, { name: '河北', value: 147 },
  23.                 { name: '河南', value: 113 }, { name: '云南', value: 25.04 },
  24.                 { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 },
  25.                 { name: '湖南', value: 175 }, { name: '安徽', value: 117 },
  26.                 { name: '山 东', value: 92 }, { name: '新疆', value: 84 },
  27.                 { name: '江苏', value: 67 }, { name: '浙江', value: 84 },
  28.                 { name: '江西', value: 96 }, { name: '湖北', value: 273 },
  29.                 { name: '广西', value: 59 }, { name: '甘肃', value: 99 },
  30.                 { name: '山西', value: 39 }, { name: '内蒙古', value: 58 },
  31.                 { name: '陕西', value: 61 }, { name: '吉林', value: 51 },
  32.                 { name: '福建', value: 29 }, { name: '贵州', value: 71 },
  33.                 { name: '广东', value: 38 }, { name: '青海', value: 57 },
  34.                 { name: '西藏', value: 24 }, { name: '四川', value: 58 },
  35.                 { name: '宁夏', value: 52 }, { name: '海南', value: 54 },
  36.                 { name: '台湾', value: 88 }, { name: '香港', value: 66 },
  37.                 { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 }]
  39.                 var option = {
  40.                     geo: {
  41.                         type: 'map',
  42.                         map: 'chinaMap',
  43.                         roam: true,
  44.                         label: { show: true }
  45.                     },
  46.                     series: [{
  47.                         data: airData,
  48.                         geoIndex: 0,
  49.                         type: 'map'
  50.                     }],
  51.                     visualMap: {
  52.                         min: 0,
  53.                         // 最小值 
  54.                         max: 300,
  55.                         // 最大值
  56.                         inRange: {
  57.                             color: ['white', 'red']
  58.                             // 颜色的范围 
  59.                         },
  60.                         calculable: true
  61.                         // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 
  62.                     }
  63.                 }
  64.                 mCharts.setOption(option)
  65.             })
  68.     </script>
  69. </body>
  71. </html>

image.png

散点图结合地图

  • 1.给 series 这个数组下增加新的对象
  • 2.准备好散点数据,设置给新对象的 data 
  1. var scatterData = [ 
  2. { 
  3. value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度 
  4. } 
  5. ]
  • 3.配置新对象的 type

type:effectScatter 让散点图使用地图坐标系统 coordinateSystem: ‘geo’ 让涟漪的效果更加明显 rippleEffect: { scale: 10 }

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10.     <script src="../js/jquery.min.js"></script>
  11. </head>
  13. <body>
  14.     <div style="width: 600px;height:400px;border:1px solid red"></div>
  15.     <script>
  16.         var mCharts = echarts.init(document.querySelector("div"))
  17.         $.get('../json/map/china.json',
  18.             function (chinaJson) {
  19.                 echarts.registerMap('chinaMap', chinaJson)
  20.                 var airData = [{ name: '北京', value: 39.92 },
  21.                 { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 },
  22.                 { name: '重庆', value: 66 }, { name: '河北', value: 147 },
  23.                 { name: '河南', value: 113 }, { name: '云南', value: 25.04 },
  24.                 { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 },
  25.                 { name: '湖南', value: 175 }, { name: '安徽', value: 117 },
  26.                 { name: '山 东', value: 92 }, { name: '新疆', value: 84 },
  27.                 { name: '江苏', value: 67 }, { name: '浙江', value: 84 },
  28.                 { name: '江西', value: 96 }, { name: '湖北', value: 273 },
  29.                 { name: '广西', value: 59 }, { name: '甘肃', value: 99 },
  30.                 { name: '山西', value: 39 }, { name: '内蒙古', value: 58 },
  31.                 { name: '陕西', value: 61 }, { name: '吉林', value: 51 },
  32.                 { name: '福建', value: 29 }, { name: '贵州', value: 71 },
  33.                 { name: '广东', value: 38 }, { name: '青海', value: 57 },
  34.                 { name: '西藏', value: 24 }, { name: '四川', value: 58 },
  35.                 { name: '宁夏', value: 52 }, { name: '海南', value: 54 },
  36.                 { name: '台湾', value: 88 }, { name: '香港', value: 66 },
  37.                 { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 }]
  38.                 var scatterData = [
  39.                     {
  40.                         value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度 
  41.                     }
  42.                 ]
  43.                 var option = {
  44.                     geo: {
  45.                         type: 'map',
  46.                         map: 'chinaMap',
  47.                         roam: true,
  48.                         label: { show: true }
  49.                     },
  50.                     series: [{
  51.                         data: airData,
  52.                         geoIndex: 0,
  53.                         type: 'map'
  54.                     },
  55.                     {
  56.                         data: scatterData,
  57.                         type: 'effectScatter',
  58.                         coordinateSystem: 'geo',
  59.                         rippleEffect: { scale: 10 }
  60.                     }
  61.                     ],
  62.                     visualMap: {
  63.                         min: 0,
  64.                         // 最小值 
  65.                         max: 300,
  66.                         // 最大值
  67.                         inRange: {
  68.                             color: ['white', 'red']
  69.                             // 颜色的范围 
  70.                         },
  71.                         calculable: true
  72.                         // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 
  73.                     }
  74.                 }
  75.                 mCharts.setOption(option)
  76.             })
  79.     </script>
  80. </body>
  82. </html>

image.png