echarts绘制地图

引入js

<script type="text/javascript" src="../e5script/new-js/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="../script/echarts/echarts-all.js"></script>

定义一个div

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:260px;"></div>

获取json数据

var time = 7;
$.ajax({
   url:"../xxxx/getXxx.do",//从后台获取json数据
   type:"POST",
   data:{time:time},
   dataType:"json",
   success:function(data){
      drawMap(time,data);//绘制地图
   },
   error:function(data){
      alert("获取数据异常");
   }
});

绘制地图

function drawMap(time,dataArr){
   var myChart = echarts.init(document.getElementById('main'));
   var option = {
      backgroundColor: '#1b1b1b',
      color: ['gold','aqua','lime'],
      title : {
         text: xxx地图-全部站点-'+time+'天',
         x:'center',
         textStyle : {
            color: '#fff'
         }
      },
      tooltip : {
         trigger: 'item',
         formatter: '{b}'
      },
      legend: {
         orient: 'vertical',
         x:'left',
         data:['已授权', '...', '...', '...'],//自定义内容，可以通过函数获取自定义数组
         selectedMode: 'multiple',
         textStyle : {
            color: '#fff'
         }
      },
      toolbox: {
         show : true,
         orient : 'vertical',
         x: 'right',
         y: 'center',
         feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
         }
      },
      dataRange: {
         min : 0,
         max : 100,
         calculable : true,
         color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
         textStyle:{
            color:'#fff'
         }
      },
      series : [
         {
            name: '全国',
            type: 'map',
            roam: true,
            hoverable: false,
            mapType: 'china',
            itemStyle:{
               normal:{
                  borderColor:'rgba(100,149,237,1)',
                  borderWidth:0.5,
                  areaStyle:{
                     color: '#1b1b1b'
                  }
               }
            },
            data:[],
            markLine : {
               smooth:true,
               symbol: ['none', 'circle'],
               symbolSize : 1,
               itemStyle : {
                  normal: {
                     color:'#fff',
                     borderWidth:1,
                     borderColor:'rgba(30,144,255,0.5)'
                  }
               },
               data : getPlaces()//获取国家城市，如“[[{name:'北京'},{name:'包头'}]”
            },
            geoCoord: getGeoCoord()//获取城市地理坐标，如“'上海市': [121.4648,31.2891]”
         },
         {
            name: '已授权',
            type: 'map',
            mapType: 'china',
            data:[],
            markLine : {
               smooth:true,
               effect : {
                  show: true,
                  scaleSize: 1,
                  period: 30,
                  color: '#fff',
                  shadowBlur: 10
               },
               itemStyle : {
                  normal: {
                     borderWidth:1,
                     lineStyle: {
                        type: 'solid',
                        shadowBlur: 10
                     }
                  }
               },
               data : [[{
                  name: "天津"
               }, {
                  name: "保定",
                  value: 814
               }]]
            },
            markPoint : {
               symbol:'emptyCircle',
               /*symbolSize : function (v){
                return 10 + v/10
                },*/
               effect : {
                  show: true,
                  shadowBlur : 0
               },
               itemStyle:{
                  normal:{
                     label:{show:false}
                  },
                  emphasis: {
                     label:{position:'top'}
                  }
               },
               data : [{
                  name: "保定",
                  value: 814
               }]
            }
         },
         {...},
         {...},
         {...}
         }
      ]
   };

//遍历json对象，填充图表数据
   for (var k = 0; k < 4; k++) {
      for (var j = 0; j < dataArr.Data.ReprintMap.length; j++) {
         option.series[k+1].markLine.data[j] = [{
            name: dataArr.Data.ReprintMap[j].mediaName
         }, {
            name: dataArr.Data.ReprintMap[j].smediaName,
            value: dataArr.Data.ReprintMap[j].sum
         }];
         option.series[k+1].markPoint.data[j] = {
            name: dataArr.Data.ReprintMap[j].smediaName,
            value: dataArr.Data.ReprintMap[j].sum
         };
      }
   }
   myChart.setOption(option);
}

 

 地图大致如下：