SpringBoot integrates ECHARTS to draw bar chart and pie chart

IDEA Create SpringBoot project







All the way to the new project window

Download Echarts

Put the echarts.min.js file in your project.

pom.xml

<? The 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 > < the parent > < groupId > org. Springframework. Boot < / groupId > The < artifactId > spring - the 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() {// Same as the name of test.html in the templates folder, Return new ModelAndView("test"); } @RequestMapping(value = "/demo", Method = requestMethod.get) public modelAndView demo() {// The same name as the templates demo.html folder, Return new ModelAndView("demo"); }}

test.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <! --> <script SRC ="js/echarts.min.js"></script> </head> <body> <! -> <div id="main" style="width: 600px; width: 600px; height:400px; position:absolute; top:50%; left: 50%; margin-top: -200px; margin-left: -300px;" ></div> <script type="text/javascript"> // Var myChart = echarts.init(document.getElementById('main')); Var option = {title: {text: 'Echarts'}, tooltip: {}, legend: {data: [' sales ']}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]}; // Displays the chart with the configuration item and data you just specified. myChart.setOption(option); </script> </body> </html>

demo.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <! --> <script SRC ="js/echarts.min.js"></script> </head> <body> <! -> <div id="main" style="width: 600px; width: 600px; height:400px; position:absolute; top:50%; left: 50%; margin-top: -200px; margin-left: -300px;" ></div> <script type="text/javascript"> // Var myChart = echarts.init(document.getElementById('main')); Var option = {title: {text: 'Spark Streaming ', subtext: 'Spark Streaming ', x: 'center'}, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['Spark SQL ', 'Hadoop ', 'Storm ', 'Spark Streaming ', 'theory ']}, series: [{name:' number ', type: 'pie', radius: '55%' center: [' 50% ', '60%'], data: [{value: 3350, name: 'Spark SQL combat'}, {value: 3100, name: 'Hadoop basis'}, {value: 2340, name: 'Storm '}, {value: 1350, name: 'Spark Streaming '}, {value: 15480, name: 'Spark '}], ITemStyle: {emphasis: {ShadowBlur: 10, ShadowOffSetX: 0, ShadowColor: 'rgba(0, 0, 0, 0.5)'}}}}; // Displays the chart with the configuration item and data you just specified. myChart.setOption(option); </script> </body> </html>

Run the project

1, test,



2. Check the Test page



3. Check the demo page

Source reference

springboot_echarts