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

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

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

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

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

函数代码

@panel.route('/newscount', methods=['POST','GET'])
def newsCount():
    #今日开始时间
    today = time.strftime('%Y%m%d')
    today = time.strptime(today, "%Y%m%d")
    today = int(time.mktime(today))

    client = MongoClient(host=getServerIp(), port=getMongoPort())
    db = client[getMongoDbName()]
    coll = db['man']
    i = 0
    #时间戳列表
    timelist = []
    while i < 15:
        timelist.append(today)
        today = today - 86400
        i = i + 1

    #反转时间戳列表
    timelist = list(reversed(timelist))
    #时间列表
    timestrlist = []
    #每日数据总计列表
    newscount = []
    for i in timelist:
        timearray = time.localtime(int(i))
        #时间戳转字串
        result = time.strftime("%m-%d", timearray)
        #今天结束时间
        max_time = i + 86400
        #今天添加统计
        result1 = coll.find({ "timestamp":{"$gte":i, "$lt":max_time} }).count()
        #时间列表压入列表
        timestrlist.append(result)
       	#每日数据统计压入列表
        newscount.append(result1)

    #echarts柱形图配置
    option = {
        'title': {
            'subtext': '最近%d天更新情况' % len(timestrlist)
        },
        'color': ['#3398DB'],
        'tooltip' : {
            'trigger': 'axis',
            'axisPointer' : {
                'type' : 'shadow'
            }
        },
        'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': 'true'
        },
        'xAxis' : [
            {
                'type' : 'category',
                'data' : timestrlist,
                'axisTick': {
                    'alignWithLabel': 'true'
                }
            }
        ],
        'yAxis' : [
            {
                'type' : 'value'
            }
        ],
        'series' : [
            {
                'name':'添加数据总数',
                'type':'bar',
                'barWidth': '60%',
                'data': newscount
            }
        ]
    }
    return jsonify(option)

前端代码如下

{% include 'public/header.html' %}
<div class="layui-warp">
    <div class="layui-curve">
        <div class="layui-card">
            <div class="layui-card-header">所有文章报表</div>
            <div class="layui-card-body">
                <div id="news" style="width: 100%; height:250px;"></div>
            </div>
        </div>
    </div> 
</div>
<script src="{{ url_for('static',filename='js/echarts.common.min.js') }}"></script>
<script>
layui.use(['layer', 'jquery'],function(){
    var layer = layui.layer
    ,$ = layui.jquery;
    $.ajax({
        url: '{{ url_for("panel.newsCount") }}',
        type: 'POST',
        dataType: 'json',
        success: function(json){
            //console.log(json);
            var myChart = echarts.init(document.getElementById('news'));
            myChart.setOption(json);
        }
    });
});
</script>
{% include 'public/footer.html' %}

下面是效果图

微信截图_20181016165011.jpg

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

转载注明出处:https://sulao.cn/post/558.html