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. 谈谈Java常用类库中的设计模式 - Part Ⅱ

    概述 本系列上一篇:建造者.工厂方法.享元.桥接 本文介绍的设计模式(建议按顺序阅读): 适配器 模板方法 装饰器 相关缩写:EJ - Effective Java Here We Go 适配器 (A ...

  2. 基于web网站项目的性能测试结果分析

    业务背景: 最近公司研发了一款对并发要求比较高的web项目,需要对其压力测试,模拟线上可能存在的问题,这个过程中遇到一些很多问题,这里重新梳理一下思路,希望能给遇到同样问题的小伙伴提供一个参考. 工具 ...

  3. Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现

    在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...

  4. Kali中密码暴力破解工具hydra的使用

    前言 hydra是著名黑客组织thc的一款开源的暴力破解密码工具,功能非常强大,kali下是默认安装的,几乎支持所有协议的在线破解.密码能否破解,在于字典是否强大.本文仅从安全角度去讲解工具的使用,请 ...

  5. 15.DRF-分页

    Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...

  6. JDK开发环境的搭建和环境变量的配置

    首先博主先说一下JDK.JRE.JVM的区别和联系.我们正常运行程序的话只需安装JRE就行啦,如果要编译运行Java程序就得需要JKD下的bin目录下的编译工具. JDK -- java develo ...

  7. Jenkins入门教程之linux下安装配置jenkins（一）

    https://blog.csdn.net/zjh_746140129/article/details/80835866

  8. Mariadb之事务隔离级别

    上一篇我们聊到了mariadb的锁,以及怎么手动加锁和解锁等等,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13196905.html:今天我们来聊一聊mar ...

  9. 主线程用afxBeginThread()创建多个线程安全退出的办法

    HANDLE hand[]; CCriticalSection m_crisecoin; CEvent m_event; struct Student { int nNO; int nYear; CW ...

  10. 【秒懂Java】【第1章_初识Java】04_学习资料

    为了学到更多的新知识,我们经常会去网上搜索各种学习资料.或者,在学习.工作过程中遇到了解决不了的问题,我们也会去网上搜索答案(比如百度.谷歌一下).这篇文章,主要想跟大家聊聊关于学习资料的选择. 建议 ...