一直很喜歡百度的Echarts，可視化真的很炫酷。雖然有pyecharts庫，但我至今沒用成功過。Echarts酷炫的功能主要是javascript起做用，想到以前學過Flask框架（Python的Web框架），將Echarts嵌套進Flask的html模板中，看看可否正常運行。javascript
Echarts簡介
ECharts，一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。html
豐富的圖表類型
ECharts 提供了常規的折線圖，柱狀圖，散點圖，餅圖，K線圖，用於統計的盒形圖，用於地理數據可視化的地圖，熱力圖，線圖，用於關係數據可視化的關係圖，treemap，多維數據可視化的平行座標，還有用於 BI 的漏斗圖，儀表盤，而且支持圖與圖之間的混搭。java
深度的交互式數據探索
交互是從數據中發掘信息的重要手段。「總覽爲先，縮放過濾按需查看細節」是數據可視化交互的基本需求。python
大數據量的展示
藉助 Canvas 的能力，ECharts 在散點圖中可以輕鬆展示上萬甚至上十萬的數據。下面的微博簽到圖中就展示了 100k+ 的簽到數據。web
動態數據
ECharts 由數據驅動，數據的改變驅動圖表展示的改變。所以動態數據的實現也變得異常簡單，只須要獲取數據，填入數據，ECharts 會找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。配合 timeline 組件可以在更高的時間維度上去表現數據的信息。flask
...瀏覽器
總之Echarts很炫酷很厲害。微信
實戰
項目文件目錄app
|-動態直方圖
---demo.py
---static //存放echarts.js文件
|--- echarts.min.js
---templates //html模板
|--- my_template.html
demo.py
from flask import Flask,render_template,url_for app = Flask(__name__)
@app.route('/')
def my_echart(): return render_template('my_template.html')
if __name__ == "__main__": app.run(debug = True)
5分鐘上手ECharts
引入Echarts
ECharts引入方式很簡單，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。echarts
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script>
</head>
</html>
繪製一個簡單的圖表
在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。
<body> <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div>
</body>
而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js 這裏使用flask的url_for--> <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body> <!-- 爲ECharts準備一個具有大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);
</script>
</body>
</html>
打開demo.py運行，點擊console中的連接 http://127.0.0.1:5000/ 就能夠看到咱們想要的動態圖表。
滑動鼠標炫富於直方圖上，動態彈出具體數據
項目源代碼：
連接: https://pan.baidu.com/s/1qYBdRS4 密碼: dw7q
參考Echarts文檔
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
本文分享自微信公衆號 - 大鄧和他的Python（DaDengAndHisPython）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。