java运用echart进行图形展示

前段时间项目中要做一个根据数据生成折线图的功能，并5分钟刷新一次，进行数据更新。由于之前是用echarts来进行中国地图展现的，所有这次也用echarts进行图形展示。

项目目录如下图所示：

1.pom.xml文件

该文件主要是对jar包进行管理，可以不看

复制代码

 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 2   <modelVersion>4.0.0</modelVersion>
 3   <groupId>test</groupId>
 4   <artifactId>test</artifactId>
 5   <version>0.0.1-SNAPSHOT</version>
 6   <packaging>war</packaging>
 7   
 8   <properties>
 9         <spring.version>4.1.3.RELEASE</spring.version>
10         <jackson.version>2.4.2</jackson.version>
11         <jstl.version>1.2</jstl.version>
12         <servlet-api.version>2.5</servlet-api.version>
13         <jsp-api.version>2.0</jsp-api.version>
14     </properties>
15   
16   <dependencies>
17       <!-- JSP相关 -->
18     <dependency>
19         <groupId>jstl</groupId>
20         <artifactId>jstl</artifactId>
21         <version>${jstl.version}</version>
22     </dependency>
23     <dependency>
24         <groupId>javax.servlet</groupId>
25         <artifactId>servlet-api</artifactId>
26         <scope>provided</scope>
27         <version>${servlet-api.version}</version>
28     </dependency>
29     <dependency>
30         <groupId>javax.servlet</groupId>
31         <artifactId>jsp-api</artifactId>
32         <scope>provided</scope>
33         <version>${jsp-api.version}</version>
34     </dependency>
35     <!-- Jackson Json处理工具包 -->
36     <dependency>
37         <groupId>com.fasterxml.jackson.core</groupId>
38         <artifactId>jackson-databind</artifactId>
39         <version>${jackson.version}</version>
40     </dependency>
41     <!-- Spring -->
42     <dependency>
43         <groupId>org.springframework</groupId>
44         <artifactId>spring-context</artifactId>
45         <version>${spring.version}</version>
46     </dependency>
47     <dependency>
48         <groupId>org.springframework</groupId>
49         <artifactId>spring-beans</artifactId>
50         <version>${spring.version}</version>
51     </dependency>
52     <dependency>
53         <groupId>org.springframework</groupId>
54         <artifactId>spring-webmvc</artifactId>
55         <version>${spring.version}</version>
56     </dependency>
57     <dependency>
58         <groupId>org.springframework</groupId>
59         <artifactId>spring-jdbc</artifactId>
60         <version>${spring.version}</version>
61     </dependency>
62     <dependency>
63         <groupId>org.springframework</groupId>
64         <artifactId>spring-aspects</artifactId>
65         <version>${spring.version}</version>
66     </dependency>
67   </dependencies>
68   
69   <build>
70       <plugins>
71           <plugin>
72               <groupId>org.apache.tomcat.maven</groupId>
73             <artifactId>tomcat7-maven-plugin</artifactId>
74             <configuration>
75                 <port>8080</port>
76                 <path>/</path>
77             </configuration>
78           </plugin>
79       </plugins>
80   </build>
81 </project>

2.web.xml文件

该文件可以不看

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 4     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 5     id="taotao" version="2.5">
 6     <welcome-file-list>
 7         <welcome-file>index.html</welcome-file>
 8         <welcome-file>index.htm</welcome-file>
 9         <welcome-file>index.jsp</welcome-file>
