gl三維圖：
後臺代碼：
package com.csht.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.csht.constant.ThreeDimensionalX;
import com.csht.constant.ThreeDimensionalY;
import com.csht.model.OutageVehiclePojo;
import com.csht.service.ThreeDimensionalService;
import com.csht.util.ErrorCodeType;
import com.csht.util.ResultEntity;
@Controller
@RequestMapping("/three_dimensional")
public class ThreeDimensionalController {
private static final Integer MAX_SIZE = 240;
@Autowired
private ThreeDimensionalService service;
@RequestMapping("/queryThreeDimensional")
@ResponseBody
public ResultEntity queryThreeDimensional(String start,String end){
ResultEntity res = new ResultEntity();
Map<String, Object> map = new HashMap<String, Object>();
Map<String,String> paramsMap = new HashMap<String, String>();
List<OutageVehiclePojo> list = service.queryThreeDimensional(paramsMap);
List<String> xAxis3DLsit = new ArrayList<String>();
List<String> yAxis3DLsit = new ArrayList<String>();
List<List<String>> returnList = new ArrayList<List<String>>();
List<String> resultList = null;
for (OutageVehiclePojo outageVehiclePojo : list) {
resultList = new ArrayList<String>();
resultList.add(ThreeDimensionalX.getKey(outageVehiclePojo.getQjtype()+""));
resultList.add(ThreeDimensionalY.getWeek(ThreeDimensionalY.dateToStr(outageVehiclePojo.getDateday())));
resultList.add(outageVehiclePojo.getCount()+"");
xAxis3DLsit.add(ThreeDimensionalX.getKey(outageVehiclePojo.getQjtype()+""));
yAxis3DLsit.add( ThreeDimensionalY.getWeek(ThreeDimensionalY.dateToStr(outageVehiclePojo.getDateday())));
returnList.add(resultList);
}
List<String> newXAxis3DLsit = new ArrayList<String>();
for (String cd:xAxis3DLsit) {
if(!newXAxis3DLsit.contains(cd)){
newXAxis3DLsit.add(cd);
}
}
List<String> newYAxis3DLsit = new ArrayList<String>();
for (String cd:yAxis3DLsit) {
if(!newYAxis3DLsit.contains(cd)){
newYAxis3DLsit.add(cd);
}
}
List<Integer> inList = new ArrayList<Integer>();
inList.add(MAX_SIZE);
Map<String, List<String>> inRangeMap = new HashMap<String, List<String>>();
List<String> colorList = new ArrayList<String>();
String [] colorArr = new String[]{"#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#ffffbf","#fee090","#fdae61","#f46d43","#d73027","#a50026"};
for (int i = 0; i < colorArr.length; i++) {
colorList.add("\'"+colorArr[i]+"\'");
}
inRangeMap.put("color", colorList);
map.put("inRangeMap", inRangeMap);
map.put("inList", inList);
map.put("newXAxis3DLsit", newXAxis3DLsit);
map.put("newYAxis3DLsit", newYAxis3DLsit);
map.put("returnList", returnList);
res.setData(map);
res.setErrorCode(ErrorCodeType.SUCCESS);
res.setMessage("查詢成功！！！");
return res;
}
}
前端js文件：
$(function(){
var worldMapContainer = document.getElementById('main');
//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
worldMapContainer.style.height = window.innerHeight + 'px';
};
//設置容器高寬
resizeWorldMapContainer();
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(worldMapContainer);
var xAxis3DArr = [];
var yAxis3DArr = [];
var threeData = [];
var colorList = [];
var maxSize ;
var option = {
tooltip : {},
visualMap : {
max : 225,
inRange : {
color : [ '#313695', '#4575b4', '#74add1', '#abd9e9',
'#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
'#f46d43', '#d73027', '#a50026' ]
}
},
xAxis3D : {
type : 'category',
data : xAxis3DArr
},
yAxis3D : {
type : 'category',
data : yAxis3DArr
},
zAxis3D : {
type : 'value'
},
grid3D : {
boxWidth : 200,
boxDepth : 80,
light : {
main : {
intensity : 1.2
},
ambient : {
intensity : 0.3
}
}
},
series : [ {
type : 'bar3D',
data : threeData,
shading : 'color',
label : {
show : false,
textStyle : {
fontSize : 16,
borderWidth : 1
}
},
itemStyle : {
opacity : 0.4
},
emphasis : {
label : {
textStyle : {
fontSize : 20,
color : '#900'
}
},
itemStyle : {
color : '#900'
}
}
} ]
}
$.get("http://localhost:8080/three_dimensional/queryThreeDimensional", {start:"2017-11-01", end:"2017-11-07"}, function(result) {
maxSize=result.data.inList;
if (result.errorCode == 'SUCCESS') {
var list = result.data.inRangeMap.color;
alert(list);
for(var i=0;i<list.length;i++){
colorList = list[i];
}
// for(var i =0;i<result.data.colorList.length;i++){
// alert(result.data.colorList[i]);
// colorList.push(result.data.colorList[i]);
// }
for(var i=0; i< result.data.newXAxis3DLsit.length; i++){
xAxis3DArr.push(result.data.newXAxis3DLsit[i]);
}
for(var i=0; i< result.data.newYAxis3DLsit.length; i++){
yAxis3DArr.push(result.data.newYAxis3DLsit[i]);
}
var resultList = result.data.returnList;
for(var i=0;i<resultList.length;i++){
var list = resultList[i];
threeData.push([list[0],list[1],list[2]]);
}
myChart.setOption(option);
}
}, "json");
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
//用於使chart自適應高度和寬度
window.onresize = function() {
//重置容器高寬
resizeWorldMapContainer();
myChart.resize();
};
});
餅圖動態數據獲取後臺代碼：
package com.csht.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.csht.constant.OutageVehicleMap;
import com.csht.constant.ProvincesMap;
import com.csht.model.OutageVehiclePojo;
import com.csht.service.OutageVehicleService;
import com.csht.util.ErrorCodeType;
import com.csht.util.ResultEntity;
import com.fasterxml.jackson.databind.ObjectMapper;
@Controller
@RequestMapping("/outage_vehicle_analysis")
public class OutageVehicleController {
@Autowired
private OutageVehicleService service;
/**
* 根據行業類別，日期分類動態查詢出每個行業的總記錄數(某一天)
*
* @param dateday
* @param params
* @return
*/
@RequestMapping(value = "/queryByIndustryCategoryList")
@ResponseBody
public ResultEntity queryByIndustryCategoryList(String dateday,
String params) {
ResultEntity res = new ResultEntity();
Map<String, Object> mapResult = new HashMap<String, Object>();
Map<String, Object> paramMap = new HashMap<String, Object>();
Map<String, Object> paramMap_011 = new HashMap<String, Object>();
Map<String, Object> paramMap_012 = new HashMap<String, Object>();
Map<String, Object> paramMap_030 = new HashMap<String, Object>();
List<String> legendList = new ArrayList<String>();
String[] array = null;
if ("'".equals(params.charAt(0) + "")
|| "\"".equals(params.charAt(0) + "")) {
array = params.substring(1, params.length() - 1).split("_");
dateday = dateday.substring(1, dateday.length() - 1);
} else {
array = params.split("_");
}
paramMap.put("dateday", dateday);
paramMap.put("array", array);
List<OutageVehiclePojo> list = service
.queryByIndustryCategoryList(paramMap);
List<Map<String, Object>> seriesList = new ArrayList<Map<String, Object>>();
List<Map<String, Object>> neiSeriesList = new ArrayList<Map<String, Object>>();
for(int i = 0;i<list.size();i++){
OutageVehiclePojo outageVehiclePojo = list.get(i);
Map<String, Object> map = new HashMap<String, Object>();
legendList.add(OutageVehicleMap.getKey(outageVehiclePojo.getTran()));
map.put("name",OutageVehicleMap.getKey(outageVehiclePojo.getTran()));
map.put("value", outageVehiclePojo.getCount());
neiSeriesList.add(map);
}
paramMap_011.put("tran", array[0]);
paramMap_011.put("dateday", dateday);
List<OutageVehiclePojo> queryProvinceCategoryList_011 = service
.queryProvinceCategoryList(paramMap_011);
int count_011 = 0;
for (int i = 0;i<queryProvinceCategoryList_011.size();i++) {
OutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_011.get(i);
Map<String, Object> map = new HashMap<String, Object>();
if(i<=4){
legendList.add(ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("name", ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("value", outageVehiclePojo.getCount());
seriesList.add(map);
}else{
count_011 = count_011 + outageVehiclePojo.getCount();
}
}
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("name", "班線客車其它");
map1.put("value", count_011);
legendList.add("班線客車其它");
seriesList.add(map1);
paramMap_012.put("tran", array[1]);
paramMap_012.put("dateday", dateday);
List<OutageVehiclePojo> queryProvinceCategoryList_012 = service
.queryProvinceCategoryList(paramMap_012);
int count_012 = 0;
for (int i = 0;i<queryProvinceCategoryList_012.size();i++) {
OutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_012.get(i);
Map<String, Object> map = new HashMap<String, Object>();
if(i<=4){
legendList.add(ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("name",ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("value", outageVehiclePojo.getCount());
seriesList.add(map);
}else{
count_012 = count_012 + outageVehiclePojo.getCount();
}
}
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("name", "旅遊包車其它");
map2.put("value", count_012);
legendList.add("旅遊包車其它");
seriesList.add(map2);
paramMap_030.put("tran", array[2]);
paramMap_030.put("dateday", dateday);
int count_030 = 0;
List<OutageVehiclePojo> queryProvinceCategoryList_030 = service
.queryProvinceCategoryList(paramMap_030);
for (int i = 0;i<queryProvinceCategoryList_030.size();i++) {
OutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_030.get(i);
Map<String, Object> map = new HashMap<String, Object>();
if(i<=4){
legendList.add(ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("name", ProvincesMap.getKey(outageVehiclePojo.getAreacode()));
map.put("value", outageVehiclePojo.getCount());
seriesList.add(map);
}else{
count_030 = count_030 + outageVehiclePojo.getCount();
}
}
Map<String, Object> map3 = new HashMap<String, Object>();
map3.put("name", "危險品運輸車其它");
map3.put("value", count_030);
legendList.add("危險品運輸車其它");
seriesList.add(map3);
/*String[] strArr = new String[legendList.size()];
for (int i = 0; i < list.size(); i++) {
OutageVehiclePojo outageVehiclePojo = list.get(i);
strArr[i] = OutageVehicleMap.getKey(outageVehiclePojo.getTran());
}*/
mapResult.put("seriesList", seriesList);
mapResult.put("legendList", legendList);
mapResult.put("neiSeriesList", neiSeriesList);
res.setData(mapResult);
res.setErrorCode(ErrorCodeType.SUCCESS);
res.setMessage("查詢成功！！！");
return res;
}
}
前端js：
var neiArrNum = [];
var ArrNum = [];
var legArr = [];
var option = {
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b}: {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : legArr
},
series : [
{
name : '停運車輛信息分析',
type : 'pie',
selectedMode : 'single',
radius : [ 0, '30%' ],
label : {
normal : {
position : 'inner'
}
},
labelLine : {
normal : {
show : false
}
},
data : neiArrNum
},
{
name : '停運車輛信息分析',
type : 'pie',
radius : [ '40%', '55%' ],
label : {
normal : {
formatter : '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor : '#eee',
borderColor : '#aaa',
borderWidth : 1,
borderRadius : 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich : {
a : {
color : '#999',
lineHeight : 22,
align : 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr : {
borderColor : '#aaa',
width : '100%',
borderWidth : 0.5,
height : 0
},
b : {
fontSize : 16,
lineHeight : 33
},
per : {
color : '#eee',
backgroundColor : '#334455',
padding : [ 2, 4 ],
borderRadius : 2
}
}
}
},
data : ArrNum
} ]
};
$(function() {
getStatistics(url, formid, type);
// 用於使chart自適應高度和寬度
window.onresize = function() {
// 重置容器高寬
myChart.resize();
};
});
function getStatistics(url, formid, type) {
var worldMapContainer = document.getElementById('main');
//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
worldMapContainer.style.height = window.innerHeight + 'px';
};
//設置容器高寬
resizeWorldMapContainer();
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(worldMapContainer);
var datas = $("#vform").serialize();
url = "http://localhost:8080/outage_vehicle_analysis/queryByIndustryCategoryList";
console.log(url + "," + datas + "," + type);
$.get(url, datas, function(result) {
if (result.errorCode == 'SUCCESS') {
for(var i=0; i< result.data.legendList.length; i++){
legArr.push(result.data.legendList[i]);
}
for(var i=0;i<result.data.neiSeriesList.length;i++){
var map = result.data.neiSeriesList[i];
neiArrNum.push({"name":map.name,"value": map.value});
}
for(var i=0;i <result.data.seriesList.length;i++){
var map = result.data.seriesList[i];
ArrNum.push({"name":map.name,"value": map.value});
}
myChart.setOption(option);
}
}, "json");
//用於使chart自適應高度和寬度
window.onresize = function() {
//重置容器高寬
resizeWorldMapContainer();
myChart.resize();
};
}
總結：
1，在做echarts動態數據獲取時，先一定要確定需要用到的js準備齊全，要不然在js文件中經常報xxx is not define;很蛋疼的！
2，確定前端需要什麼樣的數據，哪裏需要數據，例如餅圖的legend，series等等，需要什麼樣的數據，主要看官方示例中，死數據的數據類型，比如{xx:xx}這裏需要的就是map數據，[xx,xx]需要的就是list數據集合，通過ajax異步加載請求後臺得到結果後，遍歷出的結果賦到需要用到的地方。
3，以三維圖爲例，最關鍵的地方已經標識清楚，看懂這個，能少走一半彎路了，我一步一坎走了好幾天，可能是因爲初學這東西的緣故，寫下記錄，以後自己也能參考！！！
