数据可视化

凹凸曼说我是怪兽

已于 2023-09-18 15:51:18 修改

阅读量430

点赞数

分类专栏： Python 文章标签：数据可视化

于 2023-09-17 16:14:15 首次发布

本文链接：https://blog.youkuaiyun.com/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"

最低0.47元/天解锁文章