10         <welcome-file>default.html</welcome-file>
11         <welcome-file>default.htm</welcome-file>
12         <welcome-file>default.jsp</welcome-file>
13     </welcome-file-list>
14 
15     <!-- 加载spring容器 -->
16     <context-param>
17         <param-name>contextConfigLocation</param-name>
18         <param-value>classpath:spring/applicationContext*.xml</param-value>
19     </context-param>
20     <listener>
21         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
22     </listener>
23 
24     <!-- 解决post乱码 -->
25     <filter>
26         <filter-name>CharacterEncodingFilter</filter-name>
27         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
28         <init-param>
29             <param-name>encoding</param-name>
30             <param-value>utf-8</param-value>
31         </init-param>
32         <init-param>
33             <param-name>forceEncoding</param-name>
34             <param-value>true</param-value>
35         </init-param>
36     </filter>
37     <filter-mapping>
38         <filter-name>CharacterEncodingFilter</filter-name>
39         <url-pattern>/*</url-pattern>
40     </filter-mapping>
41 
42     <!-- springmvc的前端控制器 -->
43     <servlet>
44         <servlet-name>springmvc</servlet-name>
45         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
46         <!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" -->
47         <init-param>
48             <param-name>contextConfigLocation</param-name>
49             <param-value>classpath:spring/springmvc.xml</param-value>
50         </init-param>
51         <load-on-startup>1</load-on-startup>
52     </servlet>
53     <servlet-mapping>
54         <servlet-name>springmvc</servlet-name>
55         <url-pattern>/</url-pattern>
56     </servlet-mapping>
57     
58 </web-app>

3.applicationContext-service.xml文件

该文件为spring的配置文件，可以不看

 1 <beans xmlns="http://www.springframework.org/schema/beans"
 2     xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
 3     xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 5     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
 6     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
 7     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
 8     http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">
 9 
10     <context:component-scan base-package="service"/>
11 </beans>

4.springmvc.xml文件

该文件为springmvc的配置文件，可以不看

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
 4     xmlns:context="http://www.springframework.org/schema/context"
 5     xmlns:mvc="http://www.springframework.org/schema/mvc"
 6     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
 7         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
 8         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
 9 
10     <context:component-scan base-package="controller" />
11     <mvc:annotation-driven />
12     <bean
13         class="org.springframework.web.servlet.view.InternalResourceViewResolver">
14         <property name="viewClass"
15            value="org.springframework.web.servlet.view.JstlView" />
16         <property name="prefix" value="/WEB-INF/jsp/" />
17         <property name="suffix" value=".jsp" />
18     </bean>
19     
20     <mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
21     <mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
22     
23     
24 </beans>

5.EchartsEntity.java

series中有3个比较重要的数据：name、type、data。创建EchartsEntity类对这三个属性进行了封装。

 1 package po;
 2 
 3 import java.util.List;
 4 
 5 public class EchartsEntity {
 6 
 7     public String name;
 8     public String type;
 9     public List<?> data;
10     
11     public EchartsEntity() {
12         
13     }
14 
15     public EchartsEntity(String name, String type, List<?> data) {
16         super();
17         this.name = name;
18         this.type = type;
19         this.data = data;
20     }
21 
22     public String getName() {
23         return name;
24     }
25 
26     public void setName(String name) {
27         this.name = name;
28     }
29 
30     public String getType() {
31         return type;
32     }
33 
34     public void setType(String type) {
35         this.type = type;
36     }
37 
38     public List<?> getData() {
39         return data;
40     }
41 
42     public void setData(List<?> data) {
43         this.data = data;
44     }
45     
46     
47 }

6.EchartsServiceImpl.java

该文件主要是读取后台数据将其存放到EchartsEntity集合中，简单起见，数据我只是从网上code了3条记录。现实开放中，你可以从数据库表中读取数据，然后按需求将这些数据存放到EchartsEntity集合中。

 1 package service.impl;
 2 
 3 import java.util.ArrayList;
 4 import java.util.Arrays;
 5 import java.util.HashMap;
 6 import java.util.List;
 7 import java.util.Map;
 8 
 9 import org.springframework.stereotype.Service;
10 
11 import com.fasterxml.jackson.core.JsonProcessingException;
12 import com.fasterxml.jackson.databind.ObjectMapper;
13 
14 import po.EchartsEntity;
15 import service.EchartsService;
16 
17 @Service
18 public class EchartsServiceImpl implements EchartsService {
19 
20     private ObjectMapper mapper = new ObjectMapper();
21     public String getLineImage() {
22         List<EchartsEntity> echarts = new ArrayList<EchartsEntity>();
23         //自定义横坐标
24         String[] xAxis = {"周一","周二","周三","周四","周五","周六","周日"};
25         //自定义三条线
26         EchartsEntity entity1 = new EchartsEntity("邮件营销","line",Arrays.asList(120, 132, 101, 134, 90, 230, 210));
27         EchartsEntity entity2 = new EchartsEntity("联盟广告","line",Arrays.asList(220, 182, 191, 234, 290, 330, 310));
28         EchartsEntity entity3 = new EchartsEntity("视频广告","line",Arrays.asList(150, 232, 201, 154, 190, 330, 410));
29         echarts.add(entity1);
30         echarts.add(entity2);
31         echarts.add(entity3);
32         
33         String[] legend = {"邮件营销","联盟广告","视频广告"};
34         Map<String, Object> resultMap = new HashMap<String, Object>();
35         resultMap.put("xAxis", xAxis);
36         resultMap.put("series", echarts);
37         resultMap.put("legend", legend);
38         try {
39             return mapper.writeValueAsString(resultMap);
40         } catch (JsonProcessingException e) {
41             // TODO Auto-generated catch block
42             e.printStackTrace();
43         }
44         return "";
45     }
46 
47 }

7.EchartsTestController.java

Echarts图行展现控制器，通过该控制器返回处理后的图形数据给前端

package controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import service.EchartsService;

@RestController
@RequestMapping(value="/echarts",produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")
public class EchartsTestController {

    @Autowired
    public EchartsService echartsService;
    
    @RequestMapping("/showImage")
    public String showImage() {
        String value = echartsService.getLineImage();
        System.out.println(value);
        return value;
    }
}

8.ShowPageController.java

页面展现的控制器，通过该控制器进行页面展现

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ShowPageController {

    @RequestMapping("/{page}")
    public String showPage(@PathVariable String page) {
    
        return page;
    }
}

9.前台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">
<script type="text/javascript" src="js/jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/ehcarts/echarts-all.js"></script>
<!--  
<script type="text/javascript" src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
-->
<title>Insert title here</title>
</head>
<body>
<div id='line' style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('line'));
var lineOption = {
        title : {
            text: '',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis' //item 点在哪条线上显示哪条线上的数据，axis点在哪个坐标点上显示对于点上所有数据
        },
        legend: {
            data:[]
        },
        toolbox: {
            show : true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {
                    show: true,
                    name:'折线图'//保存的图片名次
                    }
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} '
                }
            }
        ],
        grid: {
            x:30,//设置该图形与对应div的左边距
            y:30,//设置该图形与对应div的上边距
            x2:50,//设置该图形与对应div的右边距
            y2:10//设置该图形与对应div的下边距
        },
        series : []
    };

myChart.setOption(lineOption);
var ajax = function() {
    $.ajax({
        url : '/echarts/showImage',
        success: function(responseText) {
            //请求成功时处理
            var responseText = eval('(' + responseText + ')'); 
            lineOption.legend.data=responseText.legend;
            lineOption.xAxis[0].data = responseText.xAxis;
            var serieslist = responseText.series;
            //alert(serieslist);
            for(var i=0;i<serieslist.length;i++) {
                lineOption.series[i] = serieslist[i];
            }
            //alert(lineOption.series);
            myChart.setOption(lineOption,true);
        },
        complete: function() {
            //请求完成的处理
        },
        error: function() {
            //请求出错处理
            alert("加载失败");
        }
    })
}

window.setTimeout(ajax,100);
//window.setInterval(ajax,1000*60*5);
</script>
</body>

</html>

运行项目，结果如图所示：