【Python】Flask上部署Echart关系图

【Python】Flask上部署Echart关系图

最近需要做一些数据可视化，想做成web，并可以动态展示之类的，于是想到了Echart，上面有许多炫酷的可视化案例，看中一个关系图，并将部署到Flask上。

一，准备工作
1，创建一个Flask项目，可以参考：https://blog.csdn.net/qq_36022260/article/details/79008520。不过社区版和专业版的创建方式不同，专业版可以使用模板demo，而社区版只能自己创建相应的文件夹。
需要创建一个【static】和【templates】这两个文件夹，并创建一个入口程序文件，目录如下，

选择创建之后一个简易的Flask项目就出现在我们眼前，flask_main是个入口程序，还有一个static的静态目录，templates是模板存放的位置
2，从Echart下载对应的js文件，下载地址：https://www.echartsjs.com/zh/download.html。可以定制自己需要的图形的js文件

这里需要再多选择关系图，然后下载，

除此之外，还需要其他三个文件，不然运行后会报错，已经将所需要的文件打包上传百度网盘：https://pan.baidu.com/s/16P_CiHgShJsxiIpZlUhhWQ，需要的自取。

二，部署
1，从Echart上下载对用的模板demo,

将下载的html文件复制到Flask项目的【templates】文件夹下，将另外四个配置文件复制到【static】文件夹下，如图：

2，修改下载的模板demo，将对应的配置文件添加进入。

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，就可以打开刚才那个关系图。

最后，分享一个小技巧，Chrome浏览器清除页面js文件缓存的方法，这样可以修改js后就不会受到缓存的影响。https://blog.csdn.net/chenlongjs/article/details/82664000，可以参考这篇博客进行设置。

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