master

分支 (1)

管理

管理

master

vote
/
show.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据查看</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.1.11.1.js"></script>
    <style>
        h1 {
            text-align: center;
        }

        #main {
            width: 800px;
            height: 300px;
            margin: 0 auto;
            padding: 0px;
        }

        .main table {
            width: 100%
        }
        #x0,#x1{width: 30px;height: 30px;display: none}
        #code{cursor: pointer;}
    </style>
</head>
<body>
<h1>车辆票数统计</h1>
<?php
include_once "nav.php";
?>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" ></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        color:["#3398DB"],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['票数']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '票数',
            type: 'bar',
            data: []
        }]
    });

    $.ajax({
        url:"getData.php",
        dataType:"JSON",
        success:function (d) {
            myChart.setOption({
                xAxis: {
                    data: d['categories']
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: d['data'],
                    barWidth: '20%'
                }]
            });
        }
    })
    /*$.get('data.json').done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: data.data
            }]
        });
    });*/
</script>
</body>
</html>