djang+echarts

涉及知识点：

• 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)