数据可视化

一、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 sqlite3app = 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/140962.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Linux 线程同步、互斥锁、避免死锁、条件变量

Linux 线程同步、互斥锁、避免死锁、条件变量

1. 线程同步概述 线程同步定义 线程同步&#xff0c;指的是控制多线程间的相对执行顺序&#xff0c;从而在线程间正确、有序地共享数据&#xff0c;以下为线程同步常见使用场合。 多线程执行的任务在顺序上存在依赖关系线程间共享数据只能同时被一个线程使用 线程同步方法 …
阅读更多...
【性能测试】JMeter：集合点，同步定时器的应用实例！

【性能测试】JMeter：集合点，同步定时器的应用实例！

一、集合点的定义 在性能测试过程中&#xff0c;为了真实模拟多个用户同时进行操作以度量服务器的处理能力&#xff0c;可以考虑同步虚拟用户以便恰好在同一时刻执行操作或发送请求。 通过插入集合点可以较真实模拟多个用户并发操作。 (注意&#xff1a;虽然通过加入集合点可…
阅读更多...
安全防御第二次作业

安全防御第二次作业

1. 防火墙支持那些NAT技术&#xff0c;主要应用场景是什么&#xff1f; 防火墙支持几乎所有的NAT技术&#xff0c;包括源NAT、目标NAT、双向NAT等&#xff0c;主要应用场景是保护内部网络免受外部网络的攻击 NAT技术可以将IP数据报文头中的IP地址转换为另一个IP地址&#xff…
阅读更多...
JMeter：接口测试基础介绍

JMeter：接口测试基础介绍

一、什么是接口 接口是非常抽象的概念&#xff0c;先来看下中国最大的综合性辞典《辞海》是怎样定义接口的&#xff1a; 两个不同系统或系统中两个不同特性部分的交接部分。一般分硬件接口和软件接口两种。前者是为连接计算机各部分之间、计算机与计算机之间、计算机与外部系统…
阅读更多...
Linux离线安装elasticsearch|header|kibna插件最详细

Linux离线安装elasticsearch|header|kibna插件最详细

1.准备软件安装包 [hadoophost152 elasticsearch]$ ll -rw-r--r--. 1 hadoop hadoop 515807354 9月 23 23:40 elasticsearch-8.1.1-linux-x86_64.tar.gz -rw-r--r--. 1 hadoop hadoop 1295593 9月 23 23:48 elasticsearch-head-master.tar.gz -rw-r--r--. 1 hadoop hadoop…
阅读更多...
SSRF漏洞

SSRF漏洞

Server-Side Request Forgery:服务器端请求伪造 目标&#xff1a;网站的内部系统 形成的原因 攻击者构造形成由服务器端发起请求的译者安全漏洞。 由于服务端提供了从其他服务器应用获取数据的功能&#xff0c;且没有对目标地址做过滤与限制。比如从指定URL地址获取网页文本内…
阅读更多...
Mybatis-分页插件

Mybatis-分页插件

Mybatis-分页插件 前言一、分页插件的使用步骤1.添加依赖2.配置分页插件3. 分页插件的使用 前言 可以通过分页插件在实现以下前端样式时更加方便&#xff1a; 首页 上一页 2 3 4 5 6 下一页 末页 limit index,pageSize pageSize&#xff1a;每页显示的条数 pageNum&#xff…
阅读更多...
RASP初识

RASP初识

需要了解的东西. 是什么 拦截日志&#xff1a;rasp/logs/alarm/alarm.log RASP&#xff08;Runtime application self-protection&#xff09;运行时应用自我保护。 官方英译应用程序不应将大部分运行时保护委托给外部设备。应用程序应该能够自我保护&#xff08;即&#xf…
阅读更多...
如何进行销售漏斗管理?

如何进行销售漏斗管理?

本文将为大家讲解&#xff1a;如何进行销售漏斗管理&#xff1f; 销售漏斗管理是现代销售管理的核心概念之一。它将销售过程分解为一系列阶段&#xff0c;从而帮助销售团队更有效地跟踪和管理潜在客户。本文将深入探讨销售漏斗管理的方法&#xff0c;并结合简道云CRM的实际应用…
阅读更多...
LeetCode 494.目标和 （动态规划 + 性能优化）二维数组 压缩成 一维数组

LeetCode 494.目标和 （动态规划 + 性能优化）二维数组 压缩成 一维数组

