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. Node.js 学习笔记（一）

    node.js说白了就是JavaScript. node.js的性能是php的86倍(大概). 在下载完后可以用命令行打开及运行.   什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留 ...

  2. PyQt中QThread多线程的正确用法【待完善】

    先贴几篇有意思的讨论 https://www.qt.io/blog/2010/06/17/youre-doing-it-wrong#commento-login-box-container https ...

  3. 色彩空间转换 rgb转ycbcr422/ycbcr422转rgb

    在图像处理过程中通常需要会对图像类型进行互相转换,在此给出两种转换的工程代码. 1.在将ycbCr422转rgb时,通常先将ycbcr422转换成ycbcr444再讲ycbcr444转成rgb 1.1 ...

  4. vc++如何知道cppdlg所关联的对话框？

    vc++ 6.0如何知道cppdlg所关联的对话框? 找a.cpp对应的a.h头文件里面找. https://blog.csdn.net/txwtech/article/details/1020824 ...

  5. 【Flutter实战】六大布局组件及半圆菜单案例

    老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...

  6. Flask框架基础功能

    引言 本文简单汇总Flask框架几大基础功能,包括: 路由系统 模板 数据库 几种常用Flask库 一个简单的Flask事例 Flask是一个基于Python,依赖Jinja2模板和WSGI服务的框架 ...

  7. 「从零单排canal 03」 canal源码分析大纲

    在前面两篇中,我们从基本概念理解了canal是一个什么项目,能应用于什么场景,然后通过一个demo体验,有了基本的体感和认识. 从这一篇开始,我们将从源码入手,深入学习canal的实现方式.了解can ...

  8. 黎活明8天快速掌握android视频教程--16_采用SharedPreferences保存用户偏好设置参数

    SharedPreferences保存的数据是xml格式,也是存在数据保存的下面四种权限: 我们来看看 我们来看看具体的业务操作类: /** * 文件名:SharedPrecences.java * ...

  9. mock api测试demo

    前言 本测试demo基于Spring框架测试,这几个月也是刚刚接触Spring的项目.如果不对的地方请多谅解. 正文 1.创建测试类,添加注解 @RunWith(SpringRunner.class) ...

  10. 发布Nuget包时遇到都意外

    准备好工具和发布教程.(这些网上都有,我就不说了,就说说我遇到都意外.) 在发布包都过程中,我给我都dll命名为Common.不知道是不是这个原因导致的我包发布上去后,程序对其引用时居然没主动引用进程 ...