Flask和Echarts简单实现_flask echarts

作者：小丑西瓜9 | 2024-02-25 23:15:24

踩

flask echarts

Flask和Echarts简单实现

1.新建一个Flask项目

2.导入内容到项目

2.1导入html和assets到指定目录

2.2将html内的路径替换（选中内容Ctrl+R）

将assets添加到所有路径中

2.3将数据库文件复制到venv

2.4将数据库导入项目

3.在首页的对应标签上加入超链接

在对应的内容上加入超链接

4.Echarts应用

4.1将官网下载的Echarts的js导入项目相应路径

4.2在相应的页面引入Echarts文件

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="static/assets/js/echarts.min.js"></script> <!--需要将路径改为js文件相应路径-->
</head>
</html>
1
2
3
4
5
6
7
8

4.3绘图前为Echarts准备一个具备宽高的DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
1
2
3
4

4.4通过官网的绘制下载实例

4.5将下载好的html复制到templates下，将对应的javascript复制到网页

4.6将id修改为一致

4.源代码

app.py

@app.route('/score')
def score():
    score = []#评分
    num = []#评分统计数量
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = "select rating,count(rating) from movie250 group by rating"
    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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

score.html

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

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

  <title>豆瓣Top250数据可视化<1
2
3
4
5
6
7

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/142137