Echarts 制作雷达图

一.代码:

1.数据接口

	@RequestMapping(value="/SnsBL")
	public void SnsBL(HttpServletResponse response,HttpSession session) {
		User user = (User) session.getAttribute(Constant.USERINFO);
		ListObject listObject = new ListObject();
		Map<String,Object> ArNums = articleBiz.findByArCount(user.getUser_id());         //获取文章总数
		Map<String,Object> ReNums = resourcesBiz.findByReCount(user.getUser_id());       //资源总数
		Map<String,Object> TopNums = topicBiz.findByTopCount(user.getUser_id());         //帖子总数 
		Map<String,Object> EmaNums = emailBiz.findByEmCount(user.getUser_id());         //邮件总数
		Map<String,Object> ComNums = commentsBiz.findByComCount(user.getUser_id());         //评论总数
		
		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
		list.add(ArNums);
		list.add(ReNums);
		list.add(TopNums);
		list.add(EmaNums);
		list.add(ComNums);
		if(list.size()<4){
			listObject.setCode(StatusCode.CODE_ERROR);
			listObject.setMsg("失败");
		}else{
			listObject.setItems(list);
			listObject.setCode(StatusCode.CODE_SUCCESS);
			listObject.setMsg("成功");
		}
		ResponseUtils.renderJson(response, JsonUtils.toJson(listObject));
	}

2.前端数据解析导入

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统使用比例分析</title>
<script src="js/jquery-3.0.0.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高 -->
<div id="Main" style="width: 98%; height: 450px;border: 1px;"></div>

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('Main'));
myChart.setOption({
        title : {
        	text : '系统使用比重分析',
        	 x : 'center' 
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: { 
        	orient : 'vertical',  
            x : 'left',   
            data:['使用比例分析']
        },  
        toolbox: {  
            show : true,  
            feature : {  
                mark : {show: true},  
                dataView : {show: true, readOnly: false},  
                restore : {show: true},  
                saveAsImage : {show: true}  
            }  
        },  
        polar : [
            {
               name: { show: true,textStyle:{fontSize:18,color:"#32cd32"}},
               indicator : [
                    {text : '文章总数', max  : 10},
                    {text : '资源总数', max  : 10},
                    {text : '帖子总数', max  : 10},
                    {text : '邮件总数', max  : 10},
                    {text : '评论总数', max  : 10}
                ],center : ['50%','50%']
            }
        ],
        calculable : true,
        series : [
            {
                name:'使用权重分析',
                type: 'radar',//图表类型 radar为雷达图
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color :"#87cefa",
                            width : 2
                        },
                        areaStyle: {
                            color:"#87cefa",
                            type: 'default'
                        }
                    }
                },
                symbolSize :6,
                data : []
            }
        ]
});


	myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
	var Counts = [];

	$.ajax({
		type : 'get',
		async : true,
		url : "${pageContext.request.contextPath }/SnsBL",
		dataType : "json",
		success : function(data) {
			if (data.code == 'success') {
				$.each(data.items, function(k, v) { //遍历返回的JSON数据      
					Counts.push(v.count);
				});
				myChart.hideLoading(); //隐藏加载动画     
				myChart.setOption({ //加载数据图表       
							series : [ {
								data : [ {
									value : Counts,     
									name : '使用比例分析'
								} ]
							} ]
						});
			} else {
				alert("暂无该模块的统计数据 !");
			}
		},
		error : function(errorMsg) {
			//请求失败时执行该函数  
			alert("图表请求数据失败!");
			myChart.hideLoading();
		}
	});
</script>
</body>
</html>

3.后端重定向到页面

	@RequestMapping(value="/SnsBLTj")
	public ModelAndView SnsBLTj(ModelAndView mv) {
		mv.setViewName("/user/SystemBLTj");
		return mv;
	}

二.结果

Echarts 制作雷达图

猜你喜欢