Echarts-地图全国主要城市的分布显示

效果图

1、准备全国城市的sql,包含经纬度 提取码：fdyl （此sql在那个仁兄的基础上，填了一个字段，修改了保定的行政区更改，和一些拼音的修改，在此谢谢哪位仁兄）

2、创建map容器，此处不再具体介绍，直接上代码，可参考点我

 var option = {
    geo: {
      map: 'china',
      roam: true,
      itemStyle: { // 定义样式
        normal: { // 普通状态下的样式
          areaColor: '#FFF5EE',
          borderColor: '#111'
        },
        emphasis: { // 高亮状态下的样式
          areaColor: '#FFFF00'
        }
      }
    },
    backgroundColor: '#FFFFFF',
    title: {
      text: '全国订单量',
      subtext: '',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        var html = params.name + '<br/>';
        html += params.seriesName + ":";
        html += params.value[2]
        return html;
      }
    },
    //左侧小导航图标
    visualMap: {
      show: true,
      x: 'left',
      y: 'center',
      splitList: [
        {
          start: 2000
        }, {
          start: 1500,
          end: 2000
        },
        {
          start: 1000,
          end: 1500
        }, {
          start: 500,
          end: 1000
        },
        {
          start: 200,
          end: 500
        }, {
          start: 0,
          end: 200
        },
                    ],
      color: ['#FF0000', '#FF34B3', '#FF7256', '#FF8C69', '#FFAEB9', '#FFD39B']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      x: '1200',
      y: 'center',
      itemGap: 20,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    //配置属性
    series: [{
      name: '订单量',
      type: 'scatter',
      coordinateSystem: 'geo', // series坐标系类型                     
      itemStyle: {
        normal: {
          label: {
            show: false,
            formatter: '{b}',
            position: 'right',
            textStyle: {
              color: "#3D3D3D"
            }
          }
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      data: [] //数据
                }]

  };
  //初始化echarts实例
  var myChart = echarts.init(document.getElementById('map'));
  //使用制定的配置项和数据显示图表
  myChart.setOption(option);
  myChart.showLoading({
    text: '正在加载数据'
  }); //数据加载完之前先显示一段简单的loading动画
  var mydata = []; //返回数据
  $.ajax({
    type: "post",
    async: true,
    url: "city/order",
    data: {},
    dataType: "json",
    success: function(data) {
      result = data.data;
      if(data.status == 200) {
        for(i in result) {
          mydata.push(result[i]);
        }
        myChart.hideLoading(); //隐藏加载动画
        myChart.setOption({ //加载数据图表
          series: [{
              name: '订单量',
              data: mydata,
                     }
                     ]
        });

      }
    },
    error: function(error) {
      //请求失败时执行该函数
      alert("图表请求数据失败!");
      myChart.hideLoading();
    }
  })

3、后台代码

//数据返回封装
public class EchartsMapResult {

	private String name;
	
	private String value[];
}
//返回数据封装
public class OrderCityNum {

	private String lng; //经度
	
	private String lat;//纬度
	
	private int num;
}
//service
public Result queryOrderByCity() {
		TbCityExample example=new TbCityExample();
		Criteria criteria = example.createCriteria();
		criteria.andLevelEqualTo((byte) 2);
		List<TbCity> cityList = cityMapper.selectByExample(example);		  	        
	    Collections.sort(cityList);//此处我把集合排序了，需要重写TbCity的coapare to 方法，不会的百度
	    List<EchartsMapResult> mapList=new ArrayList<>();
	    for(TbCity city:cityList) {
	    	EchartsMapResult result=new EchartsMapResult();
	    	OrderCityNum ocu=new OrderCityNum();
	    	ocu.setLng(city.getLng());
	    	ocu.setLat(city.getLat());
	    	ocu.setNum(queryOrderNumByCity(city.getId()));	    	
	    	result.setName(city.getShortname());
	    	String[] str= {ocu.getLng(),ocu.getLat(),ocu.getNum()+""};	    	
	    	result.setValue(str);
	    	mapList.add(result);
	    }
		return Result.ok(mapList);
	}

	//根据城市查订单量
	private int queryOrderNumByCity(int city_id) {
		TbOrderExample example=new TbOrderExample();
		com.hongbai.pojo.TbOrderExample.Criteria criteria = example.createCriteria();
		criteria.andCityIdEqualTo(city_id);
		int num = orderMapper.countByExample(example);
		return num==0?(int)(Math.random()*2000):num;//此处是虚拟数据
	}

4、以上就是所有代码，有写的不好，欢迎指出，大家一起学习

注意：返回数据格式一定是以下格式

{ name: '北京', // 数据项名称，在这里指地区名称 value: [ // 数据项值 116.46, // 地理坐标，经度 39.92, // 地理坐标，纬度 340 // 北京地区的数值 ] }

参考ECharts 实现地图散点图（上）

以下可以学习以下ECharts 实现地图散点图（下）