flask+pyecharts 前端显示地理图表

最新推荐文章于 2023-09-26 15:34:07 发布

pythoner_116

最新推荐文章于 2023-09-26 15:34:07 发布

阅读量1.3k

点赞数 1

分类专栏：实战项目日常踩坑

本文链接：https://blog.csdn.net/qq_43548498/article/details/104854655

版权

实战项目同时被 2 个专栏收录

9 篇文章

订阅专栏

日常踩坑

6 篇文章

订阅专栏

本文介绍如何使用PyEcharts和Flask框架创建一个动态图表应用，通过前后端交互展示中国地图上的数据。首先在PyCharm中创建Flask项目，接着在templates目录下编写index.html页面引入必要的JS库，实现地图数据的获取与渲染。后端代码通过随机生成的数据填充地图，并通过HTTP请求返回给前端。最终，用户可通过本地服务器访问并查看动态更新的地图图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建flask项目
pycharm可以选择直接创建
在这里插入图片描述
在模板文件夹下 templates 创建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
</head>
<body>
    <div id="bar" style="width:1000px; height:500px;"></div>  
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/barChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
    </script>
</body>
</html>

后端代码 app.py

from random import randrange

from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar, Geo, Map
from pyecharts.charts import Bar
from pyecharts.faker import Faker

app = Flask(__name__, static_folder="templates")


def bar_base() -> Geo:
    c = (
        Geo()
            .add_schema(maptype="china")
            .add("geo", [list(z) for z in zip(Faker.provinces, Faker.values())])
            .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
            .set_global_opts(
            visualmap_opts=opts.VisualMapOpts(is_piecewise=True),
            title_opts=opts.TitleOpts(title="Geo-VisualMap（分段型）"),
        )
    )
    return c


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()


if __name__ == "__main__":
    app.run()