Spring Boot使用EChars进行简单的图标统计

小咪咪 2021-09-18 16:28 322阅读 0赞

### Spring Boot使用EChars进行简单的图标统计 ###

*  简介
 *   *  对应实体domain
     *  对应DAO层处理
     *  sysExController控制层代码展示
     *  EChars页面展示(EasyUI:sysEx.ftl)

# 简介 #

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>