SSM echarts 柱状图动态加载

最新推荐文章于 2022-01-21 09:37:57 发布

原创最新推荐文章于 2022-01-21 09:37:57 发布 · 3.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ssm #echarts #动态加载数据

SSM 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在SSM框架下结合Echarts实现柱状图的动态加载。关键在于后台处理数据，将数据转化为Echarts所需的格式，并通过ResponseBody返回到前端JSP页面进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键是数据结构，list还是map合适。数据格式，官网有样例。我们要做的就是后台处理好数据，按照指定的格式responseBody传到前台。

JSP

<%@ 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>Insert title here</title>
</head>
<body>
	  <!-- 为ECharts准备一个具备大小（宽高）的dom，必须设置宽高 -->
    <div id="main" style="width: 1500px;height:500px;"></div>
    
    <script type="text/javascript">
	    // 基于准备好的dom，初始化echarts实例
	    var barChart = echarts.init(document.getElementById("main"));  
	    var option = null; 
    	//页面加载数据
	    $(function () {  
	    	  $.ajax({  
		            url: "<%=request.getContextPath()%>/getEchartsData.do",  
		            dataType: 'json',  
		            success: function (data) {  
		            	option = {
		            	        title: {
		            	            text: '柱状图展示'//标题内容
		            	        },
		            	        tooltip: {},
		            	        legend: {
		            	            data:['部门人员分布图']//标签内容
		            	            //注意例子格式为数组，后台传过来的需要对应格式处理数据
		            	            //data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		            	        },
		            	        xAxis: {
		            	            data: data.name,
		            	            //x轴项目名竖直排列
		            	            axisLabel: {  
		                                interval: 0,  
		                                formatter:function(value)  
		                                {  
		                                    return value.split("").join("\n");  
		                                }  
		                            }   
		            	        },
		            	      
		            	        yAxis: {},
		            	        series: [{
		            	            name: '部门人员分布图',//与标签内容相同
		            	            type: 'bar',
		            	            //增加数据的单位展示
		            	            label:{
		                           	 normal: {
		                           		    show: true,
		           		                    position: 'top',
		           		                    formatter: '{c}人' 
		           		                }
		                           	 },
		            	            //注意例子格式为数组，后台传过来的需要对应格式处理数据
		            	            //data: [5, 20, 36, 10, 10, 20]
		            	            data:data.value
		            	        }]
		            	    };
		            	 // 使用刚指定的配置项和数据显示图表。
		        	    barChart.setOption(option);
		            }  
		        });  
	    });  
    </script>
</body>
</html>

Controller

@RequestMapping("getEchartsData")
	@ResponseBody
	public Map<String,Object> getEchartsData() {
		/*例子中：x轴，y轴data数据都是数组型，注意处理格式，将两个data需要的数据分别以name/value存入map
		 * xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 10, 20]
	    }]*/
		List name = new ArrayList();
		List value = new ArrayList();
		
		List<EchartsDataBallBean> list = auserService.getEchartsDataBall();
		//单独挑出两种数据的集合放入map
		for (EchartsDataBallBean echartsDataBallBean : list) {
			name.add(echartsDataBallBean.getName());//对应xAxis data
			value.add(echartsDataBallBean.getValue());//对应yAxis data
		}
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("name", name);
		map.put("value", value);
		return map;
	}

Entity 这里设定属性名value/name为了后续饼状图共用这个实体类接收数据

package com.jk.quanxian.entity;

public class EchartsDataBallBean {
	private Integer value;
	private String name;
	public Integer getValue() {
		return value;
	}
	public void setValue(Integer value) {
		this.value = value;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "EchartsDataBallBean [value=" + value + ", name=" + name + "]";
	}
	
	
	
}

Mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.jk.quanxian.mapper.EchartsDataBallMapper" >
  <resultMap id="BaseResultMap" type="com.jk.quanxian.entity.EchartsDataBallBean" >
    <result column="name" property="name" />
    <result column="value" property="value" />
  </resultMap>
  <select id="getEchartsDataBall" resultMap="BaseResultMap" >
    select d.C_Name as name, COUNT(u.C_Name) as value 
    from t_aty_dept d,t_aty_user u where d.C_ID = u.C_DEPT GROUP BY d.C_Name
  </select>
</mapper>