要点分析

1.地图

  • 需要显式定义一个地理坐标系geo
  1. geo:{
  2.     map:'china'
  3.     },

因为此处应用了china.js文件，所以需要声明map属性为china

2.散点图

  • 需要与地图进行绑定
    在series系列配置中，需要加上如下配置
  1. coordinateSystem:'geo', //series坐标系类型
  • 数据集需以以下形式，方可正常显示，其中数组中的value-x最少需要定义两个
  1. {name: '', value: [value-1, value-2, value-3]},

完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Echarts实现地图散点图</title>
  6.         <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.0.4/echarts.min.js"></script>
  7.         <script src="../js/china.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="map-wrap" style="height:500px;">
  11.             <!-- 这里以后就是地图 -->
  12.         </div>
  13.     </body>
  14.     <script>
  15.         var exampleData = [
  16.             {name: '海门', value: [121.15, 31.89, 90]},
  17.             {name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
  18.             {name: '招远', value: [120.38, 37.35, 142]},
  19.         ];
  21.         var myCharts = echarts.init(document.getElementById('map-wrap'));
  23.         var option = {
  24.                 geo:{
  25.                     map:'china', 
  26.                     itemStyle:{ 
  27.                         normal:{ 
  28.                             areaColor:'#323c48',
  29.                             borderColor:'#111'
  30.                         },
  31.                         emphasis:{ 
  32.                             areaColor:'#2a333d' 
  33.                         }
  34.                     }
  35.                 },
  36.                 backgroundColor:'#404a59',
  37.                 series:[
  38.                     {
  39.                         name:'销量', 
  40.                         type:'scatter' ,
  41.                         coordinateSystem:'geo', 
  42.                         data:exampleData 
  43.                     }
  44.                 ]
  45.         };
  47.         myCharts.setOption(option);
  48.     </script>
  49. </html>

参考文档

ECharts 实现地图散点图（上）