devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

django之 echarts数据可视化2：导入数据库数据_django数据库中的数据连接到echarts中

作者：我家自动化 | 2024-06-29 14:07:04

赞

踩

django数据库中的数据连接到echarts中

前面我们已经在django框架项目里实现了简单的echarts数据可视化。本篇是在

django之 echarts数据可视化_水w的博客-CSDN博客的基础上进行的。

而且注意：本篇与上一篇使用的不是同一个echarts示例。

在前面的基础上，现在我们想要修改echarts示例数据，改成我们自己数据库中的数据。

步骤：

1、先对echarts示例进行一个整体的了解，

 2、重新运行django项目，简单修改之后的页面为：

简单修改之后的show.html代码为： 

  1. {% load static %}
  2. <!--
  3.     THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient
  4. -->
  5. <!DOCTYPE html>
  6. <html style="height: 100%">
  7.     <head>
  8.         <meta charset="utf-8">
  9.     </head>
  10.     <body style="height: 100%; margin: 0">
  11.         <div id="container" style="height: 100%"></div>
  12.  
  13.  
  14.         <script type="text/javascript" src="{% static 'dist/js/echarts.js' %}"></script>
  15.         <script type="text/javascript">
  16. var chartDom = document.getElementById('container');
  17. var myChart = echarts.init(chartDom);
  18. var option;
  19.  
  20. option = {
  21.   title: {
  22.     text: 'Stacked Line'
  23.   },
  24.   tooltip: {
  25.     trigger: 'axis'
  26.   },
  27.   legend: {
  28.     data: ['北京', '天津', '上海', '广州', '深圳']
  29.   },
  30.   grid: {
  31.     left: '2%',
  32.     right: '30%',
  33.     bottom: '14%',
  34.     containLabel: true
  35.   },
  36.   toolbox: {
  37.     feature: {
  38.       saveAsImage: {}
  39.     }
  40.   },
  41.   xAxis: {
  42.     type: 'category',
  43.     boundaryGap: false,
  44.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  45.   },
  46.   yAxis: {
  47.     type: 'value'
  48.   },
  49.   series: [
  50.     {
  51.       name: '北京',
  52.       type: 'line',
  53.       stack: 'Total',
  54.       data: [120, 132, 101, 134, 90, 230, 210]
  55.     },
  56.     {
  57.       name: '天津',
  58.       type: 'line',
  59.       stack: 'Total',
  60.       data: [220, 182, 191, 234, 290, 330, 310]
  61.     },
  62.     {
  63.       name: '上海',
  64.       type: 'line',
  65.       stack: 'Total',
  66.       data: [150, 232, 201, 154, 190, 330, 410]
  67.     },
  68.     {
  69.       name: '广州',
  70.       type: 'line',
  71.       stack: 'Total',
  72.       data: [320, 332, 301, 334, 390, 330, 320]
  73.     },
  74.     {
  75.       name: '深圳',
  76.       type: 'line',
  77.       stack: 'Total',
  78.       data: [820, 932, 901, 934, 1290, 1330, 1320]
  79.     }
  80.   ]
  81. };
  82.  
  83. option && myChart.setOption(option);
  84.  
  85.         </script>
  86.  
  87.     </body>
  88. </html>

3、对传入的数据进行修改，使用本地mysql数据库中的Job数据：

 在django项目的应用web里的web/views.py文件下修改函数“web_show”：

  1. from datetime import datetime
  2. from django.http import HttpResponse
  3. from django.shortcuts import render, redirect
  4. from django.urls import reverse
  5. from myadmin.models import User, Company, Job
  6. from django.db.models import Q
  7.  
  8. # Create your views here.
  9. def web_show(request):
  10.     beijing_list = [
  11.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__lt=8000)).count(),
  12.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
  13.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
  14.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
  15.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
  16.         Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=16000)).count(),
  17.     ]
  18.     shanghai_list = [1,2,3,4,5,6]
  19.     shenzhen_list = [1,2,3,4,5,6]
  20.     tianjin_list = [
  21.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__lt=8000)).count(),
  22.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
  23.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
  24.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
  25.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
  26.         Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=16000)).count(),
  27.     ]
  28.     shanghai_list = [
  29.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__lt=8000)).count(),
  30.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
  31.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
  32.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
  33.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
  34.         Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=16000)).count(),
  35.     ]
  36.     guangzhou_list = [
  37.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__lt=8000)).count(),
  38.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
  39.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
  40.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
  41.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
  42.         Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=16000)).count(),
  43.     ]
  44.     shenzhen_list = [
  45.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__lt=8000)).count(),
  46.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
  47.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
  48.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
  49.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
  50.         Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=16000)).count(),
  51.     ]
  52.     return render(request, "web/show.html",{'beijing_list':beijing_list, 'tianjin_list':tianjin_list,
  53.          'shanghai_list':shanghai_list, 'guangzhou_list':guangzhou_list, 'shenzhen_list':shenzhen_list})

