Spring Boot整合Echarts繪製靜態資料柱狀圖、餅圖
阿新 • • 發佈：2019-02-14
idea建立spring boot專案
下載echarts
把echarts.min.js檔案放到專案中。
專案目錄
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <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"> <modelVersion>4.0.0</modelVersion> <groupId>com.sid.spark</groupId> <artifactId>webspark</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>webspark</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
application.properties
配置專案訪問埠9999，配置字首/sid
server.port=9999
server.servlet.context-path=/sidHelloSpringBoot.javapackage com.sid.spark.webspark; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; @RestController public class HelloSpringBoot { @RequestMapping(value="/hello",method = RequestMethod.GET) public String sayHello(){ return "Hello Spring Boot!"; } @RequestMapping(value="/first",method = RequestMethod.GET) public ModelAndView firstDemo(){ return new ModelAndView("test");//跟templates資料夾下的test.html名字一樣，返回這個介面 } @RequestMapping(value="/courseClickCount",method = RequestMethod.GET) public ModelAndView courseClickCountStat(){ return new ModelAndView("demo");//跟templates資料夾下的demo.html名字一樣，返回這個介面 } }
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 ECharts 檔案 --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入 ECharts 檔案 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定圖表的配置項和資料
var option = {
title : {
text: 'Spark Streaming實戰課程訪問量實時統計',
subtext: '實戰課程訪問次數',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Spark SQL實戰','Hadoop基礎','Storm實戰','Spark Streaming實戰','理論']
},
series : [
{
name: '訪問次數',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:3350, name:'Spark SQL實戰'},
{value:3100, name:'Hadoop基礎'},
{value:2340, name:'Storm實戰'},
{value:1350, name:'Spark Streaming實戰'},
{value:15480, name:'理論'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>執行專案
訪問http://localhost:9999/sid/hello
http://localhost:9999/sid/first
