编写一个django后台数据使用echarts在前台显示柱状图的例子
时间: 2024-06-09 13:10:39 浏览: 162
可以参考以下步骤:
1. 安装 Django 和 echarts
```bash
pip install Django
pip install echarts-python
```
2. 创建 Django 项目和应用
```bash
django-admin startproject echarts_demo
cd echarts_demo
python manage.py startapp charts
```
3. 在 `settings.py` 中添加应用和静态文件路径
```python
INSTALLED_APPS = [
...
'charts',
]
...
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
```
4. 在 `charts/views.py` 中编写视图函数
```python
from django.shortcuts import render
from echarts import Echart, Bar, Legend, Axis
def bar_chart(request):
data = [
['A', 10],
['B', 20],
['C', 30],
['D', 40],
['E', 50],
]
chart = Echart('Bar Chart', 'Test')
chart.use(Bar('test', [v[1] for v in data]))
chart.use(Legend(['test']))
chart.use(Axis('category', 'bottom', data=[v[0] for v in data]))
return render(request, 'charts/bar.html', {'chart': chart})
```
5. 在 `charts/urls.py` 中添加 URL 路由
```python
from django.urls import path
from . import views
urlpatterns = [
path('bar/', views.bar_chart, name='bar_chart'),
]
```
6. 在 `templates/charts/bar.html` 中编写 HTML 模板
```html
{% extends 'base.html' %}
{% block content %}
<div id="chart" style="width: 800px; height: 600px;"></div>
{% endblock %}
{% block script %}
<script src="{% static 'echarts.min.js' %}"></script>
<script>
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({{ chart.json }});
</script>
{% endblock %}
```
7. 在 `static/echarts.min.js` 中添加 echarts 的静态文件
可以从 echarts 的官网下载最新版的 echarts.min.js 文件,也可以使用以下命令下载:
```bash
wget https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js -P static/
```
8. 运行 Django 项目
```bash
python manage.py runserver
```
9. 在浏览器中访问 `http://127.0.0.1:8000/charts/bar/`,将会显示一个柱状图。
注意:以上代码仅为示例,实际应用中需要根据具体需求进行修改。
阅读全文