echarts地圖展現某個地區的數量
阿新 • • 發佈：2018-12-24
正好最近專案做了個這樣的操作，先來一幅圖
我這裡的需求就是有個專案表，新增專案時會選擇地點，查詢地點名稱和對應有幾個專案值存到集合裡，傳到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);
})
}
})
})//載入頁面的括號