@Controller @RequestMapping("/****") public class MonitorController { private final static Logger LOGGER = Eslf4jLoggerFactory.getLogger(MonitorController.class); @Resource private JdCacheCloud jdCacheCloud; @RequestMapping(value = "/bar",method = RequestMethod.GET) public ModelAndView MonitorBar (){ ModelAndView modelAndView = new ModelAndView("/monitor/yujh"); return modelAndView; } @RequestMapping(value = "/query",method = RequestMethod.GET) @ResponseBody public Map<String,Object> query (String key){ Map<String, Object> map ; String[] keys = new String[10]; List<Map<String,Object>> list = new ArrayList<Map<String, Object>>(); for(int i =0;i<5;i++){ map = new HashMap<String, Object>(); //算出当前的小时的前1-5个小时内的整数小时点数 Calendar calendar = Calendar.getInstance(); calendar.set(Calendar.HOUR_OF_DAY,calendar.get(Calendar.HOUR_OF_DAY)-i); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd-HH"); //拼接keySTATISTIC-IP-2017-06-29-14-h5-PaiDaoJia keys[i] = "STATISTIC-IP-"+simpleDateFormat.format(calendar.getTime())+"-h5-PaiDaoJia"; //得到IP Set<String> set = jdCacheCloud.getCluster().zRevRange(keys[i], 0, 50); if(set == null || set.size() < 0){ continue; } Object[] setArray = set.toArray(); String[] ips = new String[set.size()]; String[] countArray = new String[ips.length]; for (int j = 0; j < set.size(); j++) { ips[j] = (String) setArray[j]; //根据ip和key查询此机器的调用次数 long count = jdCacheCloud.getCluster().zScore(keys[i], ips[j]).longValue(); LOGGER.info("STATISTIC-IP keys[" + keys[i] + "],ip[" + ips[j] + "],访问次数:" + count); countArray[j] = String.valueOf(count); } map.put("ipArray", ips); map.put("countArray", countArray); map.put("currentime",keys[i]); list.add(map); } Map<String,Object> m = new HashMap<String, Object>(); m.put("list",list); LOGGER.info("MonitorController.query()" + JsonUtils.toJson(m)); return m; } @RequestMapping(value = "/query1",method = RequestMethod.GET) @ResponseBody public Map<String,Object> query1 (String key){ Map<String, Object> map ; String[] keys = new String[10]; List<Map<String,Object>> list = new ArrayList<Map<String, Object>>(); for(int i =5;i<10;i++){ map = new HashMap<String, Object>(); //算出当前的小时的前5-10个小时内的整数小时点数 Calendar calendar = Calendar.getInstance(); calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) - i); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd-HH"); //拼接keySTATISTIC-IP-2017-06-29-14-h5-PaiDaoJia keys[i] = "STATISTIC-IP-"+simpleDateFormat.format(calendar.getTime())+"-h5-PaiDaoJia"; //得到IP Set<String> set = jdCacheCloud.getCluster().zRevRange(keys[i], 0, 50); if(set == null || set.size() < 0){ continue; } Object[] setArray = set.toArray(); String[] ips = new String[set.size()]; String[] countArray = new String[ips.length]; for (int j = 0; j < set.size(); j++) { ips[j] = (String) setArray[j]; //根据ip和key查询此机器的调用次数 long count = jdCacheCloud.getCluster().zScore(keys[i], ips[j]).longValue(); LOGGER.info("STATISTIC-IP keys[" + keys[i] + "],ip[" + ips[j] + "],访问次数:" + count); countArray[j] = String.valueOf(count); } map.put("ipArray", ips); map.put("countArray", countArray); map.put("currentime",keys[i]); list.add(map); } Map<String,Object> m = new HashMap<String, Object>(); m.put("list",list); return m; } /
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main0" style="height:600px"></div> <div id="main1" style="height:600px"></div> <div id="main2" style="height:600px"></div> <div id="main3" style="height:600px"></div> <div id="main4" style="height:600px"></div> <div id="main10" style="height:600px"></div> <div id="main11" style="height:600px"></div> <div id="main12" style="height:600px"></div> <div id="main13" style="height:600px"></div> <div id="main14" style="height:600px"></div>
##<input type="text" id="key" /> ##<input type="button" id="button" value="button" οnclick="queryList()"/> <!-- ECharts单文件引入 --> <script src="/static/scripts/dist/echarts.js"></script> <script type="text/javascript"> $(document).ready( function(){ queryList(); queryList1(); } ); function queryList(){ var key = $("#key").val(); $.ajax({ type: 'GET', dataType:'json', url: '#springUrl('')/monitor/query?key='+key, success: function (result) { // 路径配置 require.config({ paths: { echarts: '/static/scripts/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { $.each(result.list,function(i,item){ // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main'+i)); var option = { tooltip: { show: true }, legend: { data:['0000-00-00-00'] }, xAxis : [ { type : 'category', data : ["1","1","1","1","1","1"], axisLabel:{ rotate:45, interval:0 } // name:"06-28-17", // nameLocation:"end" } ], grid: { // 控制图的大小,调整下面这些值就可以, x: 40, x2: 100, y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, yAxis : [ { type : 'value' } ], series : [ { "name":"", "type":"bar", "data":[10, 10, 10, 10,90, 50] } ] }; option.series[0].data=item.countArray; option.xAxis[0].data=item.ipArray; option.series[0].name=item.currentime; option.legend.data[0] = item.currentime; // 为echarts对象加载数据 myChart.setOption(option); }); } ); }}); } function queryList1(){ var key = $("#key").val(); $.ajax({ type: 'GET', dataType:'json', url: '#springUrl('')/monitor/query1?key='+key, success: function (result) { // 路径配置 require.config({ paths: { echarts: '/static/scripts/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { $.each(result.list,function(i,item){ // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main1'+i)); var option = { tooltip: { show: true }, legend: { data:['0000-00-00-00'] }, xAxis : [ { type : 'category', data : ["1","1","1","1","1","1"], axisLabel:{ rotate:45, interval:0 } // name:"06-28-17", // nameLocation:"end" } ], grid: { // 控制图的大小,调整下面这些值就可以, x: 40, x2: 100, y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, yAxis : [ { type : 'value' } ], series : [ { "name":"", "type":"bar", "data":[10, 10, 10, 10,90, 50] } ] }; option.series[0].data=item.countArray; option.xAxis[0].data=item.ipArray; option.series[0].name=item.currentime; option.legend.data[0] = item.currentime; // 为echarts对象加载数据 myChart.setOption(option); }); } ); }}); } </script> </body>
ECharts使用
最新推荐文章于 2023-11-01 13:23:13 发布