涉及知识点:
- echarts的简单使用
- django分页器的使用
- orm框架中的values和values_list查询,以及将quertset对象转为list对象供前端直接接受
1.前端创建echarts折线图
<!-- 定义一个div用于存放echarts图像,需要定义高度 -->
<div id="broken_line" style="width: 600px;height: 400px"></div>
<script src="/static/js/jquery3.4.1.js"></script>
<script src="/static/js/echarts-en.simple.min.js"></script>
<script>
// 初始化echarts实例
var broken_line = echarts.init(document.getElementById("broken_line"));
// 设置图表的配置项和数据
var option = {
title: {
text: '标题:余额变动',
subtext: '副标题',
x: 'center' // 设置标题水平居中
},
xAxis: {
type: 'category', // 横坐标轴类型
// 数据渲染时加上safe过滤器,不然可能会有乱码
data: {{ echarts_record_time|safe }},
name: '日期',
axisLabel: {
// x轴上显示所有的数据
interval: 0,
// x轴数据倾斜显示
rotate: 30
}
},
yAxis: {
type: 'value',
name: '余额',
min: 1500
},
series: [{
data: {{ echarts_summary|safe }},
type: 'line',
// 设置每个折点显示数值
itemStyle: {normal: {label: {show: true}}}
}]
};
// 选择配置项进行渲染
broken_line.setOption(option)
</script>
2.后端
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
@login_required
def index(request):
if request.method == 'POST':
form = FinanceRecordForm(request.POST)
if form.is_valid():
record = form.save(commit=False)
record.user = request.user
record.save()
return redirect(reverse('finance:index'))
else:
context = {
'form': form,
'records': FinanceRecord.get_record(request.user)
}
return render(request, 'finance_info.html', context=context)
else:
all_records = FinanceRecord.get_record(request.user)
paginator = Paginator(all_records, 5)
page = request.GET.get('page')
try:
records = paginator.get_page(page)
except PageNotAnInteger:
records = paginator.get_page(1)
except EmptyPage:
records = paginator.get_page(paginator.num_pages)
context = {
'form': FinanceRecordForm(),
'records': records
}
# values:返回的是包含字典的查询结果集(列表中嵌套字典,每一条数据就是一个字典)
# values_list:返回包含元组的查询结果集
# 当只查询一个字段时,可加上参数flat,得到的就是一个只有一层的查询结果集,不再有嵌套在内部的数据结构
# 将查询结果集通过list构造器转为列表,可在前端echarts中直接使用花括号接受数据
echarts_record_time = list(all_records.order_by('id').values_list('record_time', flat=True))
echarts_summary = list(all_records.order_by('id').values_list('summary', flat=True))
# 通过列表推导式将datetime类型的日期格式转为字符串,方便前端echarts进行展示
echarts_record_time = [i.strftime('%Y-%m-%d') for i in echarts_record_time]
context.update({
'echarts_record_time': echarts_record_time,
'echarts_summary': echarts_summary
})
return render(request, 'finance_info.html', context=context)