SSM框架+echarts实现可视化
SSM框架+echarts实现可视化
- 一、前言
- Echarts简介
-
- 1.编写前台页面html
- 2.编写dao,service层代码
- 3.编写controller层代码
一、前言
纯属个人笔记，仅供参考！！！！
ssm框架的搭建在这里就不详细搭建了，百度上有很多，这个功能在SSM框架搭建好的前提下操作。
个人搭建的：SSM框架
因为本人记性不太好的原因，把自己写出来的东西做个整理和记录方便下次忘记的时候可以看看，有写的不好，或需要优化的欢迎指导，谢谢。
Echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
1.编写前台页面html
1.1饼图页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<!-- 引入echarts.min.js和jquery.js -->
<script type="text/javascript" src="resources/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id=mainChart style="width: 800px; height: 650px;"></div>
<a href="index.html"><button style="margin-left: 400px;" type="button">返回首页</button></a>
<script type="text/javascript">
//地区饼状统计图
//封装成函数方法，也可以不封装
function loadChart() {
alert("加载中。。。")
//初始化echarts
var mainChart = echarts.init(document.getElementById("mainChart"));
//设置属性
mainChart.setOption({
//color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
title : {
text : '书籍种类统计',
subtext : '内部信息',
left : 'center'
},
tooltip : {
trigger : 'item',
formatter : '{a}
{b} : {c} ({d}%)'
},
legend : {
orient : 'vertical',
left : 'left',
data : []//获取数据库的书籍
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'center',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : '访问来源',
type : 'pie',
radius : '55%', //设置环形的空间大小
center : [ '50%', '60%' ],
data : [],
itemStyle : {
normal : {
label : {
show : true
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
}
} ]
});
mainChart.showLoading();//数据加载完之前先显示一段简单的loading动画
var names=[];//表示每个饼图的名字，即书籍种类名
var values = [];//表示每个饼状图，即每个书籍种类的统计结果
$.ajax({
//异步请求数据
url:"../xiang/bingzhuang",//请求路径，即控制层的路径
type:'post',
dataType:'json',//返回的数据形式为json
success:function(data){
//请求成功时执行该函数内容，data即为服务器返回的json对象
$.each(data,function(index,item){
names.push(item.name);//挨个取出书籍种类名并填入names数组中，name是控制台获取到的
values.push({
//挨个取出书籍种类名并填入values数组中，value是控制台返回的数据结构的
value:item.value, //[{name:value},...{}]
name:item.name
});
});
mainChart.hideLoading(); //隐藏加载动画
mainChart.setOption({
//加载数据图表
legend:{
data:names
},
series:[{
data:values
}]
});
},
error:function(errorMsg){
//请求失败时执行该函数
alert("图表请求数据失败!"+errorMsg);
mainChart.hideLoading();
}
});
};
//调用函数方法
loadChart();
</script>
</body>
</html>
1.2条形页面
<!-- 引入echarts.min.js和jquery.js -->
*****此处省略重复步骤*********
function zhuzhuang() {
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("container"));
// 显示标题，图例和空的坐标轴
myChart.setOption({
color : [ '#3398DB' ],
title : {
text : '各个书籍总销量统计',
tooltip : {
trigger : 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
}
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
tooltip : {
trigger : 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category',
data : [], //X轴要显示的数据，后台传入数组 'java', 'sql', '其他', '军事', '名著', '小说'
axisLabel : {
show : true,
textStyle : {
color : '#555555', //颜色、字体
fontSize : '15'
},
interval : 0, //坐标轴刻度标签的相关设置。
rotate : "45"
},
axisLine : {
lineStyle : {
color : '#555555' //更改坐标轴颜色
}
},
axisTick : {
alignWithLabel : true
}
} ],
yAxis : [ {
//show : false, y轴是否显示
type : 'value'
} ],
series : [ {
name : '销量数',
type : 'bar',
barWidth : '60%',
data : [],//Y轴要显示的数据，后台传入数组 1038, 1700, 300, 830, 1160, 7200
itemStyle : {
normal : {
label : {
show : true, //开启显示
position : 'top', //在上方显示
textStyle : {
//数值样式
color : '#555555',
fontSize : '15'
}
}
}
}
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = [];//类别数组（实际用来盛放x轴坐标的值）
var values = []; //销量数组 （实际用来盛放y轴坐标的值）
//使用异步（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
$.ajax({
type : "post",
url : "../xiang/zhuzhuang",//请求数据的地址
dataType : "json", //返回数据形式为json
success : function(data) {
//后台传的数据 [{"name":"java","value":1038},{"name":"sql","value":1700}]
if (data === '') {
alert("加载失败");
} else {
alert("加载成功");
//请求成功时执行该函数内容，result即为服务器返回的json对象
for (var i = 0; i < data.length; i++) {
names.push(data[i].name);//挨个取出类别并填入类别数组
}
for (var i = 0; i < data.length; i++) {
values.push(data[i].value);//挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
//加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '销量',
data : values
} ]
});
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
//请求的失败的返回的方法
alert("出异常了");
}
});
};
//调用函数方法
zhuzhuang();
1.3折线页面因为折线和条形接收的数据结构一样此处不再重复编写
2.编写dao,service层代码
***dao层*****
// 查询书籍种类饼状图 页面接收的值是[{name:value},{}]
List<Map<String, Object>> bingxing();
// 查询书籍销量柱状图
List<Map<String, Object>> zhexian();
// 查询书籍折线图
List<Map<String, Object>> zhuzhuang();
***查询语句*****
<!-- 饼状图 -->
<select id="bingxing" parameterType="map" resultType="map">
select
bkind as name,count(1) as value from books group by bkind
</select>
<!-- 条形图 -->
<select id="zhexian" parameterType="map" resultType="map">
select
bkind
as name,sum(QUANITITY) as value from books group by bkind;
</select>
<!-- 折线图 -->
<select id="zhuzhuang" parameterType="map" resultType="map">
select
bkind as name,sum(PRICE) as value from books group by bkind;
</select>
****service层*****
和dao层类似
3.编写controller层代码
import com.wcx.service.UserService;
import net.sf.json.JSONArray;
/**
* @author xiang
* @versioon 2019年11月30日 上午10:00:46
* @RequestMapping return返回值是默认解析为跳转路径
* @ResponseBody 将java对象转为json格式的数据。若没有这个转化的话，在前台得到的是Object对象
* 在@RequestMapping下添加@ResponseBody注解后不会解析成跳转地址，会解析成相应的json格式的对象、集合字符串或xml等直接返回给前台
* 可通过ajax的success：function(data){} data直接获取
* @RequestParam 常用来处理简单类型的绑定 value 前端传过来的参数名 必传参数
**/
@Controller("userController")
@RequestMapping("xiang") // 加这个相当于访问路径又加了一层: /xiang/login
public class UserController {
@Autowired
UserService userservice;
// 获取饼状图数据
@RequestMapping(value = "/bingzhuang", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String bingzhuang() {
// 取得数据库的数据，使用list
List<Map<String, Object>> list_map = userservice.bingxing();
JSONArray json_data = JSONArray.fromObject(list_map);// 转换为json数据格式
String data = json_data.toString();
return data;
}
// 获取条形图数据
@RequestMapping(value = "/zhuzhuang", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String zhexian() {
// 取得数据库的数据，使用list方式存储，因为折线图接收的数据结构是list的[1,2,...,]
List<Map<String, Object>> list_map = userservice.zhexian();
JSONArray json_data = JSONArray.fromObject(list_map);// 转换为json数据格式
String data = json_data.toString();
return data;
}
// 获取折线数据
@RequestMapping(value = "/zhexian", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String zhuzhuang() {
// 取得数据库的数据，使用list方式存储，因为折线图接收的数据结构是list的[1,2,...,]
List<Map<String, Object>> list_map = userservice.zhuzhuang();
JSONArray json_data = JSONArray.fromObject(list_map);// 转换为json数据格式
String data = json_data.toString();
return data;
}
}