一、开发环境
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">
<!-- <resultMap id="BaseResultMap" type="com.example.echart3.entity.Echarts">
<result column="name" jdbcType="VARCHAR" property="name" />
<result column="num" jdbcType="INTEGER" property="num" />
</resultMap>-->
<!--查询所有用户-->
<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" >
<!--xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"-->
<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>
<script type="text/javascript">
//初始化ehcharts实例
var lineChart = echarts.init(document.getElementById("lineEcharts"));
//数据加载完之前先显示一段简单的loading动画
lineChart.showLoading();
//指定图表的配置项和数据
var names = []; //类别数组(实际放x轴坐标值)
var nums = []; //销量数组(Y坐标值)
//var datatemp = [];
$.ajax({//ajax异步数据交互,json格式互相传递数据,json是js对像的文本字符串,对象键值存在 字符串方式 可能需要进行eval解析json字符串
type:"post",//type:标明是get还是post请求
url:"/getdata",//url:请求后台的url
// data: {},
// contentType: 'application/json',//contentType: 前端的参数格式
//这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded; charset=UTF-8在实际开发中,经常会改成如上的application/json
dataType:"json",//dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定
async:false,//异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
success: function (result) {
for (var i = 0; i < result.length; i++){
names.push(result[i].name);
nums.push(result[i].num);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.readyState);//当数据请求失败可以查看请求的状态
}
});
lineChart.hideLoading();//隐藏加载动画
var option={
title: {
text: '折线图',
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
legend: {
data: ['数量']
},
tooltip:{},
//x轴
xAxis: {
type: 'category',
boundaryGap: false,
data: names
},
//y轴没有显式设置,根据值自动生成y轴
yAxis: {
type: 'value'
},
//数据-data是最终要显示的数据
series: [{
name: '数量',
type: 'line',
data: nums
}]
};
lineChart.setOption(option);
//饼图
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'));
var Name = [];
var num = [];
//AJAX接收数据主体
$.ajax({
type:"POST",
url:"/getdata",
dataType:"json",
async:false,
success:function (result) {
for (var i = 0; i < result.length; i++){
Name.push(result[i].name);
num.push(result[i].num);
}
},
error :function(errorMsg) {
alert("获取后台数据失败!");
}
});
// 指定图表的配置项和数据
var option = {
title: {
text: '水果分布'
},
tooltip: {},
legend: {
data:['数量']
},
xAxis: {
//结合
data: Name
},
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博客