您的位置: 首页  >  文章  >  Echarts 饼图处理 option动态赋值 点击事件 一级钻取 自定义按钮 数据格式化

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

分类: 文章 • 2024-08-30 12:08:34

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

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

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

图一 页面打开时的饼图展示 图二 点击网络故障时饼图展示 图三 点击事件中函数参数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"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>投诉分类信息</title>
<link href="<%=request.getContextPath()%>/resources/css/bootstrap.css"
rel="stylesheet" media="screen">
<link
href="<%=request.getContextPath()%>/resources/css/bootstrap-theme.css"
rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/resources/view/css/portal.css"
rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/resources/view/css/select.css"
rel="stylesheet" media="screen">
<script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/My97DatePicker/WdatePicker.js"></script>
<script

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

/* 预留的饼图的div  */
<div id="main" style="width:800px;height:500px;">
</div>

</div>
</div>
</div>
</body>
<script type="text/javascript">
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// el表达式获取后台传递的数据

/* 可以直接将后台取到的json数据填充legend series等中去显示 */

var legend1 = ${legend};
var series1 = ${series};
var textTotal = ${text};
var thirdName = ${thirdName};
var date1 = $("#date1").val();
// 指定图表的配置项和数据
var option = {
   title: {
       text: textTotal+'的分类 :',
       x:'left'
   },
   tooltip: {
     trigger: 'item',
         formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
    // 默认为水平展示legend
    x: 'center',
           y: '400px',
    data:legend1
   },
   toolbox: {  
       show : true,
       feature : {
        dataView: { // 数据视图
                       show: true
                   },
           myTool: { // 自定义的刷新按钮

/*  我没有找到怎么回退的点击事件，知道的可以告诉我哈，我是通过刷新页面实现的，不是很好。这个icon不能自定义 */
               show: true,
               title: '返回',
               icon: 'image://http://echarts.baidu.com/images/favicon.png', 
               onclick: function (){
                   window.location.href="<%=request.getContextPath()%>/complaintMessageCategory/show?date="+date1;
               }
           }
       }  
   },
   series : [
             {
                 name: thirdName,
                 type: 'pie',
                 radius : '50%',
                 center: ['50%', '40%'],
                 data:series1,
                 itemStyle: {
                     emphasis: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 },
                 itemStyle:{ 
                     normal:{ 
                           label:{ 
                             show: true, 
                             formatter: '{b} : {c} ({d}%)' 
                           }, 
                           labelLine :{show:true} 
                         } 
                     } 
             }
         ]    
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('click',function(a,b){

/* 点击部分饼图的信息会封装到a中去，可以看下面的截图哈，然后从a中拿到需要的数据信息 */

console.log(a);  
var options = myChart.getOption();  
    $.ajax({
           url: "<%=request.getContextPath()%>/complaintMessageCategory/forthPieByForthName",
           type: "POST",
           dataType: "json",
           data: {
             "forthName": a.name,
             "date":date1
           },
           async: false,
           success: function(data) {
          if(data){

/*  一定要按照需要的格式返回json数据*/
     options.title.text = textTotal+'→'+a.name+'的分类 :';  
                   options.series[0].data = data.series;
                   options.series[0].name = data.forthName;
     options.legend.data = data.legend;  

/* ture一定要加上! 否则数据量比较小的钻取会和上一级的数据合并显示！看一下api就知道了  */

                   myChart.setOption(options,true);
          }
           },
           error: function() {
             alert("error!");
           }
          }); 
});
</script>
</html>

后台代码展示

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

@RequestMapping("forthPieByForthName")
public void forthPieByForthName(String forthName, String date,
HttpServletResponse res) {
boolean flag = false;
PrintWriter out = null;
List<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
List<Map<String, Object>> mapList2 = new ArrayList<Map<String, Object>>();
List<String> stringList = new ArrayList<String>();
List<String> stringList2 = new ArrayList<String>();
try {
if (date == null || "".equals(date)) {
date = DateUtil.getLastDate();
}
List<ComplaintMessageCategory> list = this.complaintCategoryService
.selectCompalintCategoryByDate(date);
// 解析complaintCategory后放置在mapList中
for (ComplaintMessageCategory category : list) {
Map<String, Object> map = new HashMap<String, Object>();
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<String, Object> map : mapList) {
flag = false;
String nameValue = (String) map.get("name");
if (nameValue != null && nameValue.length() > 0) {
HashMap<String, Object> map2 = new HashMap<String, Object>();
for (Map<String, Object> 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<String, Object> 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();
}
}


}

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

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

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

相关推荐