欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Python】Flask上部署Echart关系图

程序员文章站 2024-03-12 22:47:14
...

【Python】Flask上部署Echart关系图

最近需要做一些数据可视化,想做成web,并可以动态展示之类的,于是想到了Echart,上面有许多炫酷的可视化案例,看中一个关系图,并将部署到Flask上。
【Python】Flask上部署Echart关系图
一,准备工作
1,创建一个Flask项目,可以参考:https://blog.csdn.net/qq_36022260/article/details/79008520。不过社区版和专业版的创建方式不同,专业版可以使用模板demo,而社区版只能自己创建相应的文件夹。
需要创建一个【static】和【templates】这两个文件夹,并创建一个入口程序文件,目录如下,
【Python】Flask上部署Echart关系图
选择创建之后一个简易的Flask项目就出现在我们眼前,flask_main是个入口程序,还有一个static的静态目录,templates是模板存放的位置
2,从Echart下载对应的js文件,下载地址:https://www.echartsjs.com/zh/download.html。可以定制自己需要的图形的js文件
【Python】Flask上部署Echart关系图
这里需要再多选择关系图,然后下载,
【Python】Flask上部署Echart关系图
除此之外,还需要其他三个文件,不然运行后会报错,已经将所需要的文件打包上传百度网盘:https://pan.baidu.com/s/16P_CiHgShJsxiIpZlUhhWQ,需要的自取。

二,部署
1,从Echart上下载对用的模板demo,
【Python】Flask上部署Echart关系图
将下载的html文件复制到Flask项目的【templates】文件夹下,将另外四个配置文件复制到【static】文件夹下,如图:
【Python】Flask上部署Echart关系图
2,修改下载的模板demo,将对应的配置文件添加进入。
【Python】Flask上部署Echart关系图
3,在入口程序中,添加文件的调用,


from flask import Flask, render_template

app = Flask(__name__)
@app.route('/')
def index():
    return '<h2>Welcome to flask</h2>'


@app.route('/bar')
def show_bar():
    # return '<h2>Welcome to CookiesPool</h2>'
    return render_template("hello.html")

@app.route('/graph')
def show_graph():
    # return '<h2>Welcome to CookiesPool</h2>'
    return render_template("graph-force.html")

if __name__ == '__main__':
    app.run(port=1234)    #指定端口1234

4,运行后,打开浏览器输入http://127.0.0.1:1234/graph,就可以打开刚才那个关系图。
【Python】Flask上部署Echart关系图
最后,分享一个小技巧,Chrome浏览器清除页面js文件缓存的方法,这样可以修改js后就不会受到缓存的影响。https://blog.csdn.net/chenlongjs/article/details/82664000,可以参考这篇博客进行设置。

如有问题或者错误之处,请拍砖指出。