494. 目标和 - 力扣&#xff08;LeetCode&#xff09; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2…
阅读更多...
Java中如何将String类型的2023年09月21日这个值变成DATE相关的类型

Java中如何将String类型的2023年09月21日这个值变成DATE相关的类型

Java中如何将String类型的2023年09月21日这个值变成DATE 可以通过使用Java中的SimpleDateFormat类完成。以下是一个例子&#xff1a; import java.text.SimpleDateFormat; import java.text.ParseException; import java.util.Date;public class Main {public static void ma…
阅读更多...
Linux动态库

Linux动态库

定义&#xff1a;动态函数库&#xff0c;是在程序执行时动态&#xff08;临时&#xff09;由目标程序去调用 优点&#xff1a; 调用时不复制&#xff0c;程序运行时动态加载到内存&#xff0c;供程序调用&#xff0c;系统只加载一次&#xff0c;多个程序可以共用&#xff0c;…
阅读更多...
大厂面试之算法篇

大厂面试之算法篇

目录 前言 算法对于前端来说重要吗&#xff1f; 期待你的答案 算法 如何学习算法 算法基础知识 时间复杂度 空间复杂度 前端 数据结构 数组 最长递增子序列 买卖股票问题 买卖股票之交易明细 硬币找零问题 数组拼接最小值 奇偶排序 两数之和 三数之和 四数之…
阅读更多...
9.19号作业

9.19号作业

2> 完成文本编辑器的保存工作 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QFontDialog> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include <QColor&g…
阅读更多...
Python 打印素数

Python 打印素数

"""打印素数介绍&#xff1a;素数是指只有两个正因数&#xff08;1和它本身&#xff09;的自然数&#xff0c;而且必须大于1。例如&#xff1a;2、3、5、7、11、13、17、19、23、29等等都是素数。小于2的数不是素数&#xff0c;因为它没有两个正因数。例如&…
阅读更多...
对话ChatGPT：AIGC时代下，分布式存储的应用与前景

对话ChatGPT：AIGC时代下，分布式存储的应用与前景

随着科技的飞速发展&#xff0c;我们正步入一个被称为AIGC时代的全新阶段&#xff0c;人工智能、物联网、大数据、云计算成为这个信息爆炸时代的主要特征。自2022年11月以来&#xff0c;ChatGPT的知名度迅速攀升&#xff0c;引发了全球科技爱好者的极大关注&#xff0c;其高超的…
阅读更多...
java框架-Springboot3-web开发

java框架-Springboot3-web开发

文章目录 自动配置默认效果WebMvcAutoConfigurationWebMvcConfigurer接口静态资源访问首页Favicon缓存 自定义静态资源路径1、配置方式2、代码方式 路径匹配规则内容协商默认支持json配置支持xml内容协商原理自定义支持ymal 模板引擎模板引擎Thymeleaf整合基础语法遍历判断属性…
阅读更多...
静态资源的动态引入

静态资源的动态引入

有常用的2种方式&#xff1a; 1、css中的静态路径 2、img中的src静态路径 运行的环境是打包后的图片路径&#xff0c;而打包后的图片通常会生成一个文件指纹&#xff0c;而我们在写代码时&#xff0c;写的是源码中的路径和文件名&#xff0c;如果是静态路径&#xff0c;则会自动…
阅读更多...
升级iOS17后可以降级吗？iOS17退回iOS16方法教程分享

升级iOS17后可以降级吗？iOS17退回iOS16方法教程分享

iOS 17已上线几天&#xff0c;从网上用户的反馈和媒体机构的报告来看&#xff0c;iOS17系统对旧机型来说并不友好&#xff0c;除了电池续航下降以外&#xff0c;占用大量储存空间&#xff0c;BUG也不少。 苹果于 9 月 7 日发布了 iOS 16.6.1 版本&#xff0c;如果升级iOS17后发…
阅读更多...
What is the difference between Parseval‘s theorem and Plancherel Theorem

What is the difference between Parseval‘s theorem and Plancherel Theorem

Plancherel定理是调和分析里的一个结论, 最早由Michel Plancherel证明, 其可表述为 对同时属于 L 1 ( R ) L^{1}(R) L1(R) 和 L 2 ( R ) L^{2}(R) L2(R) 的函数f来说,其傅立叶变换F属于 L 2 ( R ) L^{2}(R) L2(R) ,且傅立叶变换是等距变换.数学表述为&#xff1a; ∥ f ^ ∥ 2…
阅读更多...
最新文章

Copyright @ 2022~2023