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

1. Present tasks

Query class table data, using ECharts to draw the number of each class bar chart.

(I) Class data

(2) Operation effect

Two, implementation steps

(1) create database and table

Create database -test

create database test;

Create table t_class

Create table structure

Insert table record

INSERT INTO T_class VALUES (1, ‘1 ‘, 26, 18);

INSERT INTO T_class VALUES (2, ’20 ‘, 17, 20);

INSERT INTO T_class VALUES (3, ’30 ‘, 24, 30);

INSERT INTO T_class VALUES (4, ‘1 ‘, 21, 24);

View table records

(2) Create Spring Boot project – EChartsDemo

(3) create class entity class Clazz

(4) Create class mapper interface – ClazzMapper

(5) Create class mapper configuration file – clazzmapper.xml

(6) Create class service – ClazzService

Create class controller – ClazzController

Add ECharts and jQuery to your project

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

Add Druid dependencies to pom. XML file

(X) Configure data source and MyBatis

Rename application.properties to Application.yaml

(11) Create a page to display visual data – index.html

(12) Start the application and view the result

Start the application

Go to http://localhost:80XX/index

Click the “Show Bar Chart” button

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