java echarts_java运用echart进行图形展示

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

项目目录如下图所示：

1.pom.xml文件

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

1

2 4.0.0

3 test

4 test

5 0.0.1-SNAPSHOT

6 war

7

8

9 4.1.3.RELEASE

10 2.4.2

11 1.2

12 2.5

13 2.0

14

15

16

17

18

19 jstl

20 jstl

21 ${jstl.version}

22

23

24 javax.servlet

25 servlet-api

26 provided

27 ${servlet-api.version}

28

29

30 javax.servlet

31 jsp-api

32 provided

33 ${jsp-api.version}

34

35

36

37 com.fasterxml.jackson.core

38 jackson-databind

39 ${jackson.version}

40

41

42

43 org.springframework

44 spring-context

45 ${spring.version}

46

47

48 org.springframework

49 spring-beans

50 ${spring.version}

51

52

53 org.springframework

54 spring-webmvc

55 ${spring.version}

56

57

58 org.springframework

59 spring-jdbc

60 ${spring.version}

61

62

63 org.springframework

64 spring-aspects

65 ${spring.version}

66

67

68

69

70

71

72 org.apache.tomcat.maven

73 tomcat7-maven-plugin

74

75 8080

76 /

77

78

79

80

81

View Code

2.web.xml文件

该文件可以不看

1 <?xml version="1.0" encoding="UTF-8"?>

2

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

7 index.html

8 index.htm

9 index.jsp

10 default.html

11 default.htm

12 default.jsp

13

14

15

16

17 contextConfigLocation

18 classpath:spring/applicationContext*.xml

19

20

21 org.springframework.web.context.ContextLoaderListener

22

23

24

25

26 CharacterEncodingFilter

27 org.springframework.web.filter.CharacterEncodingFilter

28

29 encoding

30 utf-8

31

32

33 forceEncoding

34 true

35

36

37

38 CharacterEncodingFilter

39 /*40 41

42 43 44 springmvc45 org.springframework.web.servlet.DispatcherServlet46 47 48 contextConfigLocation49 classpath:spring/springmvc.xml50 51 152 53 54 springmvc55 /56 57

58

View Code

3.applicationContext-service.xml文件

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

1

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/contexthttp://www.springframework.org/schema/context/spring-context-4.0.xsd

7 http://www.springframework.org/schema/aophttp://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/utilhttp://www.springframework.org/schema/util/spring-util-4.0.xsd">

9

10

11

View Code

4.springmvc.xml文件

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

1 <?xml version="1.0" encoding="UTF-8"?>

2

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/mvchttp://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd

8 http://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd">

9

10

11

12

14

15 value="org.springframework.web.servlet.view.JstlView" />

16

17

18

19

20

21

22

23

24

View Code

5.EchartsEntity.java

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

1 packagepo;2

3 importjava.util.List;4

5 public classEchartsEntity {6

7 publicString name;8 publicString type;9 public List>data;10

11 publicEchartsEntity() {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 publicString getName() {23 returnname;24 }25

26 public voidsetName(String name) {27 this.name =name;28 }29

30 publicString getType() {31 returntype;32 }33

34 public voidsetType(String type) {35 this.type =type;36 }37

38 public List>getData() {39 returndata;40 }41

42 public void setData(List>data) {43 this.data =data;44 }45

46

47 }

View Code

6.EchartsServiceImpl.java

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

1 packageservice.impl;2

3 importjava.util.ArrayList;4 importjava.util.Arrays;5 importjava.util.HashMap;6 importjava.util.List;7 importjava.util.Map;8

9 importorg.springframework.stereotype.Service;10

11 importcom.fasterxml.jackson.core.JsonProcessingException;12 importcom.fasterxml.jackson.databind.ObjectMapper;13

14 importpo.EchartsEntity;15 importservice.EchartsService;16

17 @Service18 public class EchartsServiceImpl implementsEchartsService {19

20 private ObjectMapper mapper = newObjectMapper();21 publicString getLineImage() {22 List echarts = new ArrayList();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 resultMap = new HashMap();35 resultMap.put("xAxis", xAxis);36 resultMap.put("series", echarts);37 resultMap.put("legend", legend);38 try{39 returnmapper.writeValueAsString(resultMap);40 } catch(JsonProcessingException e) {41 //TODO Auto-generated catch block

42 e.printStackTrace();43 }44 return "";45 }46

47 }

View Code

7.EchartsTestController.java

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

1 packagecontroller;2

3 importorg.springframework.beans.factory.annotation.Autowired;4 importorg.springframework.http.MediaType;5 importorg.springframework.web.bind.annotation.RequestMapping;6 importorg.springframework.web.bind.annotation.RestController;7

8 importservice.EchartsService;9

10 @RestController11 @RequestMapping(value="/echarts",produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")12 public classEchartsTestController {13

14 @Autowired15 publicEchartsService echartsService;16

17 @RequestMapping("/showImage")18 publicString showImage() {19 String value =echartsService.getLineImage();20 System.out.println(value);21 returnvalue;22 }23 }

View Code

8.ShowPageController.java

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

1 packagecontroller;2

3 importorg.springframework.stereotype.Controller;4 importorg.springframework.web.bind.annotation.PathVariable;5 importorg.springframework.web.bind.annotation.RequestMapping;6

7 @Controller8 public classShowPageController {9

10 @RequestMapping("/{page}")11 publicString showPage(@PathVariable String page) {12

13 returnpage;14 }15 }

View Code

9.前台jsp页面

1

2 pageEncoding="UTF-8"%>

3

4

5

6

7

8

9

12

Insert title here

13

14

15