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. centos7 安装 jdk8

    安装主要分为两种方式 linux中的yum命令 手动解压安装(自己下载官网jdk.tar.gz) yum 安装 可以使用yum -y list java*命令,查询可安装的版本.版本后面要带-deve ...

  2. STL容器操作

    目录 1. 数组 2. Vector 3. List 3.1. std::forward_list 4. Tuple 4.1. 运行期索引 4.2. 元组合并 4.3. 元祖遍历 5. Pair 6. ...

  3. TCP 粘包拆包

    一.什么是粘包拆包? 粘包拆包是TCP协议传输中一种现象概念.TCP是传输层协议,他传输的是“流”式数据,TCP并不知道传输是哪种业务数据,或者说,并不关心.它只是根据缓冲区状况将数据进行包划分,然后 ...

  4. Java 多线程基础（十）interrupt()和线程终止方式

    Java 多线程基础(十)interrupt()和线程终止方式 一.interrupt() 介绍 interrupt() 定义在 Thread 类中,作用是中断本线程. 本线程中断自己是被允许的:其它 ...

  5. Accelerate Framework in Swift

    介绍: 最近看到这篇文章有对Accelerate框架有一个介绍,自己也按照作者给的思路整理了一遍,也算是对这一框架的一个重新的回顾和学习,在以前研究AR先关只是的时候有接触到这个框架,赞具体里面的东西 ...

  6. robot framework使用小结（二）

    robot framework关键字驱动采用分层,结合Template做成数据驱动 我个人觉得不管是关键字驱动还是数据驱动,都是基于模块(或者是函数)的概念 新建测试案例baidu02,添加Libra ...

  7. JavaWEB实现qq邮箱发送验证码——qq1692700664

    // 随机验证码public String achieveCode() { String[] beforeShuffle = new String[] { "2", "3 ...

  8. vue中使用element2

    阻止谷歌下记住密码 当我们将input框的类型设置为密码框的时候,就会出现下面这种效果,不仅样式不统一,有的时候,密码框的上面并不是用户名,而是其他的内容,也会被强制显示为用户名: 首先需要解决样式问 ...

  9. 在linux裸机部署springBoot项目

    一.项目创建及打包 创建项目,打jar包 二.安装JDK 1.在/usr目录下床架java文件夹,将 2.下载jdk8,并上传linux服务器(/usr/java) 下载地址:https://www. ...

  10. Python实用笔记 （8）高级特性——迭代

    如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration). 比如dict就可以迭代: >>> d = {'a ...