Echarts 制作雷达图

偏执的太偏执、 2022-05-26 10:08 289阅读 0赞

一.代码:

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>
    
    <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;
    	}

二.结果

![20180429103323666][]

[20180429103323666]: /images/20220526/b6b68a495ae646b6bb0871986efcc87d.png