Flask+Echarts 實現動圖圖表

01-27

公眾號: 大鄧帶你玩Python

一直很喜歡百度的Echarts，可視化真的很炫酷。雖然有pyecharts庫，但我至今沒用成功過。Echarts酷炫的功能主要是javascript起作用，想到之前學過Flask框架（Python的Web框架），將Echarts嵌套進Flask的html模板中，看看能否正常運行（只是測試能否在python上跑出來，項目比較Low B，不喜勿噴。

實戰

項目文件目錄

|-動態直方圖n ---demo.pyn ---static //存放echarts.js文件n |--- echarts.min.jsn ---templates //html模板n |--- my_template.htmln

demo.py

from flask import Flask,render_template,url_fornn#生成Flask實例napp = Flask(__name__)nn@app.route(/)ndef my_echart():nn #在瀏覽器上渲染my_templaces.html模板n return render_template(my_template.html)nnif __name__ == "__main__":n #運行項目n app.run(debug = True)n

5分鐘上手ECharts

引入Echarts

ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標籤引入。

<!DOCTYPE html>n<html>n<head>n <meta charset="utf-8">n n <script src="echarts.min.js"></script>n</head>n</html>n

繪製一個簡單的圖表

在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。

<body>n n <div id="main" style="width: 600px;height:400px;"></div>n</body>n

然後就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

<!DOCTYPE html>n<html>n<head>n <meta charset="utf-8">n <title>ECharts</title>n n <script src="{{ url_for(static, filename=echarts.min.js) }}"></script>n</head>n<body>n n <div id="main" style="width: 600px;height:400px;"></div>n <script type="text/javascript">n // 基於準備好的dom，初始化echarts實例n var myChart = echarts.init(document.getElementById(main));nn // 指定圖表的配置項和數據n var option = {n title: {n text: ECharts 入門示例n },n tooltip: {},n legend: {n data:[銷量]n },n xAxis: {n data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]n },n yAxis: {},n series: [{n name: 銷量,n type: bar,n data: [5, 20, 36, 10, 10, 20]n }]n };nn // 使用剛指定的配置項和數據顯示圖表。n myChart.setOption(option);n </script>n</body>n</html>n

打開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