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>