Flask使用百度开源图标js框架echarts构建报表方法

  • 2018-10-16 16:42:43
  • 开发
  • 36
  • shevechco

以前用PHP的时候用过,现在用python开发也用了下,记录下用法,下次可以直接复制来用

下载地址:http://echarts.baidu.com/download.html

一般选择常用版本,或者完整版都可以

我用的flask框架开发的运维WEB工具,直接上代码了

函数代码

01.
@panel.route('/newscount', methods=['POST','GET'])
02.
def newsCount():
03.
    #今日开始时间
04.
    today = time.strftime('%Y%m%d')
05.
    today = time.strptime(today, "%Y%m%d")
06.
    today = int(time.mktime(today))
07.
08.
    client = MongoClient(host=getServerIp(), port=getMongoPort())
09.
    db = client[getMongoDbName()]
10.
    coll = db['man']
11.
    i = 0
12.
    #时间戳列表
13.
    timelist = []
14.
    while i < 15:
15.
        timelist.append(today)
16.
        today = today - 86400
17.
        i = i + 1
18.
19.
    #反转时间戳列表
20.
    timelist = list(reversed(timelist))
21.
    #时间列表
22.
    timestrlist = []
23.
    #每日数据总计列表
24.
    newscount = []
25.
    for i in timelist:
26.
        timearray = time.localtime(int(i))
27.
        #时间戳转字串
28.
        result = time.strftime("%m-%d", timearray)
29.
        #今天结束时间
30.
        max_time = i + 86400
31.
        #今天添加统计
32.
        result1 = coll.find({ "timestamp":{"$gte":i, "$lt":max_time} }).count()
33.
        #时间列表压入列表
34.
        timestrlist.append(result)
35.
        #每日数据统计压入列表
36.
        newscount.append(result1)
37.
38.
    #echarts柱形图配置
39.
    option = {
40.
        'title': {
41.
            'subtext': '最近%d天更新情况' % len(timestrlist)
42.
        },
43.
        'color': ['#3398DB'],
44.
        'tooltip' : {
45.
            'trigger': 'axis',
46.
            'axisPointer' : {
47.
                'type' : 'shadow'
48.
            }
49.
        },
50.
        'grid': {
51.
            'left': '3%',
52.
            'right': '4%',
53.
            'bottom': '3%',
54.
            'containLabel': 'true'
55.
        },
56.
        'xAxis' : [
57.
            {
58.
                'type' : 'category',
59.
                'data' : timestrlist,
60.
                'axisTick': {
61.
                    'alignWithLabel': 'true'
62.
                }
63.
            }
64.
        ],
65.
        'yAxis' : [
66.
            {
67.
                'type' : 'value'
68.
            }
69.
        ],
70.
        'series' : [
71.
            {
72.
                'name':'添加数据总数',
73.
                'type':'bar',
74.
                'barWidth': '60%',
75.
                'data': newscount
76.
            }
77.
        ]
78.
    }
79.
    return jsonify(option)

前端代码如下

01.
{% include 'public/header.html' %}
02.
<div class="layui-warp">
03.
    <div class="layui-curve">
04.
        <div class="layui-card">
05.
            <div class="layui-card-header">所有文章报表</div>
06.
            <div class="layui-card-body">
07.
                <div id="news" style="width: 100%; height:250px;"></div>
08.
            </div>
09.
        </div>
10.
    </div> 
11.
</div>
12.
<script src="{{ url_for('static',filename='js/echarts.common.min.js') }}"></script>
13.
<script>
14.
layui.use(['layer', 'jquery'],function(){
15.
    var layer = layui.layer
16.
    ,$ = layui.jquery;
17.
    $.ajax({
18.
        url: '{{ url_for("panel.newsCount") }}',
19.
        type: 'POST',
20.
        dataType: 'json',
21.
        success: function(json){
22.
            //console.log(json);
23.
            var myChart = echarts.init(document.getElementById('news'));
24.
            myChart.setOption(json);
25.
        }
26.
    });
27.
});
28.
</script>
29.
{% include 'public/footer.html' %}

下面是效果图

微信截图_20181016165011.jpg

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.sulao.cn/post/555

相关推荐