共计 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=/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> |
运行我的项目
1、测试
2、查看 test 页面
3、查看 demo 页面
源码参考
springboot_echarts
正文完
