以前用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' %}下面是效果图

内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:https://sulao.cn/post/555
评论列表