<%--
  Created by IntelliJ IDEA.
  User: ZJW
  Date: 2019/7/11
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>echarts学习</title>
    <script src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echarts.js"></script>
</head>

<body>

    <div id="cpumain" style="width: 210px;height:600px;"></div>
    <button onclick="reloadCPU()">Refresh</button>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('cpumain'));
            var option = {// 指定图表的配置项和数据
                title: {
                    text: 'Performance Monite'
                },
                tooltip: {},

                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: []
                }]
            };
            myChart.setOption(option);
    reloadCPU=function(){
            var cpu = 0;
            var memory = 0;

            $.ajax({
                url:"/getCPU.action",
                type : "post",
                async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(monite) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (monite) {
                        var m = monite;
                        console.log(m.processorTime);
                        console.log(m.memoryAvailableMBytes);
                        cpu=m.processorTime;
                        memory=m.memoryAvailableMBytes;

                    }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            xAxis: {
                                data:['CPU','Memory']
                            },
                            yAxis: {
                                type : 'value',
                                min:0,
                                max:100
                            },
                            series: [{
                                name: '销量',
                                data: [cpu,memory]
                            }]
                        });
                    }
                });
        }

    </script>
</body>

</html>
