Echarts集装报表

<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-resource.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>
<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>
        <ul class="breadcrumb">
            <li> <i class="icon-home home-icon"></i> <a href="#">Home</a> </li>
            <li> <a href="#">Tables</a> </li>
            <li class="active">Simple &amp; Dynamic</li>
        </ul>
        <!-- .breadcrumb -->
        <div class="nav-search" id="nav-search">
            <form class="form-search">
                <span class="input-icon"> <input placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" type="text" /> <i class="icon-search nav-search-icon"></i> </span>
            </form>
        </div>
        <!-- #nav-search -->
    </div>
    <div class="page-content">
        <div class="page-header">
            <h1> Tables <small> <i class="icon-double-angle-right"></i> Static &amp; Dynamic Tables </small> </h1>
        </div>
        <!-- /.page-header -->
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>开始时间:
                                        <input type="text" class="span2" ref="start_time" id="dpd1">
                                    </th>
                                    <th>结束时间:
                                        <input type="text" class="span2" ref="end_time" id="dpd2">
                                    </th>
                                    <th>
                                        <input type="button" class="so" value="搜索">
                                    </th>
                                </tr>
                                </thead>
                            </table>
                            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th class="center"> <label> <input class="ace" type="checkbox" /> <span class="lbl"></span> </label> </th>
                                    <th>序号</th>
                                    <th>地区</th>
                                    <th class="hidden-480">人数</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /span -->
                </div>
                <!-- /row -->
                <div class="hr hr-18 dotted hr-double"></div>
                <div class="row">
                    <div class="col-xs-12">
                        <div id="main" style="margin: 0 auto;width: 600px;height:400px;"></div>
                    </div>
                </div>
                <div id="modal-table" class="modal fade" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header no-padding">
                                <div class="table-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span class="white">&times;</span> </button> Results for &quot;Latest Registered Domains
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.page-content -->
</div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title : {
            text: '星猫注册人数统计',
            subtext: '星猫统计'
        },
        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',
                name : '省份',
                boundaryGap : false,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '人数',
                axisLabel : {
                    formatter: '{value}'
                }
            }
        ],
        series : [
            {
                name:'人数',
                type:'line',
                data:[],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name : '省份',
                type : 'line',
                data : []
            }
        ]
    };

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

            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
<script src="jquery-1.11.3.min.js"></script>
<script src="foundation-datepicker.js"></script>
<script src="foundation-datepicker.zh-CN.js"></script>
<script>
    $('#demo-1').fdatepicker();
    $('#demo-2').fdatepicker({
        format: 'yyyy-mm-dd hh:ii',
        pickTime: true
    });
    $('#demo-3').fdatepicker();

    var nowTemp = new Date();
    var now = new Date(nowTemp.getDate(),nowTemp.getMonth(),nowTemp.getFullYear(), 0, 0, 0, 0);
    var checkin = $('#dpd1').fdatepicker({
        format: 'yyyy-mm-dd',

        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 1);
            checkout.update(newDate);
        }
        checkin.hide();
        $('#dpd2')[0].focus();
    }).data('datepicker');
    var checkout = $('#dpd2').fdatepicker({
        format: 'yyyy-mm-dd',

        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');
</script>

效果图就是上图，以上按钮可以进行图切换，比如折线图，柱形图，下载，刷新等一些操作。

以上只用到了

jquery-1.11.3.min.js
echarts.js

其他的js都是没有用的，可以删除掉。