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=9090server.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 */@RestControllerpublic 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