共计 4013 个字符，预计需要花费 11 分钟才能阅读完成。
SpringBoot 整合 Echarts 绘制柱状图、饼图
Idea 创立 SpringBoot 我的项目
一路狂奔到新我的项目窗口
下载 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 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=/chartcontroller
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>运行我的项目
1、测试
2、查看 test 页面
3、查看 demo 页面
源码参考
springboot_echarts
正文完
