Flask 前后端分离

Step 1: 新建一个 Flask 项目

$ mkdir pyecharts-flask-demo

$ cd pyecharts-flask-demo

$ mkdir templates

Step 2: 新建一个 HTML 文件

新建 HTML 文件保存位于项目根目录的 templates 文件夹，这里以如下 index.html 为例. 主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖

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>

</head>

<body>

    <div id="bar" style="width:1000px; height:600px;"></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>

Step 3: 编写 flask 和 pyecharts 代码渲染图表

请将下面的代码保存为 app.py 文件并移至项目的根目录下。

目录结构如下

sunhailindeMacBook-Pro:pyecharts_flask sunhailin$ tree -L 1

.

├── app.py

└── templates

注: 目前由于 json 数据类型的问题，无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。

app.py

from random import randrange

from flask import Flask, render_template

from pyecharts import options as opts

from pyecharts.charts import Bar

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

def bar_base() -> Bar:

    c = (

        Bar()

        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

        .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])

        .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])

        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))

    )

    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()

Step 4: 运行项目

$ python app.py

数据可视化基础专题（十五）：pyecharts 基础（二）flask 框架整合的更多相关文章

  1. 数据可视化实例（十五）：有序条形图（matplotlib，pandas）

    偏差 (Deviation) 有序条形图 (Ordered Bar Chart) 有序条形图有效地传达了项目的排名顺序. 但是,在图表上方添加度量标准的值,用户可以从图表本身获取精确信息. https ...

  2. Java15-java语法基础（十五）——内部类

    java16-java语法基础(十五)内部类 一.内部类: 可以在一个类的内部定义另一个类,这种类称为内部类. 二.内部类分为两种类型: 1.静态内部类: 静态内部类是一个具有static修饰词的类, ...

  3. 「kuangbin带你飞」专题十四 数论基础

    layout: post title: 「kuangbin带你飞」专题十四 数论基础 author: "luowentaoaa" catalog: true tags: mathj ...

  4. 二十五. Python基础(25)--模块和包

    二十五. Python基础(25)--模块和包 ● 知识框架   ● 模块的属性__name__ # my_module.py   def fun1():     print("Hello& ...

  5. 十五. Python基础(15)--内置函数-1

    十五. Python基础(15)--内置函数-1 1 ● eval(), exec(), compile() 执行字符串数据类型的python代码 检测#import os 'import' in c ...

  6. 《手把手教你》系列基础篇（八十五）-java+ selenium自动化测试-框架设计基础-TestNG自定义日志-下篇（详解教程）

    1.简介 TestNG为日志记录和报告提供的不同选项.现在,宏哥讲解分享如何开始使用它们.首先,我们将编写一个示例程序,在该程序中我们将使用 ITestListener方法进行日志记录. 2.Test ...

  7. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  8. 《手把手教你》系列基础篇（七十五）-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇（详解教程）

    1.简介 上一篇中介绍了DataProvider如何传递参数,以及和一些其他方法结合传递参数,今天宏哥接着把剩下的一些常用的也做一下简单的介绍和分享. 2.项目实战1 @DataProvider + ...

  9. Java基础之十五 泛型

    第十五章 泛型 一般的类和方法,只能使用具体的类型:要么是基本类型,要么是自定义类型.如果要编写可以应用于多种类型的代码,这种刻板的限制对代码的束缚就会很大. 在面对对象编程语言中,多态算是一种泛化机 ...

  10. 数据可视化之PowerQuery篇（四）二维表转一维表，看这篇文章就够了

    https://zhuanlan.zhihu.com/p/69187094 数据分析的源数据应该是规范的,而规范的其中一个标准就是数据源应该是一维表,它会让之后的数据分析工作变得简单高效. 在之前的文 ...

随机推荐

  1. Nice Jquery Validator 自定义规则

    规则定义方式 (1). 正则 适用于使用单个正则能搞定的验证. // 使用数组包裹正则和错误消息,规则不通过时提示该消息 mobile: [/^1[3458]\d{9}$/, '请检查手机号格式'] ...

  2. uni-app热更新

    开发工具HbuilderX开发框架 uni-app.h5+1.生成 App 资源升级包1.1.修改版本号1.2.首先,更新 manifest.json 中的版本号.比如之前是 1.0.0,那么新版本应 ...

  3. TensorFlow从0到1之TensorFlow超参数及其调整（24）

    正如你目前所看到的,神经网络的性能非常依赖超参数.因此,了解这些参数如何影响网络变得至关重要. 常见的超参数是学习率.正则化器.正则化系数.隐藏层的维数.初始权重值,甚至选择什么样的优化器优化权重和偏 ...

  4. （四）Maven项目工程目录约定

    使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java 存放项目的.java文件 src/main/resources 存放项目资源文件 ...

  5. 深入理解React：懒加载（lazy）实现原理

    目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 (1)为什么要进行代码分割? 现在前端项目基本都采用打包技术,比如 ...

  6. GitHub 热点速览 Vol.24：程序员自我增值，优雅赚零花钱

    摘要:升职加薪,出任 CTO,迎娶白富美/高帅富,走向人生巅峰是很多人的梦想.在本期的热点速览中你将了解自由作者 Easy 如何优雅赚取零花钱的方法,以及定投改变命运 -- 让时间陪你慢慢变富.说到程 ...

  7. qemu-guest-agent详解

    qemu guest agent简称qga, 是运行在虚拟机内部的一个守护程序(qemu-guest-agent.service),他可以管理应用程序,执行宿主机发出的命令. QEMU为宿主机和虚拟机 ...

  8. cc32a_demo-32dk2j_cpp_纯虚函数与抽象类-txwtech

    //32dk2j_cpp_纯虚函数与抽象类cc32a_demo-txwtech//纯虚函数是用来继承用的//纯虚函数//抽象类-抽象数据类型//*任何包含一个或者多个纯虚函数的类都是抽象类//*不要/ ...

  9. java递归遍历树结构目录

    目录实体 private int id; private int pid; private String name; 递归遍历方法 private void getTree(Menu menu ,Li ...

  10. Beta冲刺<4/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第四天(05.22) 作业正文 如下 其他参考文献 ... B ...