基于Python輕松制作一個(gè)股票K線圖網(wǎng)站

更新時(shí)間：2022年09月06日 15:44:06 作者：周蘿卜

在當(dāng)今這個(gè)人手一個(gè)?Web?服務(wù)的年代，GUI?程序還是沒(méi)有?Web?服務(wù)來(lái)的香啊。所以本文將用Python制作一個(gè)簡(jiǎn)單的股票K線圖網(wǎng)站，感興趣的可以了解一下

在前面的文章中，我們學(xué)習(xí)了如何使用 Tkinter 構(gòu)建股票數(shù)據(jù)抓取以及展示K線圖功能，雖然大致的功能已經(jīng)具備，但是在當(dāng)今這個(gè)人手一個(gè) Web 服務(wù)的年代，GUI 程序還是沒(méi)有 Web 服務(wù)來(lái)的香啊。

我們需要用到的知識(shí)包括 PyEcharts 的使用，tushare 庫(kù)獲取股票數(shù)據(jù)的方法以及 Flask 的基本用法。

獲取股票數(shù)據(jù)

我們先來(lái)看下 tushare 的使用，這個(gè)應(yīng)該是當(dāng)前最為流行的股票數(shù)據(jù)庫(kù)了吧，一行代碼，就能輕松獲取某支股票的歷史數(shù)據(jù)

import?tushare?as?ts
df?=?ts.get_hist_data('000001')
print(df)

現(xiàn)在股票的歷史數(shù)據(jù)有了，我們還需要一份股票名稱(chēng)和股票代碼的對(duì)應(yīng)表，同樣通過(guò) tushare 來(lái)獲取

stock_list?=?ts.get_stock_basics()
stock_list.reset_index(inplace=True)
stock_list[['code',?'name']].to_csv('stock_code_name.csv')

這樣就成功保存了一份股票名稱(chēng)和股票代碼的對(duì)應(yīng)數(shù)據(jù)

PyEcharts 作圖

下面再來(lái)看看如何通過(guò) PyEcharts 來(lái)制作 K 線圖，其實(shí)官網(wǎng)上的例子已經(jīng)非常具體了，我們只需要把拿到的歷史股票數(shù)據(jù)做些簡(jiǎn)單處理即可，我這里直接給我的數(shù)據(jù)處理過(guò)程

mydate?=?df[:30].index.tolist()
mydata?=?df[:30][['open',?'close',?'low',?'high']].values.tolist()


def?kline_base(mydate,?data)?->?Kline:
????c?=?(
????????Kline()
????????.add_xaxis(mydate)
????????.add_yaxis("kline",?data)
????????.set_global_opts(
????????????yaxis_opts=opts.AxisOpts(is_scale=True,
????????????????????????????????????splitarea_opts=opts.SplitAreaOpts(
????????????????????is_show=True,?areastyle_opts=opts.AreaStyleOpts(opacity=1)
????????????????),
????????????),
????????????xaxis_opts=opts.AxisOpts(is_scale=True,
????????????????????????????????????axislabel_opts=opts.LabelOpts(rotate=-30)),
????????????title_opts=opts.TitleOpts(title="Kline-基本示例"),
????????????datazoom_opts=[opts.DataZoomOpts()],
????????)
????)
????return?c

kline_base(mydate,?mydata).render_notebook()

這樣就可以得到一個(gè)不錯(cuò)的 K 線圖了

下面我們就可以著手完成 Flask 的代碼啦

構(gòu)建 Web 框架

首先我們先來(lái)完成 Web 框架的整體編寫(xiě)，為了頁(yè)面的美觀與編碼的方便，直接使用 bootstrap 來(lái)構(gòu)建前端頁(yè)面

視圖函數(shù)編寫(xiě)

首先完成初始化工作，在項(xiàng)目目錄下創(chuàng)建一個(gè) app.py 文件

from?flask?import?Flask,?render_template,?request
from?pyecharts?import?options?as?opts
from?pyecharts.charts?import?Kline
import?tushare?as?ts
import?pandas?as?pd
from?flask_bootstrap?import?Bootstrap

app?=?Flask(__name__)
bootstrap?=?Bootstrap(app)

導(dǎo)入需要用到的庫(kù)，并完成 flask app 的初始化工作。

接下來(lái)再寫(xiě)一個(gè) 404 的視圖函數(shù)，統(tǒng)一處理所有的 Not Found 頁(yè)面

@app.errorhandler(404)
def?page_not_found(e):
????return?render_template("404.html"),?404

接著我們綁定根地址到 index 視圖函數(shù)上，返回到 index.html 模板文件上

@app.route("/")
def?index():
????return?render_template("index.html")

模板編寫(xiě)

在同級(jí)目錄創(chuàng)建一個(gè) templates 文件夾，創(chuàng)建三個(gè) HTML 文件，分別為 404.html，base.html 和 index.html

base.html 是所有其他頁(yè)面 HTML 模板的母模板

{%?extends?"bootstrap/base.html"?%}

{%?block?title?%}我的股票走勢(shì)網(wǎng)站{%?endblock?%}


