ysy01/templates/index.html

{% extends "base.html" %}
{% block title %}首页{% endblock %}\
{% block head %}
    <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>
{% endblock %}

{% block body %}
<div id="main" style="width: 900px;height:470px;"></div>

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

             }

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

{% endblock %}