SpringBoot 整合 Echarts 繪製柱狀圖、餅圖
SpringBoot 整合 Echarts 繪製柱狀圖、餅圖
Idea 建立 SpringBoot 項目
一路狂奔到新項目窗口javascript
下載 Echarts
把 echarts.min.js 文件放到項目中。html
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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.pony</groupId>
<artifactId>springboot_echarts</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot_echarts</name>
<description>Demo project for Spring Boot</description>
<properties>
<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
server.port=9090 server.servlet.context-path=/chart
controller
package com.pony.controller;
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;
/**
* @author 巔峯小詞典
* @description
* @date 2021/5/21
* @project springboot_echarts
*/
@RestController
public class EchartsController {
@RequestMapping(value = "/hello", method = RequestMethod.GET)
public String sayHello() {
return "Hello Spring Boot!";
}
@RequestMapping(value = "/test", method = RequestMethod.GET)
public ModelAndView testDemo() {
// 跟templates文件夾下的test.html名字同樣，返回這個界面
return new ModelAndView("test");
}
@RequestMapping(value = "/demo", method = RequestMethod.GET)
public ModelAndView demo() {
// 跟templates文件夾下的demo.html名字同樣，返回這個界面
return new ModelAndView("demo");
}
}
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'));
// 指定圖表的配置項和數據
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'));
// 指定圖表的配置項和數據
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>
運行項目
一、測試
二、查看 test 頁面
三、查看 demo 頁面java