Skip to content

Commit 611e296

Browse files
TellseaTellsea
committed
springboot-echarts init
1 parent d3986a3 commit 611e296

File tree

12 files changed

+324
-0
lines changed

12 files changed

+324
-0
lines changed

‎springboot-echarts/pom.xml

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3+
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
4+
<modelVersion>4.0.0</modelVersion>
5+
<parent>
6+
<groupId>org.springframework.boot</groupId>
7+
<artifactId>spring-boot-starter-parent</artifactId>
8+
<version>2.1.5.RELEASE</version>
9+
<relativePath/> <!-- lookup parent from repository -->
10+
</parent>
11+
<groupId>cn.tellsea</groupId>
12+
<artifactId>springboot-echarts</artifactId>
13+
<version>0.0.1-SNAPSHOT</version>
14+
<name>springboot-echarts</name>
15+
<description>Demo project for Spring Boot</description>
16+
17+
<properties>
18+
<java.version>1.8</java.version>
19+
</properties>
20+
21+
<dependencies>
22+
<dependency>
23+
<groupId>org.springframework.boot</groupId>
24+
<artifactId>spring-boot-starter-web</artifactId>
25+
</dependency>
26+
27+
<dependency>
28+
<groupId>org.springframework.boot</groupId>
29+
<artifactId>spring-boot-starter-test</artifactId>
30+
<scope>test</scope>
31+
</dependency>
32+
33+
<dependency>
34+
<groupId>org.springframework.boot</groupId>
35+
<artifactId>spring-boot-starter-thymeleaf</artifactId>
36+
</dependency>
37+
38+
<dependency>
39+
<groupId>org.projectlombok</groupId>
40+
<artifactId>lombok</artifactId>
41+
<version>1.18.8</version>
42+
</dependency>
43+
</dependencies>
44+
45+
<build>
46+
<plugins>
47+
<plugin>
48+
<groupId>org.springframework.boot</groupId>
49+
<artifactId>spring-boot-maven-plugin</artifactId>
50+
</plugin>
51+
</plugins>
52+
</build>
53+
54+
</project>

‎springboot-echarts/src/main/java/cn/tellsea/SpringbootEchartsApplication.java

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
package cn.tellsea;
2+
3+
import org.springframework.boot.SpringApplication;
4+
import org.springframework.boot.autoconfigure.SpringBootApplication;
5+
6+
@SpringBootApplication
7+
public class SpringbootEchartsApplication {
8+
9+
public static void main(String[] args) {
10+
SpringApplication.run(SpringbootEchartsApplication.class, args);
11+
}
12+
13+
}

‎springboot-echarts/src/main/java/cn/tellsea/bean/Product.java

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package cn.tellsea.bean;
2+
3+
import lombok.AllArgsConstructor;
4+
import lombok.Data;
5+
import lombok.NoArgsConstructor;
6+
7+
@Data
8+
@AllArgsConstructor
9+
@NoArgsConstructor
10+
public class Product {
11+
12+
public String productName;
13+
14+
public Integer nums;
15+
}

‎springboot-echarts/src/main/java/cn/tellsea/web/IndexController.java

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
package cn.tellsea.web;
2+
3+
import cn.tellsea.bean.Product;
4+
import org.springframework.stereotype.Controller;
5+
import org.springframework.ui.Model;
6+
import org.springframework.web.bind.annotation.GetMapping;
7+
import org.springframework.web.bind.annotation.ResponseBody;
8+
9+
import java.util.Arrays;
10+
import java.util.List;
11+
12+
@Controller
13+
public class IndexController {
14+
15+
// 静态的图表页面
16+
@GetMapping({"", "/", "/index"})
17+
public String index() {
18+
return "index";
19+
}
20+
21+
// 一条动态数据
22+
@GetMapping("/echarts")
23+
public String myECharts(Model model) {
24+
String skirt = "裙子";
25+
int nums = 30;
26+
model.addAttribute("skirt", skirt);
27+
model.addAttribute("nums", nums);
28+
return "echarts";
29+
}
30+
31+
// 所有数据为动态数据
32+
@GetMapping("/product")
33+
public String product() {
34+
return "product";
35+
}
36+
37+
// 提供数据的接口
38+
@GetMapping("/list")
39+
@ResponseBody
40+
public List<Product> productList() {
41+
return Arrays.asList(
42+
new Product("酸奶", 4),
43+
new Product("大食桶", 5),
44+
new Product("安慕希", 8),
45+
new Product("津威", 2),
46+
new Product("汉堡包", 10)
47+
);
48+
}
49+
}

‎springboot-echarts/src/main/resources/application.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎springboot-echarts/src/main/resources/static/js/echarts.min.js

