数据可视化

2023-09-17 16:14:15

一、Flask介绍

#通过访问路径，获取用户的字符串参数
@app.route('/user/<name>')
def welcome(name):
    return "你好，%s"%name

在这里插入图片描述

@app.route('/user/<int:id>')
def welcome2(id):
    return "你好，%d号的会员"%id

在这里插入图片描述
能够自动根据参数匹配不同的路由

#返回给用户渲染后的网页文件
@app.route('/')
def index2():
    return render_template("index.html") #渲染模板

在这里插入图片描述

def index2():
    time= datetime.date.today() #普通变量
    name=["小张","小王","小赵"]#列表变量
    task={"任务":"打扫卫生","时间":"3小时"}
    return render_template("index.html",var=time,list=name,task=task)


<body>
  今天是{{ var }},欢迎光临。<br/>
  今天值班的有:<br/>
  {% for data in list %}
      <li>{{ data }}</li>
  {% endfor %}

  任务：<br/>  <!--        -->
      <table border="1">
          {% for key,value in task.items() %} <!--[(key,value),(key,value)]-->
             <tr>
                 <td>{{ key }}</td>
                 <td>{{ value }}</td>
             </tr>
          {% endfor %}
      </table>

</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、豆瓣数据可视换案列

2.1、五分钟上手Echarts

https://echarts.apache.org/v4/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

测试demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述
豆瓣项目
需要显示字符串时：
在这里插入图片描述

并且前端使用tojson完成接收数据
在这里插入图片描述
完整代码：
app.py

from flask import Flask,render_template
import sqlite3

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")


@app.route('/index')
def home():
    #return render_template("index.html")
    return index()


@app.route('/movie')
def movie():
    datalist  = []
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = "select * from movie250"
    data = cur.execute(sql)
    for item in data:
        datalist.append(item)
    cur.close()
    con.close()
    # print(datalist)
    return render_template("movie.html",movies=datalist)



@app.route('/score')
def score():
    score = []  #评分
    num = []    #每个评分所统计出的电影数量
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = "select score,count(score) from movie250 group by score"
    data = cur.execute(sql)
    for item in data:
        score.append(str(item[0]))
        num.append(item[1])

    cur.close()
    con.close()
    return render_template("score.html",score= score,num=num)


@app.route('/word')
def word():
    return render_template("word.html")

@app.route('/team')
def team():
    return render_template("team.html")


if __name__ == '__main__':
    app.run()

movie.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>豆瓣Top250数据分析</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="static/assets/img/favicon.png" rel="icon">
  <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="static/assets/css/style.css" rel="stylesheet">

</head>

<body>



  <!-- ======= Header ======= -->
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>Mamba</span></a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="temp.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/index">首页<i class="la la-angle-down"></i></a></li>
          <li><a href="/movie">电影</a></li>
          <li><a href="/score">评分</a></li>
          <li><a href="/word">词云</a></li>
          <li><a href="/team">团队</a></li>

        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Our Team Section ======= -->
    <section id="team" class="team">
      <div class="container">

        <div class="section-title">
          <h2>豆瓣电影Top250电影</h2>
        </div>

        <!-- ======= Counts Section ======= -->
    <section class="counts section-bg">
      <div class="container">

          <table class="table table-striped">

              <tr>
                  <td>排名</td>
                  <td>电影中文名称</td>
                  <td>电影外国名称</td>
                  <td>评分</td>
                  <td>评价人数</td>
                  <td>一句话概述</td>
                  <td>其他信息</td>
              </tr>

              {% for movie in movies %}
              <tr>
                  <td>{{movie[0]}}</td>
                  <td>
                      <a href="{{ movie[1] }}" target="_blank">
                      {{ movie[3] }}
                        </a>
                  </td>
                  <td>{{movie[4]}}</td>
                  <td>{{movie[5]}}</td>
                  <td>{{movie[6]}}</td>
                  <td>{{movie[7]}}</td>
                  <td>{{movie[8]}}</td>
              </tr>

              {% endfor %}


          </table>


        </div>

      </div>
    </section><!-- End Counts Section -->

      </div>
    </section><!-- End Our Team Section -->


  <!-- ======= Footer ======= -->
  <footer id="footer">


    <div class="container">
      <div class="copyright">
        &copy; Copyright <strong><span>Mamba</span></strong>. All Rights Reserved
      </div>

    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <!-- Vendor JS Files -->
  <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="static/assets/vendor/php-email-form/validate.js"></script>
  <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="static/assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="static/assets/js/main.js"></script>

</body>

</html>

score.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="static/assets/js/echarts.min.js"></script>

  <title>豆瓣Top250数据分析</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="static/assets/img/favicon.png" rel="icon">
  <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="static/assets/css/style.css" rel="stylesheet">

</head>

