master

分支 (1)

管理

管理

master

slowquery
/
top.html

<html>
<head>
    <meta charset="utf-8">
    <title>慢SQL执行时间统计图</title>
    <script src="js/echarts.common.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
		  url:"get_top_data.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].db_max);
			  //arr2.push(result[i].user_max);
                          arr2.push(result[i].top_count);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
		    title: {
			text: '一个迭代慢查询数量龙虎榜TOP排名',
		        //backgroundColor: 'FFFFFF'
		    },
                    tooltip: {
			trigger: 'axis'
                        //show: true
                    },
                    legend: {
                       data:['数量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
			    axisLabel: {
				formatter:'{value}(个)'
                            }
			}
                    ],
                    series : [
                        {
                            "name":"数量",
                            "type":"bar",
			    "smooth": "true",
                            "data": arr2,
			    stack: '数量',
			    areaStyle: {
				normal: {
				    color: '#8cd5c2' //改变区域颜色
				}
			    },
			    itemStyle : {
			    normal : {
			        color:'#8cd5c2',
			        lineStyle: {
					color: '#3300FF',
					width: 3,
			    }}}
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    </script>
</body>