+22
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎springboot-echarts/src/main/resources/static/js/jquery-3.4.1.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎springboot-echarts/src/main/resources/templates/echarts.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>springboot-echarts</title>
6+
</head>
7+
<body>
8+
9+
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
10+
<div id="main" style="width: 800px; height: 550px; margin: auto;"></div>
11+
12+
<script src="/js/jquery-3.4.1.min.js"></script>
13+
<script src="/js/echarts.min.js"></script>
14+
<script type="text/javascript">
15+
// 基于准备好的dom，初始化echarts实例
16+
var myChart = echarts.init(document.getElementById('main'));
17+
18+
var skirt="[[${skirt}]]";
19+
var nums="[[${nums}]]";
20+
21+
// 指定图表的配置项和数据
22+
var option = {
23+
title: {
24+
text: 'ECharts 入门示例'
25+
},
26+
tooltip: {},
27+
legend: {
28+
data: ['销量']
29+
},
30+
xAxis: {
31+
data: [skirt, "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
32+
},
33+
yAxis: {},
34+
series: [{
35+
name: '销量',
36+
type: 'bar',
37+
data: [nums, 20, 36, 10, 10, 20]
38+
}]
39+
};
40+
41+
// 使用刚指定的配置项和数据显示图表。
42+
myChart.setOption(option);
43+
</script>
44+
</body>

‎springboot-echarts/src/main/resources/templates/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>springboot-echarts</title>
6+
</head>
7+
<body>
8+
9+
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
10+
<div id="main" style="width: 800px; height: 550px; margin: auto;"></div>
11+
12+
<script src="/js/jquery-3.4.1.min.js"></script>
13+
<script src="/js/echarts.min.js"></script>
14+
<script type="text/javascript">
15+
// 基于准备好的dom，初始化echarts实例
16+
var myChart = echarts.init(document.getElementById('main'));
17+
18+
// 指定图表的配置项和数据
19+
var option = {
20+
title: {
21+
text: 'SpringBoot ECharts'
22+
},
23+
tooltip: {},
24+
legend: {
25+
data: ['销量']
26+
},
27+
xAxis: {
28+
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
29+
},
30+
yAxis: {},
31+
series: [{
32+
name: '销量',
33+
type: 'bar',
34+
data: [5, 20, 36, 10, 10, 20]
35+
}]
36+
};
37+
38+
// 使用刚指定的配置项和数据显示图表。
39+
myChart.setOption(option);
40+
</script>
41+
</body>
42+
</html>

‎springboot-echarts/src/main/resources/templates/product.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>springboot-echarts</title>
6+
</head>
7+
<body>
8+
9+
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
10+
<div id="main" style="width: 800px; height: 550px; margin: auto;"></div>
11+
12+
<script src="/js/jquery-3.4.1.min.js"></script>
13+
<script src="/js/echarts.min.js"></script>
14+
<script>
15+
var myChart = echarts.init(document.getElementById('main'));
16+
17+
var option = {
18+
title: {
19+
text: '小海绵零食统计图',
20+
subtext: '画饼充饥',
21+
x: 'center'
22+
},
23+
tooltip: {
24+
trigger: 'item',
25+
formatter: "{a} <br/>{b} : {c} ({d}%)"
26+
},
27+
legend: {
28+
orient: 'vertical',
29+
left: 'left',
30+
},
31+
series: [
32+
{
33+
name: '访问来源',
34+
type: 'pie',
35+
radius: '55%',
36+
center: ['50%', '60%'],
37+
data: (function () {
38+
var datas = [];
39+
$.ajax({
40+
type: "GET",
41+
url: "/list",
42+
dataType: "json",
43+
async: false,
44+
success: function (result) {
45+
for (var i = 0; i < result.length; i++) {
46+
datas.push({
47+
"value": result[i].nums, "name": result[i].productName
48+
})
49+
}
50+
}
51+
})
52+
return datas;
53+
})(),
54+
itemStyle: {
55+
emphasis: {
56+
shadowBlur: 10,
57+
shadowOffsetX: 0,
58+
shadowColor: 'rgba(0, 0, 0, 0.5)'
59+
}
60+
}
61+
}
62+
]
63+
};
64+
myChart.setOption(option);
65+
</script>
66+
</body>

‎springboot-echarts/src/test/java/cn/tellsea/SpringbootEchartsApplicationTests.java

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
package cn.tellsea;
2+
3+
import org.junit.Test;
4+
import org.junit.runner.RunWith;
5+
import org.springframework.boot.test.context.SpringBootTest;
6+
import org.springframework.test.context.junit4.SpringRunner;
7+
8+
@RunWith(SpringRunner.class)
9+
@SpringBootTest
10+
public class SpringbootEchartsApplicationTests {
11+
12+
@Test
13+
public void contextLoads() {
14+
}
15+
16+
}

‎springboot-jdbc-templete/doc/images/qq-group.png

-20.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)