SpringBoot + ECharts case demo

1. Propose a task

The back-end uses Spring Boot to query class table data, and the front-end uses ECharts to draw a column chart of the number of people in each class.

2. Complete the task

(1) Create database and table

1. Create a database

Create database-bootdb

Instruction: CREATE DATABASE bootdb;

2. Create a data table

Create table structure -t_class
CREATE TABLE t_class(
id int(11) NOT NULL AUTO_INCREMENT, class varchar(50) CHARACTER SET utf8 DEFAULT NULL, boys int(11) DEFAULT NULL, girls int(11) DEFAULT NULL, PRIMARY KEY (id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8;

Insert table records
INSERT INTO t_classVALUES (1, '20 software class 1', 26, 18);
INSERT INTO t_classVALUES (2, '20 software class 2', 17, 20);
INSERT INTO t_classVALUES (3, '20 big data 1 class', 24, 30);
INSERT INTO t_classVALUES (4, '20 should be 2 classes', 21, 24);

View class table records

(2) Create a SpringBoot project

add dependencies

(3) Create a class entity class

(4) Create a class mapper interface

(5) Create a class mapper configuration file

(6) Create a class service class

(7) Create a class controller

(8) Add ECharts and jQuery scripts

Create a js directory in static, add echarts.min.js and jquery.min.js

(9) Add Druid start-up dependencies

Add Druid's starting dependency for Spring Boot in the pom.xml file

(10) Modify the application properties file

Rename application.properties to application.yaml

(11) Create page visualization data

Create index.html in the templates directory

(12) Start the application and view the results

Start the application (port number: 8888)

Visit http://localhost:8888

Click the [Show Histogram] button