首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

Django使用echarts进行可视化展示的实践

Posted in Python onJune 10, 2021

本文以学生成绩折线图展示为例

条件准备

  • 电脑上有myslq数据库
  • 有 echarts 的 js 文件

连接mysql

# settings.py 文件

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        # mysql 数据库名
        'NAME': 'chaochao',
        # mysql 登陆用户名
        'USER': 'root',
        # myslq 登陆密码
        'PASSWORD': 'chaochao666',
        'HOST': '',
        'PORT': '',
    }
}

Django 连接 mysql 数据库教程在其他文章中，这里不再细说

导入数据

可以直接在 mysql 数据库中添加数据，也可以使用超级用户在 admin 管理页面中添加数据

# models.py 文件

class Person(models.Model):
    # 姓名 str类型
    name = models.CharField(max_length=20,verbose_name='姓名')
    # 年龄 int型
    age=models.IntegerField(verbose_name='年龄')
    # 成绩 float类型
    score = models.FloatField(verbose_name='成绩')

数据库内容：

Django使用echarts进行可视化展示的实践

使用echarts可视化展示

设置静态文件目录（即 static 目录）

# settings.py 文件

STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)

创建如下目录结构：

Django使用echarts进行可视化展示的实践

js 目录中为 echarts的 js 文件，大家可以在 echarts官网下载自己需要的版本

css 目录中为 展示页面用到的 css 文件

在 echarts 官网找到想展示的实例代码

这里使用的折线图的官网地址为：https://echarts.apache.org/examples/zh/editor.html?c=line-simple

实例代码：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

index.css 文件内容：

#chart{
    height: 500px;
    width: 500px;
}

echarts 展示的图表需要和 html 中的 div 元素 联系起来，并且该 div 元素必须指定 height 和 width 属性

index.html 文件内容

现在使用的 echarts 官网实例中的静态数据，下面将修改为使用mysql数据库中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个django展示页面</title>
    <link rel="stylesheet" href="/static/css/index.css" rel="external nofollow" >
    <script src="/static/js/echarts.min.js"></script>
</head>
<body>
<h1>学生成绩简单可视化</h1>
<div id="chart"></div>

<script>
    {#初始化 echarts 对象#}
    var mychart = echarts.init(document.getElementById('chart'));
    {#可视化展示选项#}
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    {#将 echarts对象与展示选项结合起来#}
    mychart.setOption(option);

</script>
</body>
</html>

现在使用的静态数据，先来看一下页面效果

Django使用echarts进行可视化展示的实践

已经可以看到图表了

现在，我们来修改为 myslq 数据库中的数据

首先，编写 views.py 文件，将数据库中的数据传到前端页面中

from django.shortcuts import render
from .models import Person

# Create your views here.

def index(request):
    # 查询出Person对象信息，也就是数据表中的所有数据
    # 一行数据就是一个对象，一个格子的数据就是一个对象的一个属性值
    objs = Person.objects.all()

    # locals函数可以将该函数中出现过的所有变量传入到展示页面中，即index.html文件中
    return render(request,'index.html',locals())

Django使用echarts进行可视化展示的实践

修改 index.html 页面，引用数据库中的信息

只需要修改了 js 内容即可，以下为 script标签中的内容

<script>
    {#初始化 echarts 对象#}
    var mychart = echarts.init(document.getElementById('chart'));

    {#首先，声明两个 javascript 的数组#}
    var series_data = [];
    var xAxis_data = [];

    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        xAxis_data.push({{ stu.name}})
    {% endfor %}

    {#可视化展示选项#}
    var option = {
        xAxis: {
            type: 'category',
            {#将x轴坐标修改为数据库中的学生姓名#}
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            {#将y轴的数据修改为数据库中学生的成绩，即score#}
            data: series_data,
            type: 'line'
        }]
    };
    {#将 echarts对象与展示选项结合起来#}
    mychart.setOption(option);

</script>

现在，我们来看一下展示效果

Django使用echarts进行可视化展示的实践

没有图表

不要慌，打开控制台看下报错信息

Django使用echarts进行可视化展示的实践

这是因为Django的模板文件中，js代码接受数据库的数据时，不会判断当前数据的数据类型

也就是这里它把 “超超” 这个字符串当作了变量名

解决办法很简单，在 js 接受数据时添加上一对双引号

<script>
    {#初始化 echarts 对象#}
    var mychart = echarts.init(document.getElementById('chart'));

    {#首先，声明两个 javascript 的数组#}
    var series_data = [];
    var xAxis_data = [];

    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        {#注意这里的双引号#}
        xAxis_data.push("{{ stu.name}}")
    {% endfor %}

    {#可视化展示选项#}
    var option = {
        xAxis: {
            type: 'category',
            {#将x轴坐标修改为数据库中的学生姓名#}
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            {#将y轴的数据修改为数据库中学生的成绩，即score#}
            data: series_data,
            type: 'line'
        }]
    };
    {#将 echarts对象与展示选项结合起来#}
    mychart.setOption(option);

</script>

双引号的位置是：

{% for stu in objs %}
series_data.push({{ stu.score }})
{#注意这里的双引号#}
xAxis_data.push("{{ stu.name}}")
{% endfor %}

Django使用echarts进行可视化展示的实践

现在可以看到，x轴坐标变为了数据库中的学生姓名，y轴变为了数据库中的学生成绩

如果需要使用其他的 echarts 图表进行可视化展示，只需修改 script 中的代码即可

到此这篇关于Django使用echarts进行可视化展示的实践的文章就介绍到这了,更多相关Django echarts可视化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

Django使用echarts进行可视化展示的实践

- Author -

云边有个张同学

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python动态监控日志内容的示例
Feb 16 Python
浅谈python迭代器
Nov 08 Python
python之DataFrame实现excel合并单元格
Feb 22 Python
使用python爬取B站千万级数据
Jun 08 Python
python求质数的3种方法
Sep 28 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
Oct 16 Python
Python 从相对路径下import的方法
Dec 04 Python
Form表单及django的form表单的补充
Jul 25 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
Aug 17 Python
Python如何使用argparse模块处理命令行参数
Dec 11 Python
如何在django中实现分页功能
Apr 22 Python
Pycharm如何导入python文件及解决报错问题
May 10 Python
教你如何使用Python Tkinter库制作记事本
Jun 10 #Python
Python中常见的反爬机制及其破解方法总结
Jun 10 #Python
Pytorch可视化的几种实现方法
OpenCV-Python实现怀旧滤镜与连环画滤镜
OpenCV-Python实现轮廓的特征值
Jun 09 #Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
Jun 09 #Python
Python的这些库,你知道多少?
pdf(1) JOIN(1) cypress(1) form表单(1) 缓冲区(1) JDBC(3) Eclipse(1) ant design(2) 变量提升(1) 弹窗(1)
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php的dl函数用法实例
2014/11/06 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue element 中的table动态渲染实现（动态表头）
2019/11/21 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python多进程fork()函数详解
2019/02/22 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python @property装饰器原理解析
2020/01/22 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
高中毕业自我鉴定
2013/12/13 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
《童年》读后感（三篇）
2019/08/27 职场文书