{%?block?navbar?%}
<div?class="navbar?navbar-inverse"?role="navigation">
????<div?class="container">
????????<div?class="navbar-header">
????????????<button?type="button"?class="navbar-toggle"?data-toggle="collapse"?data-target=".navbar-collapse">
????????????????<span?class="sr-only">Toggle?navigation</span>
????????????????<span?class="icon-bar"></span>
????????????????<span?class="icon-bar"></span>
????????????????<span?class="icon-bar"></span>
????????????</button>
????????????<a?class="navbar-brand"?href="/" rel="external nofollow"  rel="external nofollow" >Stock-Data</a>
????????</div>
????????<div?class="navbar-collapse?collapse">
????????????<ul?class="nav?navbar-nav">
????????????????<li><a?href="/" rel="external nofollow"  rel="external nofollow" >Home</a></li>
????????????</ul>
????????</div>
????</div>
</div>
{%?endblock?%}

{%?block?content?%}
<div?class="container">
????{%?block?page_content?%}
????{%?endblock?%}
</div>
{%?endblock?%}

創(chuàng)建一個(gè)導(dǎo)航欄，并定義相關(guān)的 block 內(nèi)容

接下來(lái)編寫(xiě) 404.html 文件，展示非法 url 請(qǐng)求地址時(shí)的頁(yè)面

{%?extends?"base.html"?%}

{%?block?title?%}Page?Not?Found{%?endblock?%}

{%?block?page_content?%}
<div?class="page-header">
????<h1>Not?Found</h1>
</div>
{%?endblock?%}

對(duì)于 index.html 文件，就是我們需要展示 K 線圖的頁(yè)面，我們后面再處理。

編輯主邏輯

首先編寫(xiě)一個(gè)檢查股票正確性的函數(shù)

def?check_stock(code):
????n?=?0
????l?=?[]
????stock_code?=?pd.read_csv("stock_code_name.csv",?dtype=object)
????stock_code.drop('Unnamed:?0',?axis=1,?inplace=True)
????stock_list?=?stock_code.values.tolist()
????for?i?in?stock_list:
????????if?code?in?i:
????????????n?+=?1
????????????l?=?i
????????else:
????????????continue
????return?n,?l

如果股票正確，則返回 n=1，否則返回 n=0

接下來(lái)再編寫(xiě)獲取股票數(shù)據(jù)的函數(shù)

def?get_stock_data(code,?ctime):
????df?=?ts.get_hist_data(code)
????mydate?=?df[:ctime].index.tolist()
????mydata?=?df[:ctime][['open',?'close',?'low',?'high']].values.tolist()
????return?[mydate,?mydata]

下面就是把 PyEcharts 集成到 Flask 應(yīng)用了，可以按照官方的教程走，把 PyEcharts 的樣式文件等拷貝到自己的 templates 目錄下，再編寫(xiě)一個(gè)用于調(diào)用 kline_base() 函數(shù)的視圖函數(shù)

@app.route("/Kline",?methods=['GET',?'POST'])
def?get_kline_chart():
????stock_name?=?request.form.get('stockName')
????query_time?=?request.form.get('queryTime')
????if?not?stock_name:
????????stock_name?=?'平安銀行'
????if?not?query_time:
????????query_time?=?30
????status,?stock_code?=?check_stock(stock_name)
????if?status?==?0:
????????return?'error?stock?code?or?name'
????mydate,?mydata?=?get_stock_data(stock_code[0],?int(query_time))
????c?=?kline_base(mydate,?mydata,?stock_code[1])
????return?c.dump_options()

首先通過(guò) request 變量獲取到前端傳遞過(guò)來(lái)的數(shù)據(jù)，分別為 stockName 和 queryTime，如果這兩個(gè)參數(shù)是空值時(shí)，則賦予它們一個(gè)默認(rèn)值。

接著判斷股票代碼的正確性并獲取股票歷史數(shù)據(jù)。

最后調(diào)用 kline_base 函數(shù)畫(huà)出 K 線圖，并渲染到前端頁(yè)面上。

前端頁(yè)面編寫(xiě)

最后我們來(lái)完成前端頁(yè)面的工作

首先定義一個(gè)表單，用于傳遞股票名稱(chēng)，查詢(xún)時(shí)間

<form?id="form1"?onsubmit="return?false"?action="#"?method="post">
?????????????<p?id="p1">股票名稱(chēng)：
?????????????????<input?name="stockName"?type="text"?id="stockName"?tabindex="1"?size="16"?value=""?placeholder="股票名稱(chēng)"/>
?????????????</p>
?????????????<p?id="p2">查詢(xún)時(shí)間：
?????????????????<input?name="queryTime"?type="text"?id="queryTime"?tabindex="2"?size="16"?value=""?placeholder="輸入30查詢(xún)近30天數(shù)據(jù)"/>
?????????????</p>
?????????????<p><input?type="submit"?value="查詢(xún)"?onclick="getData()"></p>
?????????</form>

然后就是通過(guò) JQuery 來(lái)動(dòng)態(tài)獲取數(shù)據(jù)

function?getData()?{
????????????var?chart?=?echarts.init(document.getElementById('kline'),?'white',?{renderer:?'canvas'});
????????????$.ajax({
????????????????type:?"POST",
????????????????dataType:?"json",
????????????????url:?"/Kline"?,
????????????????data:?$('#form1').serialize(),
????????????????success:?function?(result)?{
????????????????????chart.setOption(result);
????????????????},
????????????????error:?function()?{
????????????????????alert("錯(cuò)誤的股票代碼！");
????????????????}
????????????});
????????}

最后我們看下整體的效果