项目框架已经搭建完成,现需要补充内容使得项目能够成功展示可视化图像。 在右侧编辑器切换不同文件,补充每个文件 Begin-End 区间的代码,使用折线图动态展示天猫订单日销量数据情况,具体要求如下: 在 models.py 在编写代码,根据表 tmallordersum 创建数据模型。 在 views.py 中编写代码,当用户访问 http://localhost:8080/tmall 时,将数据传送到 test1.html 页面的功能。 test1.html 文件主要负责前端图表的渲染,文件中已经有一个 Echarts 模板,现在需要将后台传入的数据处理后放入模板中,可视化显示需要将订单付款日期以及订单销量传入,效果如下图2所示:
时间: 2024-03-08 09:48:54 浏览: 75
**在 models.py 中:**
```python
from django.db import models
class TmallOrder(models.Model):
payment_date = models.DateField(verbose_name='订单付款日期')
order_amount = models.IntegerField(verbose_name='订单销量')
class Meta:
db_table = 'tmallordersum'
```
**在 views.py 中:**
```python
from django.shortcuts import render
from .models import TmallOrder
def tmall(request):
orders = TmallOrder.objects.all()
payment_dates = [order.payment_date.strftime('%Y-%m-%d') for order in orders]
order_amounts = [order.order_amount for order in orders]
data = {'payment_dates': payment_dates, 'order_amounts': order_amounts}
return render(request, 'test1.html', data)
```
**在 test1.html 中:**
```html
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的 DOM,初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '天猫订单销量'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: {{ payment_dates|safe }}
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: {{ order_amounts|safe }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
其中 `payment_dates` 和 `order_amounts` 分别是从后端传递过来的数据。注意要使用 `safe` 过滤器来避免出现 XSS 攻击。
阅读全文