ECharts使用

最新推荐文章于 2025-08-27 02:36:59 发布
原创最新推荐文章于 2025-08-27 02:36:59 发布 · 378 阅读
CC 4.0 BY-SA版权
@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" onclick="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>