lemon_echarts_map_statistics

功能描述

echarts中国地图数据显示，是在echarts基础上扩展的地图热点数据显示功能

依赖的模块

  1. ECharts

快速使用

  1.     <div id="map_1" style="height: 600px;width: 1000px;"></div>
  3.     <script type="text/javascript" src="./script/echarts.min.js"></script>
  4.     <script type="text/javascript" src="./script/china.js"></script>
  5.     <script type="text/javascript">
  6.     var data2 = [
  7.                         {name: '商丘', value: 9},
  8.                         {name: '鄂尔多斯', value: 12},
  9.                         {name: '招远', value: 12},
  10.                         {name: '舟山', value: 12},
  11.                         {name: '日照', value: 21},
  12.                         {name: '胶南', value: 22},
  13.                         {name: '大庆', value: 279}
  14.     ];
  15.     var convertData = function (data) {
  16.         var res = [];
  17.         for (var i = 0; i < data.length; i++) {
  18.             var geoCoord = geoCoordMap[data[i].name];
  19.             if (geoCoord) {
  20.                 res.push({
  21.                     name: data[i].name,
  22.                     value: geoCoord.concat(data[i].value)
  23.                 });
  24.             }
  25.         }
  26.         return res;
  27.     };
  28.     //地图容器
  29.     var map_1 = echarts.init(document.getElementById('map_1'));
  30.     //地图容器
  31.     //34个省、市、自治区的名字拼音映射数组
  34.     //网络零售当期分布
  35.     var map_1_option = {
  37.         tooltip : {
  38.             trigger: 'item'
  39.         },
  40.         geo: {
  41.             map: 'china',
  42.             label: {
  43.                 emphasis: {
  44.                     show: false
  45.                 }
  46.             },
  47.             roam: false,
  48.             itemStyle: {
  49.                 normal: {
  50.                     areaColor: '#d1d1d1',
  51.                     borderColor: '#111',
  52.                 },
  53.                 emphasis: {
  54.                     areaColor: '#d1d1d1'
  55.                 }
  56.             }
  57.         },
  58.         series : [
  59.             {
  60.                 name: 'Top 5',
  61.                 type: 'effectScatter',
  62.                 coordinateSystem: 'geo',
  63.                 symbolSize: function (val) {
  64.                     return val[2] / 10;
  65.                 },
  66.                 showEffectOn: 'render',
  67.                 rippleEffect: {
  68.                     brushType: 'stroke'
  69.                 },
  70.                 hoverAnimation: true,
  71.                 itemStyle: {
  72.                     normal: {
  73.                         color: '#f75749',
  74.                         shadowBlur: 10,
  75.                         shadowColor: '#333'
  76.                     }
  77.                 },
  78.                 zlevel: 1
  79.             }
  80.         ]
  81.         };
  83.     var data = [
  84.         {
  85.             "name":"北京市", "log":"116.46", "lat":"39.92",
  86.             "children":[
  87.                 {"name":"北京", "log":"116.46", "lat":"39.92"},
  88.                 {"name":"昌平", "log":"116.2", "lat":"40.22"}
  89.             ]
  90.         },
  91.         {
  92.             "name":"上海市", "log":"121.48", "lat":"31.22", 
  93.             "children":[
  94.                 {"name":"上海", "log":"121.48", "lat":"31.22"},
  95.                 {"name":"嘉定", "log":"121.24", "lat":"31.4"},
  96.                 {"name":"宝山", "log":"121.48", "lat":"31.41"},
  97.                 {"name":"崇明", "log":"121.4", "lat":"31.73"}
  98.             ]
  99.         },
  100.         {
  101.             "name":"天津市", "log":"117.2", "lat":"39.13", 
  102.             "children":[
  103.                 {"name":"天津", "log":"117.2", "lat":"39.13"},
  104.                 {"name":"宁河", "log":"117.83", "lat":"39.33"},
  105.                 {"name":"宝坻", "log":"117.3", "lat":"39.75"},
  106.                 {"name":"武清", "log":"117.05", "lat":"39.4"}
  107.             ]
  108.         }
  109.     ];
  111.     var geoCoordMap = {
  113.     };
  115.     for (infoIndex = 0; infoIndex < data.length; infoIndex++) { 
  116.         var info = data[infoIndex];
  117.          var city = info.children;
  118.         for(var i =0;i<city.length;i++){
  119.             var citydetail = new Array();
  120.             var name = city[i].name;
  121.             geoCoordMap[name]= citydetail;
  122.             var lat = parseFloat(city[i].lat);
  123.             var log = parseFloat(city[i].log);
  124.             citydetail.push(log);
  125.             citydetail.push(lat);
  126.         }
  127.     }
  129.      map_1_option.series[0].data = convertData(data2.sort(function (a, b) {
  130.                 return b.value - a.value;
  131.             })),
  132.     map_1.setOption(map_1_option);
  133.     </script>

特别说明

  1. 1、参数不限制， 例如：var data = [{name:'城市名称',lon:'经度',lat:'纬度'}];
  2. 2、回调可用log查看自定义参数，不限制
  3. 3、使用本模块注意会与同ECharts模块冲突，请开发者谨慎选择，本模块为1.0版本，后续会陆续更新。