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

最新推荐文章于 2023-09-02 08:00:00 发布

liujiaxin_lei

最新推荐文章于 2023-09-02 08:00:00 发布

阅读量3.6k

点赞数

分类专栏：日常积累文章标签： echarts mybatis 遍历三维

本文链接：https://blog.csdn.net/liujiaxin_lei/article/details/78688007

版权

该博客详细介绍了如何结合Echarts、SpringBoot和Mybatis实现动态获取数据并展示3D饼图。通过后台Java代码处理数据，前端使用Echarts JS库创建3D饼图，包括数据遍历、处理和颜色映射。博客重点在于数据的动态获取和前端图表的渲染过程，旨在帮助初学者理解数据驱动的图表生成方法。

摘要由CSDN通过智能技术生成

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();