基于Python+Pyecharts 的酷炫大屏是真的香啊

大家好，我们基于Python+Pyecharts 的酷炫大屏。

1、准备背景图

首先我们准备以下图片(pic1.jpg)，作为网页背景。

源码

2. 获取数据

做可视化，第一步要解决的就是数据问题。
这里使用tushare接口获取广东酒家的股价数据。并保存为csv数据文件。广州酒家的股票代码为’603043.SH’。
代码如下：

import pandas as pd
import tushare as ts
from pyecharts import options as opts
from pyecharts.charts import Page
from pyecharts.charts import Line
from pyecharts.charts import Kline

pro = ts.pro_api(token)



def get_data(tscode):
    df = pro.daily(ts_code=tscode)
    df = df.loc[:, ['trade_date', 'open', 'high', 'low', 'close', 'vol']]
    df.rename(columns={
        'trade_date': 'Date',
        'open': 'Open',
        'high': 'High',
        'low': 'Low',
        'close': 'Close',
        'vol': 'Volume'
    },
        inplace=True)
    df['Date'] = pd.to_datetime(df['Date'])
    df.set_index(['Date'], inplace=True)
    df = df.sort_index()
    return df
 
get_data('603043.SH').to_csv("广州酒家日线数据.csv")

保存的数据如下图所示：
   

3. 绘制图线

拿到数据后，就可以进行绘图了。我们要绘制的是一幅折线图和一幅蜡烛图。其中折线图包含8月份交易日的收盘价数据，以及5日移动平均线和10日移动平均线。蜡烛图也采用刚刚过去的八月份的数据进行绘制。

df = pd.read_csv("广州酒家日线数据.csv")


df.index = pd.to_datetime(df.Date)


Close = df.Close


Sma5 = pd.Series(0.0, index=Close.index)
for i in range(4, len(Close)):
    Sma5[i] = round(sum(Close[i-4:(i+1)])/5,2)

Sma10 = pd.Series(0.0, index=Close.index)
for i in range(9, len(Close)):
    Sma10[i] = round(sum(Close[i-9:(i+1)])/10,2)



line = (
    Line(init_opts=opts.InitOpts(width='1000px',
                                        height='800px',
                                        chart_id='1'
                                        )
    )
    .add_xaxis(df.Date['2022-8'].values.tolist())
    .add_yaxis("收盘价", Close['2022-8'].values.tolist())
    .add_yaxis("五日移动平均线", Sma5['2022-8'].values.tolist())
    .add_yaxis("十日移动平均线", Sma10['2022-8'].values.tolist())
    
    .set_global_opts(title_opts=opts.TitleOpts(title="广州酒家2022年8月收盘数据折线图", subtitle="附5&10日MAV图"),
                     yaxis_opts=opts.AxisOpts(min_='dataMin')
                     )
    .set_series_opts(
        linestyle_opts=opts.LineStyleOpts(
            width=8,
            opacity=1,)
)
)




data = [list(i) for i in df.loc['2022-8', ['Open', 'Close', 'Low', 'High']].values]

kline = (
    Kline(init_opts=opts.InitOpts(width='1000px',
                                    height='800px',
                                    chart_id='2',
                                    page_title="广州酒家"))
    .add_xaxis(df.Date['2022-8'].values.tolist())
    .add_yaxis("广州酒家", data)
    .set_global_opts(
        xaxis_opts=opts.AxisOpts(is_scale=True),
        yaxis_opts=opts.AxisOpts(
            is_scale=True,
            splitarea_opts=opts.SplitAreaOpts(
                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)
            ),
        ),
        datazoom_opts=[opts.DataZoomOpts(pos_bottom="-2%")],
        title_opts=opts.TitleOpts(title="广州酒家蜡烛图"),
    )
)



page = Page(layout=Page.DraggablePageLayout)
page.add(
    line,
    kline
)

page.render('render.html')

程序会输出一个html文件，我们将其打开后里边的图表是按顺序从上向下排列的。然后我们可以对其中的图片位置进行拖拽，拖拽到预期的位置，如图所示为例。然后点击左上角的Save Config，即可得到一个名为chart_config.json的json文件，在左下角位置处。具体如图所示：

4. 添加主题

接下来我们的pic1.jpg图像文件就派上用场啦。文件chart_config.json包含了我们需要的图像的位置信息。将pic1.jpg和chart_config.json，以及刚刚生成的render.html文件,都放在当前目录下，再创建一个py文件，并在里边编辑代码：

from bs4 import BeautifulSoup
from pyecharts.charts import Page

Page.save_resize_html("render.html", cfg_file="chart_config.json", dest="mycharts_demo.html")


with open("mycharts_demo.html", "r+", encoding='utf-8') as html:
    html_bf = BeautifulSoup(html, 'lxml')
    body = html_bf.find("body")
    body["style"] = "background-image: url(pic1.jpg)"  
    html_new = str(html_bf)
    html.seek(0, 0)
    html.truncate()
    html.write(html_new)

执行代码，即得到了最终的"mycharts_demo.html"文件。