<script type="text/javascript" src="/js/highcharts/highcharts.js"></script>
<script type="text/javascript">
    $(function() {
        $('#score_chart').highcharts({
            chart: {type: 'column'},
            title: {text: '网页性能分数分布图'},
            subtitle: {
                text: '移动端平均分:<?php echo $score_data->m_avg; ?>  |  桌面端平均分:<?php echo $score_data->d_avg; ?>  总页面数:<?php echo $score_data->page_count; ?>'
            },
            xAxis: {
                categories: [
                    '60分以下',
                    '60-69分',
                    '70-79分',
                    '80-85分',
                    '86-89分',
                    '90-95分',
                    '96-100分'
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '网页数量'
                }
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            },
            series: [
                {name: '移动', data: [<?php echo $score_data->m60_0 . ',' . $score_data->m60_69 . ',' . $score_data->m70_79 . ',' . $score_data->m80_85 . ',' . $score_data->m86_89 . ',' . $score_data->m90_95 . ',' . $score_data->m96_100; ?>]}
                , {name: '桌面', data: [<?php echo $score_data->d60_0 . ',' . $score_data->d60_69 . ',' . $score_data->d70_79 . ',' . $score_data->d80_85 . ',' . $score_data->d86_89 . ',' . $score_data->d90_95 . ',' . $score_data->d96_100; ?>]}
            ]
        });

    });

</script> 

<div id="score_chart" ></div>

<legend>根据分数搜索页面</legend>
<form class="form-inline" method="post" name="form_score_search" id="form_score_search" action="<?php echo site_url('apps/pagespeed/index/search_score'); ?>">
    <div class="form-group">
        <label for="exampleInputEmail1"></label>
        <input type="number" class="form-control" id="start_score" name="start_score" placeholder="开始分数">
        <input type="number" class="form-control" id="end_score" name="end_score" placeholder="结束分数">
        <select class="form-control" name="device">
            <option value="moblie">Mobile</option>
            <option value="desktop">Desktop</option>
        </select>
    </div>
    <button type="button" class="btn btn-default" onclick="submit_search();">搜索</button>
</form>

<div id="search_result_box"></div>

<script type="text/javascript">

    function submit_search() {
        $('#form_score_search').ajaxSubmit({
            success: function(data, textStatus) {
                $('#search_result_box').html(data);
            },
            error: function(msg) {
                alert('\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC...');
            },
            dataType: 'json',
            timeout: 30000
        });
        return false;
    }

</script>