首页 > 代码库 > EChart报表插件使用笔记（1）

EChart报表插件使用笔记（1）

2024-07-10 23:36:46   221人阅读

报表插件Echart


java类

package com.spring.controller;

import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.List;

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.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/echart", method = {RequestMethod.POST,RequestMethod.GET})>
静态页面：
<%@ 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 'echart.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 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 option = {
	                    tooltip: {
	                        show: true
	                    },
	                    legend: {
	                        data:['销量']
	                    },
	                    xAxis : [
	                        {
	                            type : 'category',
	                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	                        }
	                    ],
	                    yAxis : [
	                        {
	                            type : 'value'
	                        }
	                    ],
	                    series : [
	                        {
	                            "name":"销量",
	                            "type":"bar",
	                            "data":[5, 20, 40, 10, 10, 20]
	                        }
	                    ]
	                };
	        
	                // 为echarts对象加载数据 
	                myChart.setOption(option); 
	            }
	        );
	    </script>
  </body>
</html>


动态页面：
<%@ 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 'dynamicEchart.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>
            <input type="text" id="array" class="array" value="${array}" >
            <input type="text" id="listData" class="listData" value="${listData}" >
            <input type="text" id="jsonArray" class="jsonArray" value="${jsonArray}" >
            <input type="text" id="jsonList" class="jsonList" value="${jsonList}" >
            
	    <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 jsonList=${jsonList};//接收后台传过来的json数组
	                alert(jsonList);
	                var jsona=${jsonArray};//接收后台传过来的json数组
	                alert(jsona);
	                
	                var jsonInt=${jsonInt};//接收后台传过来的json数组
	                alert(jsonInt);
	                //便利json数组
	              /*   $.each(json,function(n,value) {
	                	alert(value)
	                }); */
	                
	                var option = {
	                    tooltip: {
	                        show: true
	                    },
	                    legend: {
	                        data:['销量']
	                    },
	                    xAxis : [
	                        {
	                            type : 'category',
	                            data : jsonList
	                        }
	                    ],
	                    yAxis : [
	                        {
	                            type : 'value'
	                        }
	                    ],
	                    series : [
	                        {
	                            "name":"销量",
	                            "type":"bar",
	                            "data":jsonInt
	                        }
	                    ]
	                };
	        
	                // 为echarts对象加载数据 
	                myChart.setOption(option); 
	            }
	        );
	    </script>
  </body>
</html>


运行效果图：


联系
我们