Echarts 饼图处理 option动态赋值 点击事件 一级钻取 自定义按钮 数据格式化

  当点击家庭投诉分类下的网络故障时会钻取到网络故障下的分类进行饼图的展示，并且右上角有自定义按钮，点击可以可以刷新页面，因为我做的这个项目只支持一级钻取，所有点击按钮之后是重新载入了这个页面，我没有在Echarts的文档中找到回退上一级的这个api，只是简单的刷新了一下页面，知道的朋友可以告诉我哈。

通过ajax动态赋值钻取的时候，json是以List>转化的，解析算法比较重要。

具体的可以看我代码，我在代码中有注释哈

图一 页面打开时的饼图展示 图二 点击网络故障时饼图展示 图三 点击事件中函数参数a中封装的信息 图四 解析的excel文件

本人第一次写博客，请多多指教！

jsp部分代码展示

<%@page pageEncoding="UTF-8" import="java.util.*"%>
<%@ page language="java" contentType="text/html;charset=UTF-8"
isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>










rel="stylesheet" media="screen">
href="<%=request.getContextPath()%>/resources/css/bootstrap-theme.css"
rel="stylesheet" media="screen">
rel="stylesheet" media="screen">
rel="stylesheet" media="screen">

src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js">
src="<%=request.getContextPath()%>/resources/My97DatePicker/WdatePicker.js">

/* 我用的是2.2.7的版本，通过这种方式引入是比较简单的  */
src="${pageContext.request.contextPath }/resources/js/echarts-2.2.7/build/dist/echarts-all.js">

/* 预留的饼图的div  */

后台代码展示

动态展示多条数据的时候只能以List>的格式转换为json数据，所以一定要把解析部分的代码写好！

@RequestMapping("forthPieByForthName")
public void forthPieByForthName(String forthName, String date,
HttpServletResponse res) {
boolean flag = false;
PrintWriter out = null;
List> mapList = new ArrayList>();
List> mapList2 = new ArrayList>();
List stringList = new ArrayList();
List stringList2 = new ArrayList();
try {
if (date == null || "".equals(date)) {
date = DateUtil.getLastDate();
}
List list = this.complaintCategoryService
.selectCompalintCategoryByDate(date);
// 解析complaintCategory后放置在mapList中
for (ComplaintMessageCategory category : list) {
Map map = new HashMap();
String message = category.getComplaintCategory();
if (message != null && message.length() > 0
&& message.indexOf("→") != 0) {
String[] strings = category.getComplaintCategory().split(
"→");
if (strings.length >= 5
&& strings[3].indexOf("LTE-FI") == -1
&& strings[3].equals(forthName)) {
map.put("value", category.getBuildBillTotal());
map.put("name", strings[4]);
stringList.add(strings[4]);
// 最后将满足条件的map添加到maplist中
mapList.add(map);
}
}
}
// 将mapList中相同的数据合并到mapList2
for (Map map : mapList) {
flag = false;
String nameValue = (String) map.get("name");
if (nameValue != null && nameValue.length() > 0) {
HashMap map2 = new HashMap();
for (Map map3 : mapList2) {
if (map3.get("name").equals(nameValue)
&& nameValue.length() > 0) {
map3.put(
"value",
String.valueOf(Integer
.valueOf((String) map3.get("value"))
+ Integer.valueOf((String) map
.get("value"))));
flag = true;
break;
}
}
if (!flag) {
map2.put("name", map.get("name"));
map2.put("value", map.get("value"));
mapList2.add(map2);
}
}
}
// 将mapList中的key单独存放
for (Map map : mapList2) {
stringList2.add((String) map.get("name"));
}

JSONObject jsonObject = new JSONObject();
jsonObject.put("legend", JSON.toJSON(stringList2));
jsonObject.put("series", JSON.toJSON(mapList2));
jsonObject.put("forthName", JSON.toJSON(forthName));
// 设置响应信息，页面不缓存
res.setContentType("application/json");
res.setHeader("Pragma", "No-cache");
res.setHeader("Cache-Control", "no-cache");
out = res.getWriter();
out.print(jsonObject.toJSONString());
out.flush();
System.out.println(jsonObject.toJSONString());
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}


}

a中封装的信息