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 = 012. #时间戳列表13. timelist = []14. while i < 15:15. timelist.append(today)16. today = today - 8640017. i = i + 118. 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 + 8640031. #今天添加统计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': newscount76. }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.layer16. ,$ = 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' %}
下面是效果图
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:http://www.sulao.cn/post/555