2017_12_01 echarts+springboot+mybatis(动态获取数据饼图+gl三维demo)

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 map = new HashMap();
Map paramsMap = new HashMap();
List list = service.queryThreeDimensional(paramsMap);
List xAxis3DLsit = new ArrayList();
List yAxis3DLsit = new ArrayList();
List> returnList = new ArrayList>();
List resultList = null;
for (OutageVehiclePojo outageVehiclePojo : list) {
resultList = new ArrayList();
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 newXAxis3DLsit = new ArrayList();
for (String cd:xAxis3DLsit) {
            if(!newXAxis3DLsit.contains(cd)){
            newXAxis3DLsit.add(cd);
            }
        }
List newYAxis3DLsit = new ArrayList();
for (String cd:yAxis3DLsit) {
if(!newYAxis3DLsit.contains(cd)){
newYAxis3DLsit.add(cd);
}
}
List inList = new ArrayList();
    inList.add(MAX_SIZE);
    Map> inRangeMap = new HashMap>();
    List colorList = new ArrayList();
    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;icolorList = list[i];
}
// for(var i =0;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;ivar 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 mapResult = new HashMap();

Map paramMap = new HashMap();
Map paramMap_011 = new HashMap();
Map paramMap_012 = new HashMap();
Map paramMap_030 = new HashMap();


List legendList = new ArrayList();
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 list = service
.queryByIndustryCategoryList(paramMap);
List> seriesList = new ArrayList>();
List> neiSeriesList = new ArrayList>();
for(int i = 0;iOutageVehiclePojo outageVehiclePojo = list.get(i);
Map map = new HashMap();
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 queryProvinceCategoryList_011 = service
.queryProvinceCategoryList(paramMap_011);
int count_011 = 0;
for (int i = 0;iOutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_011.get(i);
Map map = new HashMap();
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 map1 = new HashMap();
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 queryProvinceCategoryList_012 = service
.queryProvinceCategoryList(paramMap_012);
int count_012 = 0;
for (int i = 0;iOutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_012.get(i);
Map map = new HashMap();
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 map2 = new HashMap();
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 queryProvinceCategoryList_030 = service
.queryProvinceCategoryList(paramMap_030);
for (int i = 0;iOutageVehiclePojo outageVehiclePojo = queryProvinceCategoryList_030.get(i);
Map map = new HashMap();
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 map3 = new HashMap();
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}
{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;ivar map = result.data.neiSeriesList[i];
neiArrNum.push({"name":map.name,"value": map.value});
}
for(var i=0;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，以三维图为例，最关键的地方已经标识清楚，看懂这个，能少走一半弯路了，我一步一坎走了好几天，可能是因为初学这东西的缘故，写下记录，以后自己也能参考！！！