<body>



  <!-- ======= Header ======= -->
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>Mamba</span></a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="temp.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/index">首页<i class="la la-angle-down"></i></a></li>
          <li><a href="/movie">电影</a></li>
          <li><a href="/score">评分</a></li>
          <li><a href="/word">词云</a></li>
          <li><a href="/team">团队</a></li>

        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Our Team Section ======= -->
    <section id="team" class="team">
      <div class="container">

        <div class="section-title">
          <h2>豆瓣电影Top250评分分布图</h2>
        </div>

        <!-- ======= Counts Section ======= -->
    <section class="counts section-bg">
      <div class="container">

            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:300px"></div>


      </div>
    </section><!-- End Counts Section -->

      </div>
    </section><!-- End Our Team Section -->

 <script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {

    color:['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right:'4%',
        bottom:'3%',
        containLabel:true
    },
    xAxis: {
        type: 'category',
        data: {{ score|tojson }}
        <!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','999']-->
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: {{ num }},
            <!--[120, 20, 150, 80, 70, 110, 130,200],-->
        barWidth:'60%',
        type:'bar'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>


  <!-- ======= Footer ======= -->
  <footer id="footer">


    <div class="container">
      <div class="copyright">
        &copy; Copyright <strong><span>Mamba</span></strong>. All Rights Reserved
      </div>
    
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <!-- Vendor JS Files -->
  <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="static/assets/vendor/php-email-form/validate.js"></script>
  <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="static/assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="static/assets/js/main.js"></script>

</body>

</html>
更多推荐

WRF高精度气象模拟

气候是多个领域（生态、水资源、风资源及碳中和等问题）的主要驱动因素，合理认知气候变化有利于解释生态环境变化机理及过程，而了解现在、未来气候变化则是进行生态、环境及能源评估、碳政策规划的先决条件，而气候模拟是获取高精度气候信息的最主要手段，现代生态、水文、新能源及碳中和领域需要亚公里及更高分辨率的气象模拟，WRF模式是国

Java的abstract应用和代理模式应用

记录：474场景：Java的abstract应用，一个抽象类，多个实现类。Java代理模式应用，使用代理模式执行具体实现类，在代理类中做日志等记录。版本：JDK1.8。1.一个Java抽象类(1)说明使用Java关键字abstract修饰的类，就是抽象类。使用Java关键字abstract修饰的方法，就是抽象方法。抽象

linux 解决发现不到的 内存占用率

1、问题浮现项目做久了，你往往会遇到一些稀奇古怪的问题。下面咱就来聊聊关于内存无故使用率变大的真相。事情是这样的，最近一个客户的服务器，内存使用率在90%左右，这很不正常，导致某云的云安全中心一直报警，开始的时候没有关注。后面，有一个项目需要紧急上线，并且项目相当吃cpu和内存。于是，问题就出来了。90%的内存，系统是

Python数据分析之Excel

openpyxl库1、openpyxl概述2、Excel写入2.1、新建2.2、添加数据2.3、单元格格式3、Excel读取4、openpyxl操作Excel之CRUD4.1、查4.2、改4.3、删1、openpyxl概述openpyxl是一个用于处理xlsx格式Excel表格文件的第三方python库，几乎支持Exc

CocoaPods 在iOS开发中养活了这么多项目，它到底是个啥？ | 京东云技术团队

对于iOS开发者而言，CocoaPods并不陌生，通过pod相关的命令操作，就可以很方便的将项目中用到的三方依赖库资源集成到项目环境中，大大的提升了开发的效率。CocoaPods作为iOS项目的包管理工具，它在命令行背后做了什么操作？而又是通过什么样的方式将命令指令声明出来供我们使用的？这些实现的背后底层逻辑是什么？都

基于Hadoop的疫情信息分析与可视化研究——包含大屏可视化及预测算法

需要本项目的全套环境、代码、文档、资源、数据和部署调试的私信博主！！！本研究基于中国新冠疫情2020-01-11至2022-12-20的全国整体数据进行疫情大数据分析，通过对历史的数据进行大数据分析，可以有效的掌握过去疫情数据的特点，便于对疫情之后的防控提供更好的决策。本次研究的数据集，来自于国内卫健委疫情官方数据集，

Kubernetes网络插件Canal的工作原理和关键功能

文章目录什么是Canal？安装Canal配置网络策略使用Canal进行跨节点通信总结🎈个人主页：程序员小侯🎐CSDN新晋作者🎉欢迎👍点赞✍评论⭐收藏✨收录专栏：云计算✨文章内容：网络插件Canal🤝希望作者的文章能对你有所帮助，有不足的地方请在评论区留言指正，大家一起学习交流！🤗Kubernetes（简称K

在TensorFlow中使用GAN生成图像

一、说明本文详细论述，如何在tensorflow下，在mnist数据集合上进行GAN实现。包括：框架建立、数据集读出、生成器、鉴别器、代价函数、优化等具体步骤的代码实现。二、GAN框架介绍生成器：此组件负责生成新图像。鉴别器：此组件评估生成的图像的质量。我们将开发的使用GAN生成图像的一般架构如下图所示。以下部分简要介

Oracle PLSQL编程

文章目录PLSQL介绍1.dbms_output用法2.赋值操作2.1:=2.2into2.3属性类型3.控制语句if语句case语句无限循环有条件循环for循环goto4.动态SQL语句5.异常语句PLSQL介绍PLSQL过程语言(ProceduralLanguage)与结构化查询语言(SQL)结合而成的编程语言.通

Elasticsearch：为具有许多 and/or 高频术语的 top-k 查询带来加速

作者：AdrienGrandDisjunctivequeries（term_1ORterm_2OR...ORterm_n）非常常用，因此在提高查询评估效率方面它们受到了广泛关注。ApacheLucene对于评估disjunctivequeries有两个主要优化：一方面用于详尽评估的BS1，另一方面用于计算热门命中的MA

干货 | 中国石化化工高端新材料价格体系模型构建

以下内容整理自2023年夏季学期大数据能力提升项目《大数据实践课》同学们所做的期末答辩汇报。随着石化行业市场日趋饱和，市场竞争日益激烈，企业利润空间不断被压缩，大多数石化企业急需转型开拓新市场，化工原料价格的波动对于石化企业的决策和利润都会产生直接影响，所以对于化工原料价格精确、高效的预测显得尤为重要。目前业界已有部分

热文推荐
  1. Web 3.0 安全风险，您需要了解这些内容

    随着技术的不断进步，我们正迎来一个全新的互联网时代，被称为Web3.0。Web3.0将带来许多令人兴奋的机会，但与之同时，也伴随着一系列新的安全风险。在这篇文章中，我们将探讨Web3.0的安全挑战，以帮助您更好地了解并准备迎接这个新时代。Web3.0简介Web3.0是互联网的下一代，将构建在区块链、分布式技术和智能合约

  2. 人工智能：人脸识别技术应用场景介绍

    目录人脸识别介绍什么是人脸识别技术人脸识别的流程1、场景分类2、认证对比3、金融领保险应用3.1金融行业3.2保险行业4、安防交通领域4.1公园景点人脸识别闸机4.2高铁站进站人脸识别闸机5、警务领域5.1抓拍交通违法人脸识别介绍什么是人脸识别技术人脸识别技术是一种通过计算机技术和模式识别算法来识别和验证人脸的技术。它

  3. SQLyog 各版本下载与安装（目前最新版本为13.2.0）

    文章目录一、SQLyogUltimate各版本下载1.ForWindowsx642.ForWindowsx86二、SQLyogCommunity各版本下载1.ForWindowsx642.ForWindowsx863.ForLinuxx86_644.ForLinuxi386三、SQLyog安装四、如何解决SQLyog试

  4. 月木学途开发 1.后台用户模块

    概述权限控制采用springsecurity数据库设计用户表DROPTABLEIFEXISTS`admin`;CREATETABLE`admin`(`aid`int(32)NOTNULLAUTO_INCREMENT,`email`varchar(50)DEFAULTNULL,`username`varchar(50)D

  5. Java————List

    一、顺序表和链表线性表（linearlist）是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构，常见的线性表：顺序表、链表、栈、队列…线性表在逻辑上是线性结构，也就说是连续的一条直线。但是在物理结构上并不一定是连续的，线性表在物理上存储时，通常以数组和链式结构的形式存储。1.顺序表顺序表是

  6. java版Spring Cloud+Mybatis+Oauth2+分布式+微服务+实现工程管理系统

    鸿鹄工程项目管理系统SpringCloud+SpringBoot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统1.项目背景一、随着公司的快速发展，企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性，公司对内部工程管理的提升提出了更高的要求。二、企业通过

  7. 9.18号作业

    完善登录框点击登录按钮后，判断账号（admin）和密码（123456）是否一致，如果匹配失败，则弹出错误对话框，文本内容“账号密码不匹配，是否重新登录”，给定两个按钮ok和cancel，点击ok后，会清除密码框中的内容，继续进行登录；如果点击cancel按钮，则关闭界面。如果账号和密码匹配，则弹出信息对话框，给出提示信

  8. 函数式编程汇总

    目录一.Lambda表达式实例省略规则二.Stream流案例数据准备入门实例调试技巧常用操作创建流1.单例集合2.数组3.双列集合中间操作1.filter2.map3.distinct4.sorted5.limit7.flatMap终结操作1.forEach2.count3.max&min4.collect查找与匹配1

  9. Vue中如何封装组件，如何进行跨组件通信

    封装组件和跨组件通信是Vue.js中非常重要的概念，它们有助于构建模块化、可维护和可扩展的应用程序。本文将深入讨论如何在Vue中封装组件以及如何实现跨组件通信，同时提供示例代码来帮助您更好地理解这些概念。第一部分：Vue组件的封装在Vue中，组件是可复用的UI元素，可以将其封装成独立的模块，以便在应用程序中多次使用。组