EChart报表插件使用笔记

Posted gccbuaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EChart报表插件使用笔记相关的知识,希望对你有一定的参考价值。

报表插件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="user/echart", method = {RequestMethod.POST,RequestMethod.GET})
	public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{
		ModelAndView mav=new ModelAndView();
		mav.addObject("time", new Date());
		mav.setViewName("echart/echart");
		return mav;
	}
	
	/**
	 * 动态的Echart报表页面
	 */
	@RequestMapping(value="user/echart2", method = {RequestMethod.POST,RequestMethod.GET})
	public ModelAndView dynamicEchart(HttpServletRequest request,HttpServletResponse response) throws IOException{
		ModelAndView mav=new ModelAndView();
		String str[]={"衬衫2","羊毛衫2","雪纺衫2","裤子2","高跟鞋2","袜子2","nickname"};
		float bar[]={15, 28, 41, 45, 56, 120, 89};
		
		List<String> category=Arrays.asList(str);//将数组转换成为list
		mav.addObject("time", new Date());
		mav.addObject("listData", category);//list
		mav.addObject("array", str);//数组
		
		mav.addObject("jsonArray", JSONArray.fromObject(str));//转换为json数组
		mav.addObject("jsonList", JSONArray.fromObject(category));//转换为json数组
		mav.addObject("jsonInt", JSONArray.fromObject(bar));//转换为json数组
		mav.setViewName("echart/dynamicEchart");
		return mav;
	}
	
	
}

静态页面:

<%@ 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>

执行效果图:

技术分享










以上是关于EChart报表插件使用笔记的主要内容,如果未能解决你的问题,请参考以下文章

ionic3引用外部插件--百度地图及echart报表的使用

Echart数据报表

[deviceone开发]-echart的简单报表示例

echart 报表图片不展示

Python Web开发之echart视图插件

eChart学习笔记