django Echarts画柱状推移图

1. 首先确定要画什么样的图,在Echarts官网找好案例

2.根据图确认需要准备的数据,从后台准备数据传递给模板

3.模板渲染,使用Echarts组件功能完成自己想要的内容

中间遇到几个坑:

1. by月份统计客户来访次数,数据库中存入的是Date格式,如何转换月份? XXX.strftime("%Y") 这样就可以以单独获取年月日

2.如何从数据库中By月份拿数据? 参考下面这一句,先mapping年,再来是月,再来是你想要做的事

models.VisitCusInfo.objects.filter(auditDate__year=row[0:4],auditDate__month=row[5:7],visitCompany__companyName=com).values("visitCompany__companyName").count()

3.后台写好数据传入前台js时报错,是因为模板渲染了,需要加入 { { |safe }}

OK,先看结果:

后台代码,里面有很详细的注释:

from django.shortcuts import render,HttpResponse
from app1 import models
from datetime import datetime,date,timedelta

def columnsChart(request):
    #统计所有来访公司来
### 实现 DjangoECharts柱状 为了在 Django 项目中集成 ECharts 并创建柱状,需遵循以下结构: #### 设置 URL 路由 定义 `urls.py` 文件中的路由配置来指向处理表请求的视函数。 ```python urlpatterns = [ path("book_chart/", views.book_chart, name="book_chart"), path("chart_data/", views.chart_data, name="chart_data") # 提供数据接口给前端调用[^1] ] ``` #### 构建视逻辑 编写 `views.py` 来准备返回 HTML 页面以及 JSON 数据。HTML 页面用于展示 ECharts 表容器;JSON API 则负责向 JavaScript 发送实际绘所需的数据集。 ```python from django.http import JsonResponse import json def book_chart(request): """渲染包含 ECharts 容器的页面""" context = {'title': '书销售统计'} return render(request, 'charts/book_chart.html', context) def chart_data(request): """为 ECharts 提供数据源""" data = { "categories": ["一月", "二月", "三月"], "data": [820, 932, 901], } return JsonResponse(data) ``` #### 准备模板文件 创建名为 `book_chart.html` 的模板文件,在此文件内引入必要的 CSS/JS 库并设置好 DOM 结构以便放置表实例。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的 dom,初始化 echarts 实例 var myChart = echarts.init(document.getElementById('main')); fetch('/chart_data/') .then(response => response.json()) .then(function (result) { var option = { xAxis: { type: 'category', data: result.categories, }, yAxis: { type: 'value' }, series: [{ data: result.data, type: 'bar' // 指定表类型为柱状 }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); }); </script> </body> </html> ``` 通过上述代码片段展示了如何利用 Python 后端框架 Django 加载来自服务器端的数据到客户端浏览器,并借助强大的 JavaScript 绘ECharts 渲染出美观易读的柱状效果[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值