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

项目目录如下图所示：

1.pom.

 1 <project  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.faster38     <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>

View Code

2.web.

 1 <? 2 <web-app  3    4   xsi:schemaLocation="http://java.sun.com/ 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*.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.47     <init-param>48       <param-name>contextConfigLocation</param-name>49       <param-value>classpath:spring/springmvc.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>

View Code

3.applicationContext-service.

 1 <beans  2    3    4    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>

View Code

4.springmvc.

 1 <? 2 <beans  3    4    5    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   <bean13     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>

View Code

5.EchartsEntity.java

 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

 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.faster12 import com.faster13 14 import po.EchartsEntity;15 import service.EchartsService;16 17 @Service18 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 block42       e.printStackTrace();43     }44     return "";45   }46 47 }

7.EchartsTestController.java

 1 package controller; 2  3 import org.springframework.beans.factory.annotation.Autowired; 4 import org.springframework.http.MediaType; 5 import org.springframework.web.bind.annotation.RequestMapping; 6 import org.springframework.web.bind.annotation.RestController; 7  8 import service.EchartsService; 9 10 @RestController11 @RequestMapping(value="/echarts",produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")12 public class EchartsTestController {13 14   @Autowired15   public EchartsService echartsService;16   17   @RequestMapping("/showImage")18   public String showImage() {19     String value = echartsService.getLineImage();20     System.out.println(value);21     return value;22   }23 }

8.ShowPageController.java

 1 package controller; 2  3 import org.springframework.stereotype.Controller; 4 import org.springframework.web.bind.annotation.PathVariable; 5 import org.springframework.web.bind.annotation.RequestMapping; 6  7 @Controller 8 public class ShowPageController { 9 10   @RequestMapping("/{page}")11   public String showPage(@PathVariable String page) {12   13     return page;14   }15 }

9.前台jsp页面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2   pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-2.1.4/jquery.min.js"></script> 8 <script type="text/javascript" src='/images/loading.gif' data-original="js/ehcarts/echarts-all.js"></script> 9 <!-- 10 <script type="text/javascript" src='/images/loading.gif' data-original="js/echarts-2.2.7/build/dist/echarts-all.js"></script>11 -->12 <title>Insert title here</title>13 </head>14 <body>15 <div id='line' style="height:500px;border:1px solid #ccc;padding:10px;"></div>16 <script type="text/javascript">17 var myChart = echarts.init(document.getElementById('line'));18 var lineOption = {19     title : {20       text: '',21       subtext: ''22     },23     tooltip : {24       trigger: 'axis' //item 点在哪条线上显示哪条线上的数据，axis点在哪个坐标点上显示对于点上所有数据25     },26     legend: {27       data:[]28     },29     toolbox: {30       show : true,31       orient : 'vertical',32       x: 'right',33       y: 'center',34       feature : {35         mark : {show: true},36         dataView : {show: true, readOnly: false},37         magicType : {show: true, type: ['line', 'bar']},38         restore : {show: true},39         saveAsImage : {show: true}40       }41     },42     calculable : true,43     xAxis : [44       {45         type : 'category',46         boundaryGap : false,47         data : []48       }49     ],50     yAxis : [51       {52         type : 'value',53         axisLabel : {54           formatter: '{value} '55         }56       }57     ],58     series : []59   };60 61 myChart.setOption(lineOption);62 var ajax = function() {63   $.ajax({64     url : '/echarts/showImage',65     success: function(responseText) {66       //请求成功时处理67       var responseText = eval('(' + responseText + ')'); 68       lineOption.legend.data=responseText.legend;69       lineOption.xAxis[0].data = responseText.xAxis;70       var serieslist = responseText.series;71       //alert(serieslist);72       for(var i=0;i<serieslist.length;i++) {73         lineOption.series[i] = serieslist[i];74       }75       //alert(lineOption.series);76       myChart.setOption(lineOption,true);77     },78     complete: function() {79       //请求完成的处理80     },81     error: function() {82       //请求出错处理83       alert("加载失败");84     }85   })86 }87 88 window.setTimeout(ajax,100);89 //window.setInterval(ajax,1000*60*5);90 </script>91 </body>92 93 </html>

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

原标题：java运用echart进行图形展示

关键词：JAVA