版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dfBeautifulLive/article/details/73899936
正好最近项目做了个这样的操作,先来一幅图
我这里的需求就是有个项目表,新增项目时会选择地点,查询地点名称和对应有几个项目值存到集合里,传到echarts自动绘制如上图
List<Map> maps = new ArrayList<Map>();
hqlTask = "from TblTaskBasicInformation "//使用hql查询查询表 表里有省的字段
List<TblTaskBasicInformation> informations = tblTaskBasicInformationService
.findByHql(hqlTask);
for (TblTaskBasicInformation information : informations) {
if (information.getXmqtcddwCompanyProvince() != null) {
// 查询省 Tblregion是表名,存储省市县的字段,在此就不列出各个字段了,因为后台的数据亲们测试时可以随便写自己想要的字段和数据,我的代码仅供参考
String Sqldq = "select * from Tblregion where id="+ information.getXmqtcddwCompanyProvince();
List<Object[]> objs = db.getData(Sqldq);//jdbc连接并查询方式
Object[] obj = objs.get(0);
// 查询显示图表的数据
maps = selectDate(obj, maps);
}
}
JSONArray array = new JSONArray();
array = array.fromObject(maps);
setAjaxData(array.toString());//传到前台,这是我们框架封装好的,前面用的是ajax,所以亲们可以自己自主选则怎么把数据传到前面
开始添加数据
public List<Map> selectDate(Object[] obj, List<Map> maps) {
Map hashMap = new HashMap();
// echarts 的js地图已经编译好了地区名称,看地图就知道、大多都是两个字、除了黑龙江和内蒙古,我们数据库存储的地名不相同,所以要截取
String areaStr = "";
if (obj[2].toString().equals("内蒙古自治区")
|| obj[2].toString().equals("黑龙江省")) {
areaStr = obj[2].toString().substring(0, 3);//地图里黑龙江和内蒙古才三个字,所以截取剩下三个
} else {
areaStr = obj[2].toString().substring(0, 2);
}
if (maps.size() > 0) {
boolean iscz = true;
for (int i = 0; i < maps.size(); i++) {
// 地区去重复
if (maps.get(i).get("name").equals(areaStr)) {
// 转换int加项目数 进入此判断就代表着该地区存在重复
String js = maps.get(i).get("value").toString();//就获取之前地区的value值
hashMap.put("name", maps.get(i).get("name"));//想要覆盖之前一样的地区名和value值
hashMap.put("value", Integer.parseInt(js) + 1);//进行项目加1操作
// 先删除 重复的地区名称
maps.remove(maps.get(i));
iscz = false;//把变量变成false好进下面的else里面
}
}
if (iscz) {
// 没有重复加上地区
hashMap.put("value", 1);
hashMap.put("name", areaStr);
maps.add(hashMap);
} else {
maps.add(hashMap);//加覆盖完毕的一个集合
}
} else {
hashMap.put("value", 1);
hashMap.put("name", areaStr);
maps.add(hashMap);
}
return maps;
}
用jdbc查询数据
public static List<Object[]> getData(String sql) throws SQLException {
Statement st = null;
Connection con = null;
List<Object[]> objList = new ArrayList<Object[]>();
try {
DBConnectionManager db = new DBConnectionManager();
con = db.getConnection();
st = con.createStatement();
ResultSet resultSet = st.executeQuery(sql);
while (resultSet.next()) {
ResultSetMetaData rsmd = resultSet.getMetaData();
int columnCount = rsmd.getColumnCount();
Object[] obj = new Object[columnCount];
for (int i = 0; i < columnCount; i++) {
if (resultSet.getString(i + 1) != null
&& !resultSet.getString(i + 1).equals("")) {
obj[i] = resultSet.getString(i + 1);
}
}
objList.add(obj);
}
} catch (Exception e) {
st.close();
con.close();
e.printStackTrace();
} finally {
st.close();
con.close();
}
return objList;
}
html代码贴上来
<div id="main" style="width: 900px;height:400px;"></div>
前台js需要有echarts插件哦
我用ajax进入后台,数据再传回来
$.ajax({
url : "spatialAnalysis_kjfx.action",
type : "post",
dataType : "JSON",
success : function(jsondata) {
//假设第一个值最大,之后循环对比哪个数最大就赋值哪个
max = jsondata[0].value;
var nameData;
var subtextData;
var titleBT;
//比较大小
for ( var i = 0; i < jsondata.length; i++) {
//console.log(jsondata[i])
if (jsondata[i].value > max) {
max = jsondata[i].value;
}
}
/*if (tjx == "1") {
titleBT = "国家重点研发计划项目牵头主持单位全国分布图";
nameData = "项目主持单位分布";
subtextData = "单位(个数)";
}
if (tjx == "2") {
titleBT = "国家重点研发计划项目承担单位全国分布图";
nameData = "项目承担单位分布";
subtextData = "单位(个数)";
}
if (tjx == "3") {
titleBT = "国家重点研发计划项目立项经费分布图";
nameData = "项目立项经费分布";
subtextData = "单位(万元)";
}
if (tjx == "4") {
titleBT = "国家重点研发计划单位注册分布图";
nameData = "单位注册分布";
subtextData = "单位(个数)";
}*/
if(max==0){
max=1;
}
$("#title").text(titleBT);
//页面显示图表
//$(".tjfx-map").show();
$.get('js/echarts/china.json', function(yCjson) {
echarts.registerMap('china', yCjson);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document
.getElementById('main'));
option = {
title : {
text : '',
subtext : subtextData,
left : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
left : 'left',
data : [ nameData ]
},
visualMap : {
min : 0,
max : max,
left : 'left',
top : 'bottom',
text : [ '高', '低' ], // 文本,默认为数值文本
calculable : true
},
toolbox : {
show : false,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
series : [ {
name : nameData,
type : 'map',
mapType : 'china',
roam : false,
label : {
normal : {
show : true
},
emphasis : {
show : true
}
},
data : jsondata
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
}
})
})//加载页面的括号
到这里就圆满结束了。其实也没那么难吧,只要多动脑就没有那么多难解决的事情啦!哈哈哈哈