VisibleLoadMonitor/test.html at master · didi909/VisibleLoadMonitor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
    <head>
        <!-- 引入 echarts.js -->
        <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>
        <!-- 引入jquery.js -->
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 1200px;height:700px;"></div>
    </body>
    <script type="text/javascript">
        var a = echarts;
        var myChart = a.init(document.getElementById('main'));
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '爬虫今日抓取数据图\n黄文钊测试'  ,
                 padding: '10'
             },
             tooltip : {
//                 数据项触发类型，效果是在坐标上显示数量
            trigger: 'axis'
            },
            legend: {
                data:['今日数据']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    // restore : {show: true},
                    // saveAsImage : {show: true}
                }
            },
            calculable : true,

             xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : []
                }
            ],
             yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value}'
                    }
                }
            ],
             series : [
                {
                    name:'最多数量',
                    type:'line',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },]
         });


//         setInterval(function () {
             myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
             var names=[];    //名称数组（实际用来盛放X轴坐标值）
             var nums=[];    //数量数组（实际用来盛放Y坐标值）
             $.ajax({
                 type: "get",
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                 url: "http://127.0.0.1:5000/echarts",    //请求发送到Servlet处
//       data : {},
                 dataType: "json",        //返回数据形式为json
                 success: function (result) {
                     //请求成功时执行该函数内容，result即为服务器返回的json对象
                     if (result) {
//              alert(result["data"]);
                         for (var i = 0; i < result["data"].length; i++) {
//                      alert(result["data"][i]["name"]);
                             names.push(result["data"][i]["name"]);    //挨个取出名称并填入类别数组
                         }
                         for (var i = 0; i < result["data"].length; i++) {
//                      alert(result["data"][i]["num"]);
                             nums.push(result["data"][i]["num"]);    //挨个取出数量并填入销量数组
                         }
                         myChart.hideLoading();    //隐藏加载动画
                         myChart.setOption({        //加载数据图表
                             xAxis: {
                                 data: names
                             },
                             series: [{
                                 // 根据名字对应到相应的系列
                                 name: '数量',
                                 data: nums
                             }]
                         });

                     }

                 },
                 error: function (errorMsg) {
                     //请求失败时执行该函数
                     alert("图表请求数据失败!");
                     myChart.hideLoading();
                 }
             })
//         },2000)
    </script>
</html>