pyecharts + Flask&Django，該來的總是要來的
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-8nfrom __future__ import unicode_literalsnnfrom pyecharts import Bar, Scatter3Dnfrom pyecharts import Pagennnpage = Page() # step 1nn# barnattr = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]nv1 = [5, 20, 36, 10, 75, 90]nv2 = [10, 25, 8, 60, 20, 80]nbar = Bar("柱狀圖數據堆疊示例")nbar.add("商家A", attr, v1, is_stack=True)nbar.add("商家B", attr, v2, is_stack=True)npage.add(bar) # step 2nn# scatter3Dnimport randomndata = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]nrange_color = [#313695, #4575b4, #74add1, #abd9e9, #e0f3f8, #ffffbf,n #fee090, #fdae61, #f46d43, #d73027, #a50026]nscatter3D = Scatter3D("3D 散點圖示例", width_=1200, height=600)nscatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)npage.add(scatter3D) # step 2nnpage.render() # step 3n
效果
當然，多張圖也是可以的
pyecharts + Flask 篇
本指南會以一個小的 Flask 項目為例，說明如何在 Flask 中使用 pyecharts。請確保你已經安裝 Flask，還沒安裝請執行 pip install flask 或其他方式安裝。
Step 0: 首先新建一個 Flask 項目
- Linux/macos 系統
$ mkdir flask-echartsn$ cd flask-echartsn$ mkdir templatesn
- Windows 系統新建一個 flask-echarts 文件夾，在其下新建 templates 子文件夾。
Step 1: 為項目提供自己的模板
將下面 html 模板代碼保存為 pyecharts.html 文件並移至上一步新建的 templates 文件夾中。
<!DOCTYPE html>n<html>nn<head>n <meta charset="utf-8">n <title>ECharts</title>n <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>n <script src="http://oog4yfyu0.bkt.clouddn.com/echarts-gl.js"></script>n <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>n <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>n <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>n</head>nn<body>n {{myechart|safe}}n</body>nn</html>n
Step 2: 調用 chart_instance.render_embed() 方法渲染圖表
請將下面的代碼保存為 server.py 文件並移至項目的根目錄下。
from flask import Flask, render_templatenapp = Flask(__name__)nnn@app.route("/")ndef hello():n return render_template(pyecharts.html, myechart=scatter3d())nnndef scatter3d():n from pyecharts import Scatter3Dnn import randomn data = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]n range_color = [#313695, #4575b4, #74add1, #abd9e9, #e0f3f8, #ffffbf,n #fee090, #fdae61, #f46d43, #d73027, #a50026]n scatter3D = Scatter3D("3D scattering plot demo", width_=1200, height=600)n scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)n return scatter3D.render_embed()n
此時 flask-echarts 目錄下為
├── server.pyn└── templatesn └── pyecharts.htmln
Step 3: 運行項目
Linux/macos 系統
$ export FLASK_APP=server.pyn$ flask runn* Serving Flask app "server"n* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)n
Windows 系統
$ set FLASK_APP=server.pyn$ flask runn* Serving Flask app "server"n* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)n
效果
可以看到，在 Flask app 中加入 pyecharts 圖表只需要簡單的幾個步驟而已，歡迎嘗試更多的圖表類型。
pyecharts + Django 篇
本指南按照 Django 官方教程，通過完成一個 Django 小項目來說明如何在 Django 中使用 pyecharts。如果對 Django 還不太熟悉的開發者，可仔細閱讀官方提供的最新文檔。
Step 0: 使用新的 virtualenv 環境
建議開發者使用 1.11.4 版本的 Django
$ virtualenv --no-site-packages pyecharts-envn$ source pyecharts-env/bin/activaten$ pip install django==1.11.4n$ pip install pyechartsn
Step 1: 新建一個 django 項目
$ django-admin startproject myechartsiten
創建一個應用程序
$ python manage.py startapp myfirstvisn$ lsndb.sqlite3 manage.py myechartsite myfirstvisn
在 myechartsite/settings.py 中註冊應用程序
# myechartsite/settings.pyn...nINSTALLED_APPS = [n django.contrib.admin,n django.contrib.auth,n django.contrib.contenttypes,n django.contrib.sessions,n django.contrib.messages,n django.contrib.staticfiles,n myfirstvis # <---n]n...n
我們先編輯 urls.py.這文件在 Django 里的功能是把前段的 HTTP 需求和後台服務函數掛鉤。在 Step3，我們再引入後端服務函數
# myfirstvis/urls.pynfrom django.conf.urls import urlnnfrom . import viewsnnurlpatterns = [n url(r^$, views.index, name=index),n]n
在 myechartsite/urls.py 中新增 myfirstvis.urls
myechartsite/urls.pynfrom django.conf.urls import include, urlnfrom django.contrib import adminnnurlpatterns = [n url(r^admin/, admin.site.urls),n url(rmyfirstvis/, include(myfirstvis.urls)) # <---n]n
Step 2: 為項目提供自己的模板
前面的步驟是按照 tutorial part 1，接下來我們跳到 tutorial part 3
Linux/macos 系統
$ mkdir templates/myfirstvis -pn
Windows 系統
在 myfirstvis 目錄下，新建 templates/myfirstvis 子目錄
myfirstvis 目錄
─ myfirstvisn ├── admin.pyn ├── apps.pyn ├── __init__.pyn ├── migrationsn │ ├── __init__.pyn ├── models.pyn ├── templatesn │ └── myfirstvisn │ └── pyecharts.htmln ├── tests.pyn ├── urls.pyn └── views.pyn
將下面 html 模板代碼保存為 pyecharts.html，請確保 pyecharts.html 文件的絕對路徑為 <project root>/myfirstvis/templates/myfirstvis
<!-- myfirstvis/templates/myfirstvis/pyecharts.html -->n<!DOCTYPE html>n<html>nn<head>n <meta charset="utf-8">n <title>ECharts</title>n <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>n <script src="http://oog4yfyu0.bkt.clouddn.com/echarts-gl.js"></script>n <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>n <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>n <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>n</head>nn<body>n {{myechart|safe}}n</body>nn</html>n
Step 3: 處理視圖功能部分
將下列代碼保存到 myfirstvis/views.py 中。
# myfirstvis/views.pynfrom __future__ import unicode_literalsnfrom django.http import HttpResponsenfrom django.template import loadernnndef index(request):n template = loader.get_template(myfirstvis/pyecharts.html)n context = {nt "myechart": line3d()n }n return HttpResponse(template.render(context, request))nnndef line3d():n from pyecharts import Line3Dnn import mathn _data = []n for t in range(0, 25000):n _t = t / 1000n x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)n y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)n z = _t + 2.0 * math.sin(75 * _t)n _data.append([x, y, z])n range_color = [#313695, #4575b4, #74add1, #abd9e9, #e0f3f8, #ffffbf,n #fee090, #fdae61, #f46d43, #d73027, #a50026]n line3d = Line3D("3D line plot demo", width_=1200, height=600)n line3d.add("", _data, is_visualmap=True, visual_range_color=range_color, visual_range=[0, 30],n is_grid3D_rotate=True, grid3D_rotate_speed=180)n return line3d.render_embed()n
Step 4: 運行項目
$ cd myechartsiten$ python manage.py runservernnYou have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.nRun python manage.py migrate to apply them.nnAugust 08, 2017 - 05:48:38nDjango version 1.11.4, using settings myechartsite.settingsnStarting development server at http://127.0.0.1:8000/nQuit the server with CONTROL-C.n
訪問 http://localhost:8000/myfirstvis/，你就可以看到酷炫的 3D 圖了
看到了吧，只需要簡單的幾步就可以使用 pyecharts 創建可視化的圖表。Django 官方教程需要七步的這裡我們三步就搞定了。
Github 地址：https://github.com/chenjiandongx/pyecharts
推薦閱讀：