1.数据
2.java后台
/** 出库入库饼状图
*/
@Override
public Map data1() {
Map map = new HashMap<>();
WResInfo wResInfo = new WResInfo();
List wResInfoList = wResInfoMapper.selectWResInfoList(wResInfo);
//入库
List collect = wResInfoList.stream().filter(s -> s.getCtState().equals("1")).collect(Collectors.toList());
map.put(String.valueOf(collect.size()), "入库");
map.put(String.valueOf(wResInfoList.size() - collect.size()), "出库");
return map;
}
/***
* 入库柱状图
* @return
*/
@Override
public Map<String, Object> data2() {
Map<String, Object> map = new HashMap<>();
List<WResInfo> wResInfoList = wResInfoMapper.data2();
//物证名称
List<String> ctWzName = wResInfoList.stream().map(e -> e.getDictLabel()).collect(Collectors.toList());
//数量
List<String> num = wResInfoList.stream().map(e -> e.getCtOther1()).collect(Collectors.toList());
map.put("name",ctWzName );
map.put("num",num );
return map;
}
/***
* 出库柱状图
* @return
*/
@Override
public Map<String, Object> data3() {
Map<String, Object> map = new HashMap<>();
List<WResInfo> wResInfoList = wResInfoMapper.data3();
//物证名称
List<String> ctWzName = wResInfoList.stream().map(e -> e.getDictLabel()).collect(Collectors.toList());
//数量
List<String> num = wResInfoList.stream().map(e -> e.getCtOther1()).collect(Collectors.toList());
map.put("name",ctWzName );
map.put("num",num );
return map;
}
2.前台
2.1 引入echars.js
<!DOCTYPE html>
出库入库统计图
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>物证入库统计图</h5>
</div>
<div class="ibox-content no-padding">
<div class="container-div">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main2" style="height:600px"></div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
fetch(ctx + "echartswz/data2").then(res => res.json()).then(res => {
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['数量']
},
xAxis: {
data: res.data.name
},
yAxis: {},
series: [
{
name: '数量',
type: 'bar',
data: res.data.num,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option);
})
</script>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>物证出库统计图</h5>
</div>
<div class="ibox-content no-padding">
<div class="container-div">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main3" style="height:600px"></div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
fetch(ctx + "echartswz/data3").then(res => res.json()).then(res => {
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['数量']
},
xAxis: {
data: res.data.name
},
yAxis: {},
series: [
{
name: '数量',
type: 'bar',
data: res.data.num,
itemStyle: {
normal: {
color: '#a87af1'
}
},
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(option);
})
</script>
</div>
</div>
</div>
4.效果图
