Python+Flask+ngrok调度刷新echarts数据并部署

最新推荐文章于 2024-08-12 16:41:40 发布

饮马长城窟

最新推荐文章于 2024-08-12 16:41:40 发布

阅读量469

点赞数 1

分类专栏： python

本文链接：https://blog.csdn.net/junshan2009/article/details/113448357

版权

python 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

开发echarts网页

线上js地址，如果不能用，随便打开一个echarts浏览器进入开发者模式，找到js地址

https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js

如果想换最新的js地址，在这里看

也可以直接把js下载到本地，但是没有用cdn的线上资源方便。

比如热更新这个图表：https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0

他的本地文件是这么写的，只更新option，其他的头文件不动


<html>
<head>
    <meta charset="utf-8">
    <title>this is biaoti</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'));
        var option = {
    dataset: {
        source: [['score', 'amount', 'product'], ['89.3', '58212', 'Matcha Latte'], ['57.1', '78254', 'Milk Tea'], ['74.4', '41032', 'Cheese Cocoa'], ['50.1', '12755', 'Cheese Brownie'], ['89.7', '20145', 'Matcha Cocoa'], ['68.1', '79146', 'Tea'], ['19.6', '91852', 'Orange Juice'], ['10.6', '101852', 'Lemon Juice'], ['32.7', '20112', 'Walnut Brownie']]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
        }
    },
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
        myChart.setOption(option);

</script>
</body>
</html>

感兴趣的小伙伴，把以上代码copy一下，在自己电脑新建一个txt，粘贴进去，名字改成1.html，然后再用浏览器打开，就可以看到图表。

但是这个图表的数据我想每日更新怎么办呢？

py代码如下：

# -*-coding:utf-8-*-
import  pandas as pd

biaoti='this is biaoti'

df=pd.read_csv('xxx.csv')

dicct2=[]
for i in df.itertuples():
    dict1=[]
    dict1.append(i.score)
    dict1.append(i.amount)
    dict1.append(i.product)
    print(dict1)
    dicct2.append(dict1)

print(dicct2)

s1 = """
<html>
<head>
    <meta charset="utf-8">
    <title>%s</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'));
        var option = {
    dataset: {
        source: %s
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
        }
    },
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
        myChart.setOption(option);

</script>
</body>
</html>
"""%(biaoti,dicct2)

with open('h2_result.html', 'wb+') as f:
    f.write(s1.encode())
    f.flush()
    f.close()

只要更新这个xxx.csv文件即可，这是csv的表头。echarts的数据就会自动更新

现在遇到了一个问题，生成的是一个文件，我想分享给别人，怎么办？

如果你有云服务器，就不用往下看了，如果想用自己的电脑分享一个网址给别人，下面我教你

建立一个flask项目

打开pycahrm，新建一个项目，叫做flaskdemo

项目里面新建文件夹static

把你开发的echarts网页放在static里面

在flaskdemo文件夹下面，新建一个叫做app.py的py脚本

# -*-coding:utf-8-*-

from flask import  Flask

app=Flask(__name__,
          static_folder='./static'
          )

@app.route("/")
def index():
    return 'zhuye'

if __name__ == '__main__':

    app.run(host='0.0.0.0',port=5000)

运行这个py脚本

我们看到下面这个就是成功了

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

然后http://127.0.0.1:5000/static/1.html就可以打开你放的html文件了
但是，这个地址只有局域网能访问，如果想对外访问。往下看

如何调度上传网页呢？

在app.py里面加入upload方法。


@app.route("/static", methods=["POST", "GET"])
def upload():
    file = request.files.get('pic')
    fname2=file.filename
    if file is None:
        return "nothing found"
    file.save("static/%s"%(fname2))
    return "upload    success"

这样运行以后，我们就可以往这端口上传html文件了，

客服端怎么上传呢？看我下面的代码

import requests

url = "http://127.0.0.1:5000//static"
path= "h2.html"
files = {'pic': open(path, "rb")}
r = requests.post(url, files=files)
print(r)

打印出200就是上传成功，至此，你已经动态的刷新了echarts的数据，并且上传到服务器了，就差一个对外共享的网页地址了。

获得公众网络可以访问的网址

下载注册ngrok

https://ngrok.com/download 这里下载安装

然后去这里注册一个你rok哥的账号, 我们的目的是要那个token这里 https://dashboard.ngrok.com/auth/your-authtoken

这是我的token 1nnIwp751ucpJXj8WNwjWMPlzyk_**uHNvHCks3ePJfHTruoU

ngrok authtoken 1nnIwp751ucpJXj8WNwjWMPlzyk_**uHNvHCks3ePJfHTruoU

在命令行输入

ngrok http 5000

其中 https://136e2834e996.ngrok.io 就是你可以访问的外网地址了

任何人，只要联网，打开 https://136e2834e996.ngrok.io/static/1.html都可以看到你的echarts网页

参考文章：

https://zhuanlan.zhihu.com/p/45471645

Ngrok下载地址：备用的

链接：https://pan.baidu.com/s/16Io2OUp2zOA2rdJqXsyFNw
提取码：lijf
复制这段内容后打开百度网盘手机App，操作更方便哦

饮马长城窟

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录