首页
所有分类
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 14 Python
在Python的web框架中配置app的教程
Apr 30 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
May 11 Python
解析Python编程中的包结构
Oct 25 Python
Linux下python3.6.1环境配置教程
Sep 26 Python
对Python random模块打乱数组顺序的实例讲解
Nov 08 Python
Python3实现取图片中特定的像素替换指定的颜色示例
Jan 24 Python
Django中的静态文件管理过程解析
Aug 01 Python
Python搭建代理IP池实现获取IP的方法
Oct 27 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
Jan 11 Python
用python画城市轮播地图
May 28 Python
Python合并pdf文件的工具
Jul 01 Python
教你如何使用Python Tkinter库制作记事本
Jun 10 #Python
Python中常见的反爬机制及其破解方法总结
Jun 10 #Python
Pytorch可视化的几种实现方法
OpenCV-Python实现怀旧滤镜与连环画滤镜
OpenCV-Python实现轮廓的特征值
Jun 09 #Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
Jun 09 #Python
Python的这些库,你知道多少?
访问日志(2) 策略(1) 弱口令(1) 进程假死(1) 连接数(1) 线程(1) 内存(1) PV(1) UV(1) ipv6(1)
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
如何给phpadmin一个保护
2006/10/09 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
微信小程序 商城开发（ecshop ）简单实例
2017/04/07 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
详解react-redux插件入门
2018/04/19 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
一文读懂Python 枚举
2020/08/25 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
美国滑板店：Tactics
2020/11/08 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
《毛主席在花山》教学反思
2014/04/20 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
大学军训的体会
2014/11/08 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
催款函怎么写
2015/06/24 职场文书
水浒传读书笔记
2015/06/25 职场文书
redis限流的实际应用
2021/04/24 Redis
解决golang 关于全局变量的坑
2021/05/06 Golang
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Go语言 详解net的tcp服务
2022/04/14 Golang