SpringMVC+ECharts生成简单饼状图表

核心思想：ajax请求数据，渲染图表。

具体实现：根据不同图表需要显示数据的种类和个数，在springmvc的后台构建相应的数据封装后以json串的形式进行返回，ajax解析数据后渲染到图表的不同位置上进行显示。

一、首先，看一下在不加ajax时候，静态图表的显示：

Echarts的使用和介绍请点击官网：官网

详细使用步骤：

下载echarts图表的核心依赖库：echart.min.js
直接上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=ISO-8859-1">
<!-- 导入echart图表的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
<title>饼状图表</title>
</head>
<body>

	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
	
</body>
<script type="text/javascript">
	/* 基于准备好的dom，初始化echarts实例 */
	var myChart = echarts.init(document.getElementById('main'));
	
	/* 核心显示设置 */
	var option = {
			/* 标题设置 */
		    title : {
		        text: '饼状图表',
		        subtext: '静态数据',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    /* 颜色和选项的对应关系 */
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
		    },
		    /* 内容显示 */
		    series : [
		        {
		            name: '访问来源',  	//鼠标移至不同扇形区提示信息的标题
		            type: 'pie',	//指定数据生成的图表类型
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ], 
		            /* 阴影区域设置 */
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	
	/* 使用刚指定的配置项和数据显示图表 */
	myChart.setOption(option); 
</script>
</html>

结果

二、然后，我们加入ajax，看动态图表如何生成：

下载jquery和echarts的核心依赖库
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=ISO-8859-1">
<!-- 导入jquery的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/javascript/jquery.min.js"></script>
<!-- 导入echarts的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
<title>饼状图表</title>
</head>
<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
	
</body>
<script type="text/javascript">
	/* 基于准备好的dom，初始化echarts实例 */
	var myChart = echarts.init(document.getElementById('main'));
	/* 核心显示设置 */
	var option = {
			/* 标题设置 */
		    title : {
		        text: '报表统计',
		        subtext: '数据虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    /* 颜色和选项的对应关系 */
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: []			//待填充数据项1
		    },
		    /* 内容显示 */
		    series : [
		        {
		            name: '班级',  	//鼠标移至不同扇形区提示信息的标题
		            type: 'pie',	//指定数据生成的图表类型
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[], 		//待填充数据项2
		            /* 阴影区域设置 */
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	/* 发送ajax请求 */
	var data = {};
	//发送key-value类型的请求数据
        //例如：data.xxx = 1;
	$.ajax({
        type: "POST",
      	//当发送json数据时添加：
       	/*  contentType: "application/json; charset=utf-8", */
        url: "card/getChart.mvc",
        data: data,
        error: function (data) {
            alert("出错了！" );
        },
        success: function (data) {
        	//对echarts模板进行数据填充 
            option.legend.data = data.title;
            option.series[0].data = data.number; 
          	//重新加载图表显示
            myChart.setOption(option);
        }
    });
</script>
</html>

pojo

package com.cyn.ssm.po.po;

import java.util.HashMap;
import java.util.List;
/*
 * 将返回的数据项封装为pojo对象的属性
 */
public class Item {
	
	private List<String> title;
	private List<HashMap<String, Object>> number;
	
	public List<String> getTitle() {
		return title;
	}
	public void setTitle(List<String> title) {
		this.title = title;
	}
	public List<HashMap<String, Object>> getNumber() {
		return number;
	}
	public void setNumber(List<HashMap<String, Object>> number) {
		this.number = number;
	}	

}

springmvc

        /*
	 * 模拟数据返回json
	 */
	@RequestMapping("getChart")
	@ResponseBody
	public item  getChart(){
		
	//构建返回的数据项，实际开发中应该从数据库中读出
	List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
        List<String> names = new ArrayList<String>();
        names.add("接送比列");
        names.add("请假比列");
        names.add("滞留比列");
        //模拟数据
        for (String name : names) {
        HashMap<String, Object> vals = new HashMap<String, Object>();
            vals.put("name", name);
            vals.put("value", Math.round(Math.random() * 100));
            list.add(vals);
        }
       //封装成pojo对象
       Item item = new Item ();
       item.setNumber(list);
       item.setTitle(names);
       return item;
       }

结果

备注：其他图表生成方式和此图类似，可以参考https://blog.csdn.net/yungpheng/article/details/54177917

SpringMVC+ECharts生成简单饼状图表

详细使用步骤：

猜你喜欢