django中把mysql数据引入echarts作出柱状图
时间: 2023-11-07 20:09:53 浏览: 328
要在 Django 中使用 ECharts,需要先在前端页面引入 ECharts 的 JavaScript 库。可以在 HTML 页面中使用 script 标签引入 ECharts 的 JavaScript 库,或者使用模块化的方式引入库。
在 Django 中读取 MySQL 数据库中的数据,可以使用 Django 提供的 ORM 框架进行操作。下面是一个简单的示例代码,演示如何在 Django 中读取 MySQL 数据库中的数据并将其作为 ECharts 的柱状图展示出来:
1. 安装必要的依赖库
首先需要安装 pymysql 库,它是 Python 中一个用于连接 MySQL 数据库的库。可以使用以下命令安装:
```
pip install pymysql
```
2. 在 Django 项目中配置数据库
在 Django 项目的 settings.py 文件中配置 MySQL 数据库的连接信息:
```
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': '数据库名',
'USER': '用户名',
'PASSWORD': '密码',
'HOST': '数据库地址',
'PORT': '端口号',
}
}
```
3. 在 Django 中读取 MySQL 数据库中的数据
在 Django 中使用 ORM 框架查询 MySQL 数据库中的数据,可以在视图函数中进行操作。示例代码如下:
```
from django.shortcuts import render
from django.db import connection
def echarts_demo(request):
with connection.cursor() as cursor:
cursor.execute("SELECT name, sales FROM sales_data")
rows = cursor.fetchall()
data = []
for row in rows:
data.append({'name': row[0], 'sales': row[1]})
return render(request, 'echarts_demo.html', {'data': data})
```
在这个示例中,假设 MySQL 数据库中有一个名为 sales_data 的表,其中包含了两个字段:name 和 sales。通过使用 Django ORM 框架,可以执行 SQL 查询语句并获取查询结果。然后将查询结果转化为一个列表,每个元素是一个字典,包含了 name 和 sales 两个键值对。最后将这个列表传递给 HTML 模板。
4. 在 HTML 页面中使用 ECharts 展示柱状图
在 HTML 模板中,可以使用 ECharts 的 JavaScript 库展示柱状图。示例代码如下:
```
<html>
<head>
<title>ECharts Demo</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
var data = {{ data|safe }};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: {
type: 'category',
data: data.map(item => item.name),
},
yAxis: {
type: 'value',
},
series: [{
data: data.map(item => item.sales),
type: 'bar',
}]
});
</script>
</body>
</html>
```
在这个示例中,首先引入了 ECharts 的 JavaScript 库。然后在 div 标签中创建了一个容器,用于展示柱状图。接下来使用 JavaScript 代码从 Django 传递过来的数据中提取出 name 和 sales 的数组,并将它们作为 xAxis 和 series 的数据。最后使用 ECharts 的 setOption 方法将数据渲染成柱状图。
以上就是在 Django 中将 MySQL 数据库中的数据引入 ECharts 作出柱状图的基本步骤。
阅读全文