Spring Boot使用EChars进行简单的图标统计
简介
EChars,一个使用一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。(详见:EChars官网:https://echarts.baidu.com/)
对应实体domain
今天我所说的这个统计是利用创建时间对施工完成进度的统计,想要统计什么字段 就在实体中天健什么字段 ,在这里实体就不展示出来了
对应DAO层处理
@Repository
public interface BizPlanDao extends PagingAndSortingRepository<BizPlan, Long>, JpaSpecificationExecutor<BizPlan> {
public List<BizPlan> findTop10ByCreatTimeNotNull();
}
sysExController控制层代码展示
@RequestMapping("/counttime")
@ResponseBody
public List<BizPlan> countbizplanlist(HttpSession session) {
List<BizPlan> findcount = bizPlanDao.findTop10ByCreatTimeNotNull();
return findcount;
}
EChars页面展示(EasyUI:sysEx.ftl)
<div class="easyui-layout" fit="true">
<div data-options="region:'center',border:true" style="padding: 10px;overflow: hidden;" title="统计信息">
<div title="施工统计" collapsible="true" closable="false" style="height:300px;padding:5px;">
<div id="sgtj_chart" style="width: 100%;height:260px;"></div>
</div>
</div>
</div>
<script>
//初始化加载,循环每三秒获取一次信息
var myChart = echarts.init(document.getElementById('sgtj_chart'), 'light');
//加载统计图
loadSgtj(myChart);
setInterval(function () {
var option = myChart.getOption();
myChart.clear();
myChart.setOption(option);
}, 3000);
//加载统计图形
function loadSgtj(myChart)
{
var myChart = echarts.init(document.getElementById('sgtj_chart'), 'light');
//app.title = '折柱混合';
var options = {
grid: {
left: '2%',
right: '0',
bottom: '1%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter:'{b}<br />\
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#37A2DA"></span>\
{a}:{c}%<br />'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line','bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['完成度']
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '占比',
min: 0,
max: 100,
//interval: 50,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name:'工点完成度',
type:'bar',
barWidth: 50, //柱形图的宽度
data:[],
itemStyle: {
normal: {
label: {
show:true,
position:'top',
formatter: '{c} %',
textStyle: { //数值样式
color: 'black',
fontSize: 16,
}
}
}
}
}
]
};
//加载后台需要统计的数据
$.post("/system/sysEx/counttime", function(res) {
var worklist = []; //建立新的数组用于存放工点名称
var countplan = []; //建立新的数组用于存放统计数
$.each(res, function(i,data){
worklist[i] = data.workpoints;
console.log(data.creatTime);
var countnum = parseInt(data.accounted * 100);
countplan[i] = countnum;
});
options.xAxis[0].data = worklist;
options.series[0].data = countplan;
myChart.setOption(options);
});
}
</script>