数据可视化

已于 2023-09-18 15:51:18 修改
阅读量415 收藏
点赞数
分类专栏： Python 文章标签： 数据可视化
于 2023-09-17 16:14:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53906512/article/details/132925502
版权

一、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>
凹凸曼说我是怪兽y
关注
专栏目录
ECharts实现数据可视化入门教程（超详细）
『愚』的博客
02-20 18万+
ECharts实现数据可视化入门教程（超详细）ECharts介绍ECharts入门教程第一步：下载并引入scharts.js文件第二步：编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置（常用的）案例讲解 ECharts介绍 官网链接：Apache ECharts ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢
揭开数据可视化的神秘面纱：《Python数据可视化：科技图表绘制》深度解析
热门推荐
屿小夏.的知识博客
08-10 3万+
在大数据和人工智能的时代，数据可视化作为数据科学的重要组成部分，已经成为不可或缺的技能。面对日益增长的海量数据，如何将复杂的数据以直观、易于理解的方式呈现出来，成为了每个数据分析师和科研人员的必修课。《Python数据可视化：科技图表绘制》正是一本帮助读者掌握这一关键技能的专业书籍。本书结合了编者多年数据分析与科研绘图的实践经验，全面讲解了Python语言的基础知识及其在数据可视化中的应用。书中内容分为两大部分，共11章，结构合理，层次分明。
99套数据可视化大屏（含源码
06-11
HTML/CSS的大屏数据可视化集合案例源码（99套）数据可视化集合。 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合，76套数据可视化源码，25套数据可视化源码。数据都是...
数据可视化课程设计大作业echarts特种设备综合监管数据可视化大屏源码.zip
06-17
数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化...
Echarts大屏数据可视化集合数据可视化集合案例源码 .zip
05-22
Echarts的大屏数据可视化集合数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
数据可视化大屏数据显示模板html.zip
05-27
数据可视化大屏数据显示模板html。包含：智慧医疗/大数据医疗。智慧运维可视化监控管理大屏模板。智慧城市。智慧运维可视化监控管理大屏模板。智慧政务。智慧运维可视化监控管理大屏模板。智慧气象/气象预报大数据...
基于微信小程序的新生报到系统设计与实现.docx
09-13
基于微信小程序的新生报到系统设计与实现.docx
基于java的电商平台的设计与实现.docx
09-13
基于java的电商平台的设计与实现.docx
基于java的大学生智能消费记账系统的设计与实现.docx
09-13
基于java的大学生智能消费记账系统的设计与实现.docx
基于java的植物健康系统设计与实现.docx
09-13
基于java的植物健康系统设计与实现.docx
weixin151云匹面粉直供微信小程序+springboot.rar
09-13
所有源码，都可正常运行
计算2296傅奕群.html
最新发布
09-14
计算2296傅奕群.html
基于java的手机商城设计与开发设计与实现.docx
09-13
基于java的手机商城设计与开发设计与实现.docx
weixin133学生活动管理系统+ssm.rar
09-13
所有源码，都可正常运行
MDK软件Keil 5.21a版本
09-13
MDK软件Keil 5.21a版本安装包和安装教程
多维数据可视化技术探讨
"该文档是关于多维数据可视化的技术综述，由任东怀和胡俊撰写，探讨了如何有效地将多维数据转化为可视化形式，以增强数据的理解性和可信度。文章着重介绍了数据挖掘可视化的基本概念，以及针对几何问题的主要可视化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值