django之 echarts数据可视化2：导入数据库数据

     阅读:53

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

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

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

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

步骤：

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

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

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

{% load static %}
<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>


        <script type="text/javascript" src="{% static 'dist/js/echarts.js' %}"></script>
        <script type="text/javascript">
var chartDom = document.getElementById('container');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['北京', '天津', '上海', '广州', '深圳']
  },
  grid: {
    left: '2%',
    right: '30%',
    bottom: '14%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '北京',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '天津',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '上海',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '广州',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '深圳',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);

        </script>

    </body>
</html>

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

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

from datetime import datetime
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.urls import reverse
from myadmin.models import User, Company, Job
from django.db.models import Q

# Create your views here.
def web_show(request):
    beijing_list = [
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__lt=8000)).count(),
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
        Job.objects.filter(Q(job_name__contains='北京') | Q(job_salary__gt=16000)).count(),
    ]
    shanghai_list = [1,2,3,4,5,6]
    shenzhen_list = [1,2,3,4,5,6]
    tianjin_list = [
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__lt=8000)).count(),
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
        Job.objects.filter(Q(job_name__contains='天津') | Q(job_salary__gt=16000)).count(),
    ]
    shanghai_list = [
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__lt=8000)).count(),
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
        Job.objects.filter(Q(job_name__contains='上海') | Q(job_salary__gt=16000)).count(),
    ]
    guangzhou_list = [
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__lt=8000)).count(),
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
        Job.objects.filter(Q(job_name__contains='广州') | Q(job_salary__gt=16000)).count(),
    ]
    shenzhen_list = [
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__lt=8000)).count(),
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=8000) | Q(job_salary__lte=10000)).count(),
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=10000) | Q(job_salary__lte=12000)).count(),
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=12000) | Q(job_salary__lte=14000)).count(),
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=14000) | Q(job_salary__lte=16000)).count(),
        Job.objects.filter(Q(job_name__contains='深圳') | Q(job_salary__gt=16000)).count(),
    ]
    return render(request, "web/show.html",{'beijing_list':beijing_list, 'tianjin_list':tianjin_list,
         '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 小于等于

from django.db.models import Q

# 查询Job表下的满足条件（job_area属性中包含“北京”，并且job_salary低于8000）的对象的数量
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代码为：

{% load static %}
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="{% static 'dist/js/echarts.js' %}"></script>
        <script type="text/javascript">
var chartDom = document.getElementById('container');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['北京', '天津', '上海', '广州', '深圳']
  },
  grid: {
    left: '2%',
    right: '30%',
    bottom: '14%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['小于8000', '8000~10000', '10000~12000', '12000~14000', '14000~16000', '大于16000']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '北京',
      type: 'line',
      stack: 'Total',
      data: {{ beijing_list }}
    },
    {
      name: '天津',
      type: 'line',
      stack: 'Total',
      data: {{ tianjin_list|safe }}
    },
    {
      name: '上海',
      type: 'line',
      stack: 'Total',
      data: {{ shanghai_list }}
    },
    {
      name: '广州',
      type: 'line',
      stack: 'Total',
      data: {{ guangzhou_list }}
    },
    {
      name: '深圳',
      type: 'line',
      stack: 'Total',
      data: {{ shenzhen_list }}
    }
  ]
};

option && myChart.setOption(option);

        </script>

    </body>
</html>

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

就可以看到echarts图了，

 

 

推荐阅读
0 基础 Java 自学之路（2021年最新版）749 Kafka踩坑记----bootstrap-server is not a recognized option如何解决403 通俗易懂的Python入门基础详细教程382 djangorestframework-simplejwt入门教程380 Java中QueryWrapper的使用347 Springboot启动提示：com.alibaba.nacos.shaded.io.grpc.StatusRuntimeException: UNAVAILAB322 run `npm fund` for details解决，前端开发：项目运行npm install 提示XXX ...for funding run `npm fund`...的解决方法288 瑞吉外卖项目剩余功能补充261 仿牛客网讨论社区项目—项目总结及项目常见面试题239 Django案例：学生信息管理208 数字后端——ECO203 MySQL常见面试题汇总（建议收藏！！！）193