pyecharts + Flask&Django,该来的总是要来的

web开发

浏览数:1,544

2019-2-22

AD:资源代下载服务

pyecharts 又更新啦,新版本为 0.1.9.4。现在已经集成 Flask&Django 了。

先介绍新增加的两个参数 xaxis_type, yaxis_type,用于指定直角坐标系中坐标轴的类型。

如,散点图中指定 x 坐标轴为类目轴(默认为数值轴)

折线图中指定 y 坐标轴为对数轴(默认为数值轴)

再来介绍个新功能,如果想在一个网页内按顺序展示多个图的话,推荐使用 Page() 类。

使用步骤

1 、引入 Page

2、使用 Page.add() 增加图

3、使用 Page.render() 渲染网页

Tip: 词云图和水球图除外,其余图表均可正常显示

#coding=utf-8
from __future__ import unicode_literals

from pyecharts import Bar, Scatter3D
from pyecharts import Page


page = Page()         # step 1

# bar
attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
bar = Bar("柱状图数据堆叠示例")
bar.add("商家A", attr, v1, is_stack=True)
bar.add("商家B", attr, v2, is_stack=True)
page.add(bar)         # step 2

# scatter3D
import random
data = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]
range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
               '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
scatter3D = Scatter3D("3D 散点图示例", width=1200, height=600)
scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
page.add(scatter3D)  # step 2

page.render()        # step 3

效果

当然,多张图也是可以的

pyecharts + Flask 篇

本指南会以一个小的 Flask 项目为例,说明如何在 Flask 中使用 pyecharts。请确保你已经安装 Flask,还没安装请执行 pip install flask 或其他方式安装。

Step 0: 首先新建一个 Flask 项目

  • Linux/macos 系统
$ mkdir flask-echarts
$ cd flask-echarts
$ mkdir templates
  • Windows 系统
    新建一个 flask-echarts 文件夹,在其下新建 templates 子文件夹。

Step 1: 为项目提供自己的模板

将下面 html 模板代码保存为 pyecharts.html 文件并移至上一步新建的 templates 文件夹中。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts-gl.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>
</head>

<body>
  {{myechart|safe}}
</body>

</html>

Step 2: 调用 chart_instance.render_embed() 方法渲染图表

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

from flask import Flask, render_template
app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('pyecharts.html', myechart=scatter3d())


def scatter3d():
    from pyecharts import Scatter3D

    import random
    data = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]
    range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
                   '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    scatter3D = Scatter3D("3D scattering plot demo", width=1200, height=600)
    scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
    return scatter3D.render_embed()

此时 flask-echarts 目录下为

├── server.py
└── templates
    └── pyecharts.html

Step 3: 运行项目

Linux/macos 系统

$ export FLASK_APP=server.py
$ flask run
* Serving Flask app "server"
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Windows 系统

$ set FLASK_APP=server.py
$ flask run
* Serving Flask app "server"
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

效果

可以看到,在 Flask app 中加入 pyecharts 图表只需要简单的几个步骤而已,欢迎尝试更多的图表类型。

pyecharts + Django 篇

本指南按照 Django 官方教程,通过完成一个 Django 小项目来说明如何在 Django 中使用 pyecharts。如果对 Django 还不太熟悉的开发者,可仔细阅读官方提供的最新文档。

Step 0: 使用新的 virtualenv 环境

建议开发者使用 1.11.4 版本的 Django

$ virtualenv --no-site-packages pyecharts-env
$ source pyecharts-env/bin/activate
$ pip install django==1.11.4
$ pip install pyecharts

Step 1: 新建一个 django 项目

$ django-admin startproject myechartsite

创建一个应用程序

$ python manage.py startapp myfirstvis
$ ls
db.sqlite3      manage.py       myechartsite    myfirstvis

在 myechartsite/settings.py 中注册应用程序

# myechartsite/settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myfirstvis'  # <---
]
...

我们先编辑 urls.py.这文件在 Django 里的功能是把前段的 HTTP 需求和后台服务函数挂钩。在 Step3,我们再引入后端服务函数

# myfirstvis/urls.py
from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

在 myechartsite/urls.py 中新增 ‘myfirstvis.urls’

myechartsite/urls.py
from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'myfirstvis/', include('myfirstvis.urls'))  # <---
]

Step 2: 为项目提供自己的模板

前面的步骤是按照 tutorial part 1,接下来我们跳到 tutorial part 3

Linux/macos 系统

$ mkdir templates/myfirstvis -p

Windows 系统
在 myfirstvis 目录下,新建 templates/myfirstvis 子目录

myfirstvis 目录

─ myfirstvis
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    │   ├── __init__.py
    ├── models.py
    ├── templates
    │   └── myfirstvis
    │       └── pyecharts.html
    ├── tests.py
    ├── urls.py
    └── views.py

将下面 html 模板代码保存为 pyecharts.html,请确保 pyecharts.html 文件的绝对路径为 <project root>/myfirstvis/templates/myfirstvis

<!-- myfirstvis/templates/myfirstvis/pyecharts.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts-gl.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>
</head>

<body>
  {{myechart|safe}}
</body>

</html>

Step 3: 处理视图功能部分

将下列代码保存到 myfirstvis/views.py 中。

# myfirstvis/views.py
from __future__ import unicode_literals
from django.http import HttpResponse
from django.template import loader


def index(request):
    template = loader.get_template('myfirstvis/pyecharts.html')
    context = {
        "myechart": line3d()
    }
    return HttpResponse(template.render(context, request))


def line3d():
    from pyecharts import Line3D

    import math
    _data = []
    for t in range(0, 25000):
        _t = t / 1000
        x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
        y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
        z = _t + 2.0 * math.sin(75 * _t)
        _data.append([x, y, z])
    range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
                   '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    line3d = Line3D("3D line plot demo", width=1200, height=600)
    line3d.add("", _data, is_visualmap=True, visual_range_color=range_color, visual_range=[0, 30],
               is_grid3D_rotate=True, grid3D_rotate_speed=180)
    return line3d.render_embed()

Step 4: 运行项目

$ cd myechartsite
$ python manage.py runserver

You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

August 08, 2017 - 05:48:38
Django version 1.11.4, using settings 'myechartsite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

访问 http://localhost:8000/myfirstvis/,你就可以看到酷炫的 3D 图了

看到了吧,只需要简单的几步就可以使用 pyecharts 创建可视化的图表。Django 官方教程需要七步的这里我们三步就搞定了。

Github 地址:https://github.com/chenjiandongx/pyecharts