Springboot+mysql+maven+echarts实现数据可视化

置顶 black0311

已于 2023-10-31 15:52:15 修改

阅读量523

点赞数

文章标签： spring boot mysql maven

于 2023-10-31 15:50:37 首次发布

本文链接：https://blog.csdn.net/black0311/article/details/134142101

版权

一、开发环境
1、idea
2、Springboot maven
3、mysql
4、mybatis druid
5、echarts

二、部分代码块
1、实体类(Echarts)

package com.example.echart3.entity;
public class Echarts {
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
private String name;
private int num;
}

2、实现接口类（EchartsServiceImpl）

package com.example.echart3.service.impl;
import com.example.echart3.entity.Echarts;
import com.example.echart3.mapper.EchartsMapper;
import com.example.echart3.service.EchartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class EchartsServiceImpl implements EchartsService {
@Autowired(required = false)
EchartsMapper echartsMapper;
@Override
public List<Echarts> findAll() {
return this.echartsMapper.findAll();
}
}

3、数据持久化Mapper接口（EchartsMapper)

package com.example.echart3.mapper;
import com.example.echart3.entity.Echarts;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface EchartsMapper {
public List<Echarts> findAll();
}

4、实现Mapper接口（EchartsMapper.xml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.echart3.mapper.EchartsMapper">


<select id="findAll" resultType="com.example.echart3.entity.Echarts">
select name,num from echarts
</select>
</mapper>

5、控制类（EchartsController)

package com.example.echart3.controller;
import java.util.List;
import com.example.echart3.entity.Echarts;
import com.example.echart3.service.EchartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class EchartsController {
@Autowired
EchartsService echartsService;
@RequestMapping("/image")
public String image(){
return "image";
}
@RequestMapping("/index")
public String index(){
**加粗样式** return "test1";
}
/**
* 查询echarts列表
*/
@RequestMapping("/getdata")
@ResponseBody需要向页面返回数据时
public List<Echarts> list()
{
List<Echarts> list = echartsService.findAll();
//获取list中第一个字段name和num
return list;
}
}

6、html页面

<!DOCTYPE html>
<html lang="zh" >

<head>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-3.4.1.js"></script>
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
.aa{
text-align: center;
background: lightblue;
color: #000000;
font-size: 28px;
}
</style>
</head>
<body>
<h1 class="aa">水果分布可视化</h1>
<div id="lineEcharts" style="width: 500px;height:400px;position:absolute;top:100px"></div>
<div id="pieEcharts" style="width: 500px;height:400px;position:absolute;top:100px;left:500px"></div>
<div id="barEcharts" style="width: 500px;height:400px;position:absolute;top:100px;left:1000px"></div>

//饼图
var pieChart = echarts.init(document.getElementById("pieEcharts"));
//数据加载完之前先显示一段简单的loading动画
pieChart.showLoading();
//指定图表的配置项和数据
var names1 = []; //类别数组（实际放x轴坐标值）
var nums1 = []; //数组（Y坐标值）
$.ajax({
type: "post",
async: false,
url: "/getdata",
dataType: "json",
success: function (result) {
for (var i = 0; i < result.length; i++) {
names1.push(result[i].name);
var obj = new Object();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.readyState);
}
});
pieChart.hideLoading();//隐藏加载动画
var option1 = {
title: {
text: '饼图',
// x: 'center'
},
//工具箱
//保存图片
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
// x: '',
data: names1
},

calculable: true,
series: [{
name: '数量',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: nums1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsextX: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
}
}]
}
pieChart.setOption(option1);

var myChart = echarts.init(document.getElementById('barEcharts'));

yAxis: {},
series: [{
name: '数量',
type: 'bar',
//结合
data: num
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

完整项目代码含数据库https://download.csdn.net/download/black0311/88488532

从这个项目作者 Springboot+mybatis+maven+echarts实现数据可视化（折线图饼图柱状图）_echarts maven-CSDN博客

black0311

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Springboot+mysql+maven+echarts实现数据可视化

/这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded;// contentType: 'application/json',//contentType: 前端的参数格式。dataType:"json",//dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定。type:"post",//type:标明是get还是post请求。url:"/getdata",//url:请求后台的url。//数组（Y坐标值）
复制链接

扫一扫