查詢班級(jí)表數(shù)據(jù)，利用ECharts繪制各班人數(shù)柱形圖。

（一）班級(jí)數(shù)據(jù)

（二）運(yùn)行效果

（一）創(chuàng)建數(shù)據(jù)庫(kù)與表

1、創(chuàng)建數(shù)據(jù)庫(kù) - test

create database test;

2、創(chuàng)建數(shù)據(jù)表 - t_class 創(chuàng)建表結(jié)構(gòu)

CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci 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 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

插入表記錄

INSERT INTO `t_class` VALUES (1, ’19軟件1班’, 26, 18);INSERT INTO `t_class` VALUES (2, ’19軟件2班’, 17, 20);INSERT INTO `t_class` VALUES (3, ’19大數(shù)據(jù)1班’, 24, 30);INSERT INTO `t_class` VALUES (4, ’19計(jì)應(yīng)1班’, 21, 24);

查看表記錄

（二）創(chuàng)建Spring Boot項(xiàng)目 - EChartsDemo

（三）創(chuàng)建班級(jí)實(shí)體類 - Clazz

package net.hw.echarts.bean;/** * 功能：班級(jí)實(shí)體類 * 作者：華衛(wèi) * 日期：2021年06月04日 */public class Clazz { private int id; private String clazz; private int boys; private int girls; public int getId() {return id; } public void setId(int id) {this.id = id; } public String getClazz() {return clazz; } public void setClazz(String clazz) {this.clazz = clazz; } public int getBoys() {return boys; } public void setBoys(int boys) {this.boys = boys; } public int getGirls() {return girls; } public void setGirls(int girls) {this.girls = girls; } @Override public String toString() {return 'Clazz{' +'id=' + id +', clazz=’' + clazz + ’’’ +', boys=' + boys +', girls=' + girls +’}’; }}

（四）創(chuàng)建班級(jí)映射器接口 - ClazzMapper

package net.hw.echarts.mapper;import net.hw.echarts.bean.Clazz;import org.apache.ibatis.annotations.Mapper;import java.util.List;/** * 功能：班級(jí)映射器接口 * 作者：華衛(wèi) * 日期：2021年06月04日 */@Mapperpublic interface ClazzMapper { List<Clazz> findAll();}

（五）創(chuàng)建班級(jí)映射器配置文件 - ClazzMapper.xml

<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE mapperPUBLIC '-//mybatis.org//DTD Mapper 3.0//EN''http://mybatis.org/dtd/mybatis-3-mapper.dtd'><mapper namespace='net.hw.echarts.mapper.ClazzMapper'> <!--定義結(jié)果映射，因?yàn)楸碜侄蚊c實(shí)體屬性名不完全一致--> <resultMap type='net.hw.echarts.bean.Clazz'><result property='id' column='id'/><result property='clazz' column='class'/><result property='boys' column='boys'/><result property='girls' column='girls'/> </resultMap> <select resultMap='clazzMap'>SELECT * FROM t_class; </select></mapper>

（六）創(chuàng)建班級(jí)服務(wù)類 - ClazzService

package net.hw.echarts.service;import net.hw.echarts.bean.Clazz;import net.hw.echarts.mapper.ClazzMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;/** * 功能：班級(jí)服務(wù)類 * 作者：華衛(wèi) * 日期：2021年06月04日 */@Servicepublic class ClazzService { @Autowired(required = false) private ClazzMapper clazzMapper; public List<Clazz> findAll() {return clazzMapper.findAll(); }}

（七）創(chuàng)建班級(jí)控制器 - ClazzController

package net.hw.echarts.controller;import net.hw.echarts.bean.Clazz;import net.hw.echarts.service.ClazzService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;/** * 功能：班級(jí)控制器 * 作者：華衛(wèi) * 日期：2021年06月04日 */@Controllerpublic class ClazzController { @Autowired private ClazzService clazzService; @GetMapping('/index') public String index() {return 'index'; } @RequestMapping(value = '/getAll', produces = 'application/json; charset=utf-8') @ResponseBody public List<Clazz> getAll() {List<Clazz> clazzes = clazzService.findAll();return clazzes; }}

（八）在項(xiàng)目里添加ECharts和jQuery 在static里創(chuàng)建js目錄，添加echarts.min.js與jquery.min.js

（九）在pom.xml文件里添加Druid依賴

<dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.6</version></dependency>

（十）配置數(shù)據(jù)源與MyBatis 將application.properties更名為application.yaml

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8 username: root password: root type: com.alibaba.druid.pool.DruidDataSource druid: initial-size: 20 max-active: 100 min-idle: 10mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: net.hw.echarts.bean

（十一）創(chuàng)建顯示可視化數(shù)據(jù)的頁(yè)面 - index.html

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>19級(jí)各班人數(shù)柱狀圖</title> <script src='http://m.b3g6.com/bcjs/js/jquery.min.js'></script> <script src='http://m.b3g6.com/bcjs/js/echarts.min.js'></script> <style>.box { width: 600px; height: 400px; border: 1px solid cornflowerblue;} </style></head><body><input type='button' value='顯示柱狀圖' /><hr/><div class='box'></div><script> // 獲取box元素 var box = document.getElementsByClassName('box')[0]; // 獲取btnShowBar元素 var btnShowBar = document.getElementsByClassName('btnShowBar')[0]; // 定義按鈕單擊事件 btnShowBar.onclick = function () {// 獲取后臺(tái)返回的JSON數(shù)據(jù)$.get(’/getAll’, function (data) { // 定義三個(gè)數(shù)組 class_list = []; boy_list = []; girl_list = []; // 將json數(shù)據(jù)寫入數(shù)組 for (var i = 0; i < data.length; i++) {class_list.push(data[i].clazz);boy_list.push(data[i].boys);girl_list.push(data[i].girls); } // 1. 初始化ECharts var my_box = echarts.init(box); // 2. 進(jìn)行參數(shù)配置 var option = {// 標(biāo)題title: { text: '19級(jí)各班人數(shù)條形圖', x: 'center', y: 'top', textAlign: 'left', textStyle: {fontFamily: '楷體',fontSize: 35,textStyle: 'bold' }},// 圖例legend: { left: 'right', orient: 'vertical'},// x軸數(shù)據(jù)xAxis: { data: class_list},// y軸數(shù)據(jù)yAxis: {},// 數(shù)據(jù)信息series: [ {name: '男生人數(shù)',type: 'bar',data: boy_list,itemStyle: { normal: {color: ’#0000aa’ }} }, {name: '女生人數(shù)',type: 'bar',data: girl_list,itemStyle: { normal: {color: ’#aa0000’ }} }] } // 3. 可視化呈現(xiàn) my_box.setOption(option);}); }</script></body></html>

（十二）啟動(dòng)應(yīng)用，查看結(jié)果 啟動(dòng)應(yīng)用

訪問(wèn)http://localhost:8080/index

單擊【顯示柱狀圖】按鈕

到此這篇關(guān)于SpringBoot+ECharts是如何實(shí)現(xiàn)數(shù)據(jù)可視化的的文章就介紹到這了,更多相關(guān)SpringBoot可視化數(shù)據(jù)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！