这里使用model.object.filter()来对数据库中的数据进行过滤，

model.objects.get(name='name')

model.objects.filter(name='name')

# 等价于model.objects.filter(name__exact='name');

# name__iexact不区分大小写

model.objects.filter(name__contains="北京")

model.objects.all().exists()         # 判断是否为空

model.objects.all().count()         # 查询的对象数量

使用Q来进行多条件的查询：

_exact 精确等于 
__contains 包含
__gt 大于
__gte 大于等于
__lt 小于
__lte 小于等于

  1. from django.db.models import Q
  2.  
  3. # 查询Job表下的满足条件（job_area属性中包含“北京”，并且job_salary低于8000）的对象的数量
  4. Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__lt=8000))

4、修改web/views.py文件下修改函数“web_show”之后，我们还需要修改template/web/show.html文件，将后端的beijing_list、shanghai_list、guangzhou_list、shenzhen_list、tianjin_list传入到show.html文件中，才能显示出来我们导入的数据。

 

show.html代码为：

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html style="height: 100%">
  4.     <head>
  5.         <meta charset="utf-8">
  6.     </head>
  7.     <body style="height: 100%; margin: 0">
  8.         <div id="container" style="height: 100%"></div>
  9.         <script type="text/javascript" src="{% static 'dist/js/echarts.js' %}"></script>
  10.         <script type="text/javascript">
  11. var chartDom = document.getElementById('container');
  12. var myChart = echarts.init(chartDom);
  13. var option;
  14.  
  15. option = {
  16.   title: {
  17.     text: 'Stacked Line'
  18.   },
  19.   tooltip: {
  20.     trigger: 'axis'
  21.   },
  22.   legend: {
  23.     data: ['北京', '天津', '上海', '广州', '深圳']
  24.   },
  25.   grid: {
  26.     left: '2%',
  27.     right: '30%',
  28.     bottom: '14%',
  29.     containLabel: true
  30.   },
  31.   toolbox: {
  32.     feature: {
  33.       saveAsImage: {}
  34.     }
  35.   },
  36.   xAxis: {
  37.     type: 'category',
  38.     boundaryGap: false,
  39.     data: ['小于8000', '8000~10000', '10000~12000', '12000~14000', '14000~16000', '大于16000']
  40.   },
  41.   yAxis: {
  42.     type: 'value'
  43.   },
  44.   series: [
  45.     {
  46.       name: '北京',
  47.       type: 'line',
  48.       stack: 'Total',
  49.       data: {{ beijing_list }}
  50.     },
  51.     {
  52.       name: '天津',
  53.       type: 'line',
  54.       stack: 'Total',
  55.       data: {{ tianjin_list|safe }}
  56.     },
  57.     {
  58.       name: '上海',
  59.       type: 'line',
  60.       stack: 'Total',
  61.       data: {{ shanghai_list }}
  62.     },
  63.     {
  64.       name: '广州',
  65.       type: 'line',
  66.       stack: 'Total',
  67.       data: {{ guangzhou_list }}
  68.     },
  69.     {
  70.       name: '深圳',
  71.       type: 'line',
  72.       stack: 'Total',
  73.       data: {{ shenzhen_list }}
  74.     }
  75.   ]
  76. };
  77.  
  78. option && myChart.setOption(option);
  79.  
  80.         </script>
  81.  
  82.     </body>
  83. </html>

5、重新运行django项目，在浏览器输入http://127.0.0.1:8000/web/show/

就可以看到echarts图了，

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/769425
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号