Echarts地图实例

如下是Echats的地图实例，拖动右侧的滚动条可以改变地区的颜色，可用于预警信息等功能。当左侧滚动条数值为4时，显示颜色如左。

当右侧滚动条数值为2.5时候，显示颜色如左侧。

关键代码如下（读者可根据自己实际情况自行修改）。

DAO层：

@Override
public List<Map> getMapChartData(Map map) {
StringBuilder sb = new StringBuilder(
"select  t1.area_id area_code,t1.area_name area_name,t2.YJXH,t2.LLZDDLDLQK,t2.XJYJZDDLDLQK")
.append(" from DSM_COM_AREA t1,yxyd_yxydyj t2")
.append(" where zone_type='1' and t1.area_id=t2.gddw")
.append(" and RQ = to_date('2015-08-13','yyyy-mm-dd')");//为当天日期
//执行SQL
List<Map> list = this.getSQLSupportDAO().findMapListByNativeSQL(
sb.toString(), new HashMap<String, Object>());
if (list != null)
return list;
return new ArrayList<Map>();
}

我查询出来的数据为，用于地图上显示。

service层，重点代码已给注释。

public String initMap(Map map) {
List<Map> returnList = yxydyjxxcyDAO.getMapChartData(map);
StringBuilder dataBuilder = new StringBuilder("[");

BigDecimal max = new BigDecimal(4);//滚动条的最大值
BigDecimal temp = new BigDecimal(1);//滚动条的最小值
/**
* 查询后Map后为每个地区赋值
*/
for(Map dataMap : returnList){
Object AREA_ID = dataMap.get("AREA_CODE");
Object AREA_NAME = dataMap.get("AREA_NAME");
BigDecimal YJXH = (BigDecimal)dataMap.get("YJXH");
BigDecimal LLZDDLDLQK = (BigDecimal)dataMap.get("LLZDDLDLQK");
BigDecimal XJYJZDDLDLQK = (BigDecimal)dataMap.get("XJYJZDDLDLQK");
dataBuilder.append(",{").append("name:'").append(AREA_NAME).append("'");
dataBuilder.append(",").append("value:'").append((YJXH!=null?YJXH.divide(temp, 2, BigDecimal.ROUND_HALF_UP):null)).append("'");
dataBuilder.append(",").append("AREA_ID:'").append(AREA_ID).append("'");
dataBuilder.append(",").append("LLZDDLDLQK:'").append((LLZDDLDLQK!=null?LLZDDLDLQK.divide(temp, 2, BigDecimal.ROUND_HALF_UP):null)).append("'");
dataBuilder.append(",").append("XJYJZDDLDLQK:'").append((XJYJZDDLDLQK!=null?XJYJZDDLDLQK.divide(temp, 2, BigDecimal.ROUND_HALF_UP):null)).append("'");
dataBuilder.append("}");


}

dataBuilder=dataBuilder.length()>2?dataBuilder.delete(1, 2):dataBuilder;
dataBuilder.append("]");
/**
* 拼写echats需要的格式
*/
StringBuilder sb = new StringBuilder("" +
"{ "+
"   tooltip : {"+
"        trigger: 'item'"+
"    },"+
"    dataRange: {"+
"        min: 1,"+//左侧条最大值与最小值，如果设置了4种颜色，有4个值，则4、3、2、1分别对应相应的颜色值
"           max: 4,                  "+
" color:['red','#ff9900','yellow','blue'],"+
"        text:['高','低'],        "+   // 文本，默认为数值文本
"        calculable : true"+
"    },"+
"    series : ["+
"        {"+
"            name: '区间',"+
"            type: 'map',"+
"            mapType: '广东',"+
"            selectedMode : 'single',"+
"            itemStyle:{"+
"                normal:{" +
" borderWidth:1,"+
" borderColor:'lightBlue'," +
" label:{" +
" show:true," +
" areaStyle:{" +
" color:'blue'" +
" }" +
" }" +
" }, "+
"                emphasis:{" +
" borderWidth:2,"+
" borderColor:'#fff',"+
" label:{show:true}}"+
"            },"+
" data:"+dataBuilder.toString()+
"        }"+
"    ]"+
" }");
System.out.println("dataBuilder:"+dataBuilder.toString());
return sb.toString();
}

Controller层，取到String chart返回给JS。

@RequestMapping(value = "/initMapChart")
public void initMapChart() throws Exception{
Map<String,Object> paraMap = new HashMap<String,Object>();
String chart   = yxydyjxxcyService.initMap(paraMap);
PrintWriter out = this.response.getWriter();
out.println(JSONObject.fromObject(chart));
out.flush();
out.close();
}

JS方法，可单击地区上的地区执行事件

/**
 * * 初始化地图
 */
function initMap() {
// 使用
require([ 'echarts', 'echarts/chart/map' ], function(ec) {


var mapType = [ '广东' ];//地图上的地区
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var mapDiv = ec.init(document.getElementById('mapDiv'));
var len;
/**
 * 给每个地区一个area_id，单击可触发事件，重点代码已有注释
 */
mapDiv.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var selectedName = param.target;
var series = mapDiv.getOption().series;
for(var index in series){
for(var dataIndex in series[index].data){
if(series[index].data[dataIndex].name == selectedName){
var area_id = series[index].data[dataIndex].AREA_ID;
console.info("aaaaa:"+JSON.stringify(series[index].data[dataIndex]));
console.info("selected:"+area_id);
changeTitleAndJump(area_id);//单击事件，我的是单击地区显示刷新该地区下的列表数据
break;
}
}
}
});
$.ajax({
url : "initMapChart.form",
type : "post",
dataType : "json",
success : function(returnData) {
returnData.tooltip.formatter = function(param) {
var str = param[1];
str += "<br/> 理论最大电量电力缺口:"
+ (param.data.LLZDDLDLQK == undefined ? "-"
: param.data.LLZDDLDLQK);//鼠标移动到地区，会显示该地区的数据，在此赋值
str += "<br/> 实际预计最大电力电量缺口:"
+ (param.data.XJYJZDDLDLQK == undefined ? "-"
: param.data.XJYJZDDLDLQK);//鼠标移动到地区，会显示该地区的数据，在此赋值
return str;
};
mapDiv.setOption(returnData);
},
error : function(error) {
console.info("===error====" + JSON.stringify(error));
}
});
});

}