django使用echarts柱状图
时间: 2024-12-29 22:22:05 浏览: 56
### 实现 Django 和 ECharts 的柱状图
为了在 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]。
阅读全文
相关推荐


















