草庐IT

【小白适用】Django+Echarts+Mysql

忘川_7 2023-09-29 原文

Django+Echarts+Mysql项目Demo!

提示：以下是本篇文章正文内容，案例仅供参考

一、Django框架

1、创建Django项目

1、选择Django，创建项目
2、输入本地地址
3、选择配置python编译器
4、选择More Settings，配置app！！！（现在配置省很多事情噢）

2、文件结构

二、链接mysql

1.引入库

settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'ed',		#数据库名称
        'USER':'root',		#用户名
        'PASSWORD':'**',	#密码
        'HOST':'localhost',	
        'PORT':'3306',
    }
}

2.读入数据

models.py

from django.db import models


class MajorCount(models.Model):
    major = models.CharField(max_length=255, blank=True, null=True)
    m_count = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'major_count'


class SchoolCount(models.Model):
    school = models.CharField(max_length=255, blank=True, null=True)
    s_count = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'school_count'

这里放入一个特别特别特别省事儿的方法（tip:数据库中数据存在噢

python manage.py inspectdb > models.py

数据库截图放在下面啦：


三、使用echarts可视化展示

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

（1）地址设置

settings.py

#添加到最后
STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)

（2）js文件下载

echarts.min.js: link
下载完毕放到static/js中

（3）css设置

index.css

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

把该文件放到static/css中

（4）static目录结构

2、可视化页面(templates文件夹）

（1）index.html页面测试

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

<script>

    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'
        }]
    };

    mychart.setOption(option);

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

看一下你的页面是不是下面这样：

如果是上面这样，恭喜你！下一步！

（2）将数据库中的数据传到前端页面

views.py

from django.shortcuts import render
from .models import Person
def index(request):
    objs = Person.objects.all()
    return render(request,'index.html',locals())

(3)引用数据库中的信息

index.html

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

<script>
    var mychart = echarts.init(document.getElementById('chart'));
    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',
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: series_data,
            type: 'line'
        }]
    };
    mychart.setOption(option);
</script>
</body>
</html>

(4) 配置路径

urls.py

from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index)
]

3、执行项目

python manage.py runserver

查看页面

EchartsDjangospanclasstokenmysql

有关【小白适用】Django+Echarts+Mysql的更多相关文章

  1. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  2. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  3. ruby-on-rails - 无法安装 mysql2 0.3.14 gem - 2

    我看到其他人也遇到过类似的问题，但没有一个解决方案对我有用。0.3.14gem与其他gem文件一起存在。我已经完全按照此处指示完成了所有操作:https://github.com/brianmario/mysql2.我仍然得到以下信息。我不知道为什么安装程序指示它找不到include目录，因为我已经检查过它存在。thread.h文件存在，但不在ruby​​目录中。相反，它在这里:C:\RailsInstaller\DevKit\lib\perl5\5.8\msys\CORE\我正在运行Windows7并尝试在Aptana3中构建我的Rails项目。我的Ruby是1.9.3。$gemin

  4. ruby - 如何使用 ruby​​ mysql2 执行事务 - 2

    我已经开始使用mysql2gem。我试图弄清楚一些基本的事情——其中之一是如何明确地执行事务(对于批处理操作，比如多个INSERT/UPDATE查询)。在旧的ruby-mysql中，这是我的方法:client=Mysql.real_connect(...)inserts=["INSERTINTO...","UPDATE..WHEREid=..",#etc]client.autocommit(false)inserts.eachdo|ins|beginclient.query(ins)rescue#handleerrorsorabortentirelyendendclient.commi

  5. ruby - 如何使用适用于 ruby​​ 的 aws sdk 创建 route53 记录集？ - 2

    EC2会在实例停止然后重新启动时为其提供新的IP地址，因此我需要能够自动管理route53记录集，以便我可以一致地访问内容。遗憾的是，sdk的route53部分的文档远不如ec2的文档那么健壮(可以理解)，所以我有点卡住了。到目前为止，从我所看到的情况来看，似乎change_resource_record_sets(link)是可行的方法，但我对:chages需要什么感到困惑>因为它提到了一个Change对象，但没有提供指向所述对象描述的链接。这是我的代码目前的样子:r53.client.change_resource_record_sets(:hosted_zone_id=>'MY_

  6. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  7. ruby-on-rails - 当我通过 rvm 使用 rails3 时，如何在 ubuntu 上安装 mysql2 gem？ - 2

    我正在尝试绕过rails配置这个极其复杂的迷宫。到目前为止，我设法在ubuntu上设置了rvm(出于某种原因，ruby在ubuntu存储库中已经过时了)。我设法建立了一个Rails项目。我希望我的测试项目使用mysql而不是mysqlite。当我尝试“rakedb:migrate”时，出现错误:“!!!缺少mysql2gem。将其添加到您的Gemfile:gem'mysql2'”当我尝试“geminstallmysql”时，出现错误，告诉我需要为安装命令提供参数。但是，参数列表很大，我不知道该选择哪些。如何通过在ubuntu上运行的rvm和mysql获取rails3？谢谢。

  8. ruby - 从 Ruby 连接到适用于 Windows Phone 8 的 Microsoft 推送通知服务 - 2

    我们正在开发一个需要推送通知的WP8应用程序。为了测试它，我们使用CURL命令行运行推送通知POST请求，确保它实际连接，使用客户端SSL证书进行身份验证并发送正确的数据。我们确实知道，当我们收到对设备的推送时，这项工作是有效的。这是我们一直用于测试目的的CURL命令:curl--certclient_cert.pem-v-H"Content-Type:text/xml"-H"X-WindowsPhone-Target:Toast"-H"X-NotificationClass:2"-XPOST-d"MytitleMysubtitle"https://db3.notify.live.ne

  9. ruby-on-rails - rspec Mongoid 范围适用于开发而不是测试 - 2

    我有一个适用于Rails中的Mongoid对象的作用域，它在开发时效果很好，但在运行测试时效果不佳。它实际上在测试中根本不起作用。这是一个嵌入式文档。父级:classPersonincludeMongoid::Documentdefself.with_appointmentswhere(:appointments.not=>{'$size'=>0})endembeds_many:appointments,store_as:'Appointments',class_name:'Appointment'end嵌入的child:classAppointmentincludeMongoid::

  10. ruby-on-rails - 我应该使用哪个适用于 Ruby 的 CouchDB 适配器？ - 2

    一些我找到的选项是ActiveCouchCouchRESTCouchPotatoRelaxDBcouch_foo我更喜欢GitHub上的项目，因为这让我更容易fork和推送修复。所有这些都符合该要求。我习惯了Rails，所以我喜欢像ActiveRecord模型一样工作的东西。另一方面，我也不希望我和Couch之间太多--毕竟我使用它作为我的数据库是有原因的。最后，它们似乎都得到了相当积极的维护(couch_foo可能是个异常(exception))。所以我想这归结为(不可否认和不幸的)主观:有没有人对他们有过好的或坏的经历？ 最佳答案

随机推荐