Today’s sharing started, please give us more advice ~

I. Project requirements

Visualize the ratio of boys to girls

Visualize the percentage of people who failed to report

Visualize the proportion of students in each college

Visualize the proportion of male and female students in each college

Visualize the proportion of students

Two, implementation steps

(1) Install plug-ins

1. Lombok plug-in

MyBatisX plugin

(2) Prepare the database

1, download the database script -lzy_student.sql

Create database -lzy_student

3. Run the database script

4. View data table records

Create a Spring Boot project – WelcomeFreshmenECharts

Add Lombok and Druid dependencies to the pom.xml file

(4) Create entity class

In order to better solve the problem, the entity class is divided into two types: one is for the database entity class, entity attributes and table fields completely one-to-one correspondence; One is the entity class for business requirements. In addition to the entity attributes corresponding to the table fields, new attributes can be added according to business requirements. There is even no corresponding attributes to the table fields, but all the entity attributes are set according to business requirements.

1. Entity classes for databases

(1) Create Student entity class – Student

Create the bean subpackage in the net.hw.echarts package and create the Student class in the subpackage

@data, @Allargsconstructor, and @noargsconstructor are Lombok annotations for generating getters, setters, full-parameter constructors, and no-parameter constructors

To improve sexual data access performance, the use of a level 2 cache in the mapper configuration file requires that the entity class be serialized, so the Serializable interface is implemented

2. Create entity classes for business requirements

(1) Create student business entity class StudentBiz

Create the biz subpackage in net.hw.echarts and create the StudentBiz class in the subpackage

As you can see, the Student business entity StudentBiz has only one more count attribute than the Student entity Student.

Create the data business entity class DataBiz

JSON data returned to the foreground by background control in the following format: {MSG: “Succeeded “, status: “200”, data: [{name:” male “, value: 300}, {name: “female “, value: 240]}

Create the DataBiz class in the net.hw.echarts.biz package

(3) Create a mapping business entity class – MapBiz

Look at the ECharts pie chart data source format. Each map in the list has two keys: name and value

Create the MapBiz class in the net.hw.echarts.biz package

(5) Create student mapper interface

Create a mapper subpackage in the net.hw.echarts package and create a StudentMapper interface in the subpackage

Configure the application properties file -application.properties

Rename application.properties to Application.yml

Studentmapper.xml; studentmapper.xml; studentmapper.xml

Create a mapper subdirectory in the resources directory and create studentmapper.xml in the subdirectory

StudentService = StudentService

Create the service subpackage in net.hw.echarts and create the StudentService class in the subpackage

(9) Add script static resources

1. Download script resources

(1) China. Js

(2) echarts. Min. Js

(3) the jquery. Min. Js

2. Place the script resources in the static directory

(10) Create a controller

1. Create DataController – DataController

(1) Obtain information on the number of students by gender

Create the getByGender() method

Start the application and test the results

Go to http://localhost:8080/data/getByGender

(2) Obtain information on the number of students by gender

Create the getBySchoolGender() method

Restart the application, visit http://localhost:8080/data/getBySchoolGender

(3) The number of students can be obtained according to whether they register or not

Create the getBySign() method

Restart the application, visit http://localhost:8080/data/getBySign

(4) Obtain the number of students according to the college registration information

Create the getBySchoolSign() method

Restart the application, visit http://localhost:8080/data/getBySchoolSign

(5) Obtain the number of students according to the source of students

Create the getByProvince() method

Restart the application, visit http://localhost:8080/data/getByProvince

2. Create ViewController – ViewController

(11) Create visual pages

1. Visualize the number of students by gender

Create the gender.html page

Restart the application, visit http://localhost:8080/view/getByGender

2. Visualize the number of students by gender

Create the school_gender.html page

Restart the application, visit http://localhost:8080/view/getBySchoolGender

3. Visualize the number of students according to whether they register or not

Create the sign.html page

Restart the application, visit http://localhost:8080/view/getBySign

4. Visualized number of registered and unregistered students by school

Create the school_sign.html page

Restart the application, visit http://localhost:8080/view/getBySchoolSign

5. Visualize the number of students according to their source

Create the provincial.html page

Restart the application, visit http://localhost:8080/view/getByProvince

Today’s share has ended, please forgive and give advice!