在Django利用ECharts连接数据库写一个饼图并展示
时间: 2024-05-14 19:14:25 浏览: 239
首先,需要安装ECharts库和Django。
1. 安装ECharts
可以通过以下命令安装ECharts:
```bash
npm install echarts --save
```
2. 安装Django
可以通过以下命令安装Django:
```bash
pip install django
```
3. 连接数据库
在Django中连接数据库可以使用ORM(对象关系映射),通过模型来操作数据库。首先需要在settings.py文件中配置数据库连接信息:
```python
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'database_name',
'USER': 'database_user',
'PASSWORD': 'database_password',
'HOST': 'localhost',
'PORT': '3306',
}
}
```
4. 创建模型
在Django中,通过继承models.Model来创建模型。例如,创建一个模型来表示商品:
```python
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=50)
price = models.DecimalField(max_digits=10, decimal_places=2)
category = models.CharField(max_length=50)
def __str__(self):
return self.name
```
5. 查询数据
在模型中定义好后,可以通过以下代码查询数据:
```python
from .models import Product
products = Product.objects.all()
```
6. 生成饼图
在Django中,可以通过模板引擎来生成HTML页面。首先需要在views.py文件中生成数据并传递到模板中:
```python
from django.shortcuts import render
from .models import Product
def pie_chart(request):
products = Product.objects.all()
categories = set([product.category for product in products])
data = []
for category in categories:
count = len([product for product in products if product.category == category])
data.append({'name': category, 'value': count})
return render(request, 'pie_chart.html', {'data': data})
```
然后,在templates文件夹中创建pie_chart.html文件,并在其中使用ECharts生成饼图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pie Chart</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('chart'));
var data = {{ data|safe }};
chart.setOption({
title: {
text: '商品分类统计'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: data.map(item => item.name)
},
series: [
{
name: '商品分类',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data
}
]
});
</script>
</body>
</html>
```
最后,在urls.py文件中将视图函数和URL进行映射:
```python
from django.urls import path
from .views import pie_chart
urlpatterns = [
path('pie-chart/', pie_chart, name='pie_chart'),
]
```
这样,就可以在浏览器中访问 http://localhost:8000/pie-chart/ 来查看生成的饼图了。
阅读全文