java运用echart进行图形展示
2024-10-25 16:20:50 来源: 阅读:
前段时间项目中要做一个根据数据生成折线图的功能，并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图行展现控制器，通过该控制器返回处理后的图形数据给前端
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 @RestController 11 @RequestMapping(value="/echarts",produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8") 12 public class EchartsTestController { 13 14 @Autowired 15 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="js/jquery-2.1.4/jquery.min.js"></script> 8 <script type="text/javascript" src="js/ehcarts/echarts-all.js"></script> 9 <!-- 10 <script type="text/javascript" src="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 : { 40 show: true, 41 name:'折线图'//保存的图片名次 42 } 43 } 44 }, 45 calculable : true, 46 xAxis : [ 47 { 48 type : 'category', 49 boundaryGap : false, 50 data : [] 51 } 52 ], 53 yAxis : [ 54 { 55 type : 'value', 56 axisLabel : { 57 formatter: '{value} ' 58 } 59 } 60 ], 61 grid: { 62 x:30,//设置该图形与对应div的左边距 63 y:30,//设置该图形与对应div的上边距 64 x2:50,//设置该图形与对应div的右边距 65 y2:10//设置该图形与对应div的下边距 66 }, 67 series : [] 68 }; 69 70 myChart.setOption(lineOption); 71 var ajax = function() { 72 $.ajax({ 73 url : '/echarts/showImage', 74 success: function(responseText) { 75 //请求成功时处理 76 var responseText = eval('(' + responseText + ')'); 77 lineOption.legend.data=responseText.legend; 78 lineOption.xAxis[0].data = responseText.xAxis; 79 var serieslist = responseText.series; 80 //alert(serieslist); 81 for(var i=0;i<serieslist.length;i++) { 82 lineOption.series[i] = serieslist[i]; 83 } 84 //alert(lineOption.series); 85 myChart.setOption(lineOption,true); 86 }, 87 complete: function() { 88 //请求完成的处理 89 }, 90 error: function() { 91 //请求出错处理 92 alert("加载失败"); 93 } 94 }) 95 } 96 97 window.setTimeout(ajax,100); 98 //window.setInterval(ajax,1000*60*5); 99 </script> 100 </body> 101 102 </html>
运行项目，结果如图所示：
