首页 > 代码库 > echart报表插件使用笔记（二）--按月统计

echart报表插件使用笔记（二）--按月统计

2024-07-11 11:21:33   227人阅读

按月统计注册人数

java类：

package com.spring.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.ServletRequestUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EchartController {

	/**
	 * Echart报表按月份统计
	 */
	@RequestMapping(value = http://www.mamicode.com/"user/month", method = { RequestMethod.POST,>
页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'monthEchart.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/echart/esl.js"></script>
  </head>
  
  <body>
       		<div id="main" style="height:400px"></div>
            
	    <script type="text/javascript">
	        // 路径配置
	        require.config({
	            paths:{ 
	                'echarts' : 'resources/echart/echarts',
	                'echarts/chart/bar' : 'resources/echart/echarts'
	            }
	        });
	        
	        // 使用
	        require(
	            [
	                'echarts',
	                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
	            ],
	            function (ec) {
	                // 基于准备好的dom，初始化echarts图表
	                var myChart = ec.init(document.getElementById('main')); 
	                
	                var jsonData=${jsonData};//接收后台传过来的json数组
	                alert(jsonData);
	                
	                var jsonMonth=${jsonMonth};
	                alert(jsonMonth);
	                
	                //便利json数组
	              /*   $.each(json,function(n,value) {
	                	alert(value)
	                }); */
	                
	                var option = {
	                    tooltip: {
	                        show: true
	                    },
	                    legend: {
	                        data:['注册人数']
	                    },
	                    xAxis : [
	                        {
	                            type : 'category',
	                            data : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",]
	                        }
	                    ],
	                    yAxis : [
	                        {
	                            type : 'value'
	                        }
	                    ],
	                    series : [
	                        {
	                            "name":"注册人数",
	                            "type":"bar",
	                            itemStyle: {
	                                normal: {
	                                	//柱状图颜色
	                                    color: '#0080ff',
	                                    label: {
	                                         show: true,
	                                         //position : 'inside',
	                                         formatter : '{b}',
	                                         textStyle: {
	                                             color: '#10E922'
	                                         }
	                                     }
	                                }
	                            },
	                            "data":jsonData
	                        }
	                    ]
	                };
	        
	                // 为echarts对象加载数据 
	                myChart.setOption(option); 
	            }
	        );
	    </script>
  </body>
</html>


运行效果图：


联系
我们