Flask 小而靈活的Python Web開發神器,半小時即可入門。
ECharts 使用 JavaScript 編寫的開源可視化庫,涵蓋各行業圖表,滿足各種需求,重點是開源免費。
Flask+Echarts 人見人愛,花見花開
一、先來個案例安利一下
1、項目目錄結構
2、demo.py 實現
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("echarts_demo.html")
if __name__ == '__main__':
app.run(debug=True)
3、echarts_demo.html實現
以下內容只需要瞭解格式,拷貝官網實現就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts-Demo</title>
<script src="/static/echarts.js"></script>
</head>
<body>
<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>
</body>
</html>
從上述案例中可以看出來Echart實現主要在echarts_demo.html文件中
需要以下幾個流程
a、引入echarts.js
<script src="/static/echarts.js"></script>
b、創建圖標繪製元素,本案例中繪製在
<div id="main" style="width: 600px;height:400px;"></div>
c、初始化圖表實例
var myChart = echarts.init(document.getElementById('main'));
d、爲圖表添加配置與數據
var option = {
title: {
text: 'ECharts 入門示例'
},
...
};
f、繪製圖表
myChart.setOption(option);
來看看效果
通過以上Demo實現一個基本效果沒問題了,是時候來研究一下ECharts相關概念了
二、相關概念
echarts 實例
a、一個網頁中可以創建多個 echarts 實例
b、每個 echarts 實例獨佔一個 DOM 節點。
系列(series)
a、系列(series)是指:一組數值以及他們映射成的圖。
b、一個系列包含的要素至少有:一組數值、圖表類型(series.type)、以及其他的關於這些數據如何映射成圖的參數。
echarts 裏系列類型(series.type)就是圖表類型。系列類型(series.type)至少有:line(折線圖)、bar(柱狀圖)、pie(餅圖)、scatter(散點圖)、graph(關係圖)、tree(樹圖)…
組件(component)
在系列之上,echarts 中各種內容,被抽象爲“組件”。
例如,echarts 中至少有這些組件:
xAxis(直角座標系 X 軸)、yAxis(直角座標系 Y 軸)、grid(直角座標系底板)、angleAxis(極座標系角度軸)、radiusAxis(極座標系半徑軸)、polar(極座標系底板)、geo(地理座標系)、dataZoom(數據區縮放組件)、visualMap(視覺映射組件)、tooltip(提示框組件)、toolbox(工具欄組件)、series(系列)、…
用 option 描述圖表
echarts 的使用者,使用 option 來描述其對圖表的各種需求,包括:
有什麼數據、要畫什麼圖表、圖表長什麼樣子、含有什麼組件、組件能操作什麼事情等等。
簡而言之,option 表述了:
數據、數據如何映射成圖形、交互行爲。
當然啦,對於這些概念相關最好結合案例驗證下
三、 來一波案例效果
只需要結合官方案例效果+自己數據即可實現特定需求