开局一张图
相信大家都曾在 YouTube 和 B 站看到过类似的视频，这种图在国外叫做 Bar Chart Race，配上一段气势磅礴的 BGM，就会营造出一种「浮沉跌宕」的沉浸感，这类型的视频很多都获得了相当可观的播放量。
由于这类视频的大火，网络上已经有专门的制作工具，并且都以 NO-CODING 为营销卖点，也进一步导致了该类视频的「泛滥」。不过作为一个喜欢折腾的数据分析工程师，还是习惯通过手打代码的方式来实现。
数据源
可获取的数据有很多，这次也蹭把热点，以近期打工人都想入场大干一番的股市为主题，将历年 TOP 10 的 A 股股票通过动态排行图将其展示出来。
既然是关于股市的数据，那可以直接在证券交易所的官网查询到相关的数据。果不其然，上海证券交易所官网数据板块中，有向广大投资者提供「市值排名」的查询入口（http://www.sse.com.cn/market/stockdata/marketvalue/main/），点击进去会看到，我们「股票市价总值排名前十名」的报表，并可以通过日期筛选框进行查询。
数据源确定了，需要对接下来的工作流进行梳理。
数据流分析
网站分析
在网页上更改日期查询后，网址没有改变，页面也没有刷新，初步判断通过 Ajax 进行异步更新。在 Chrome 浏览器上，右键点击 inspect，查看 Network 模块下的 JS 标签。
这时再次切换查询日期，便会在 JS 标签左侧面板里找到真正的请求 URL（如 http://query.sse.com.cn/marketdata/tradedata/queryTopMktValByPage.do?&jsonCallBack=jsonpCallback12925&isPagination=true&searchDate=2021-01-01&_=1610296018800），可见请求 URL 需要我们配置以下的参数：
- jsonCallBack：测试后不传入也不影响
- isPagination：true
- searchDate：查询日期
- _：时间戳，不传入也不影响
点击请求 URL 后可以通过右侧面板的 Preview、Response 标签帮助我们查看该条请求是不是有爬虫想要的数据返回结果中。
数据抓取
Requests 库对其进行抓取，Requests 库是 Python 最简单易用的 HTTP 库，我们可以通过它来构建 URL 的请求，并获取其 response 结果。
一般来说，要构建一个 HTTP 请求，需要传入请求头（header），请求地址，请求方法（GET 或 POST 等）和 HTTP 协议版本。另外，根据前面的网站分析，我们还需要给 URL 传入参数，Requests 库提供了 params 关键字参数，允许我们以一个字典来配置 URL 所需的参数。
import requests\nparams = params = {\n "isPagination": "true",\n "searchDate": "2021-01-11"\n}\n\nheaders = {\n "Referer": "http://www.sse.com.cn/market/stockdata/marketvalue/",\n "Accept-Encoding": "gzip, deflate",\n "Connection": "keep-alive",\n "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36"\n}\n\nurl="http://query.sse.com.cn/marketdata/tradedata/queryTopMktValByPage.do"\n\nresponse = requests.get(url, headers = headers, params = params)\n\nprint(response.text)\n
最后 response.text 的输出结果是一个嵌套式的 JSON 串，我们想要的市值、排名等数据便藏在 result 那里
接着，配合正则表达式对 response.text 的输出结果截取出目标数据
# 接上\nimport re\ntext = response.text\nresult = re.search('"result":\\[(.*?)\\]', text).group(1)\ntemp = {}\nstock_info = re.findall('"market":"(.*?)",.*?"productA":"(.*?)",.*?"productName":"(.*?)",.*?"rank":(.*?)\\}', result, re.DOTALL)\n\n\nf = open(file_path + '/stock_history_market_value.csv', 'a+', newline = '')\nprint('正在写入:', trade_date)\nwriter = csv.DictWriter(f, ['year', 'trade_date', 'code', 'stock_name', 'market_value', 'rank'])\n\nfor info in stock_info:\n temp = {\n "year": 2021,\n "trade_date": "2021-01-11",\n "code": info[1],\n "stock_name": info[2],\n "market_value": info[0],\n "rank": info[3]\n }\n print(temp)\n writer.writerow(temp)\nprint('已完成', trade_date)\n
执行完成后就会发现程序目录多了一个文件 stock_history_market_value.csv
由于动态排行图需要用到历年的数据，需要有必要将上面写入的 csv 的步骤封装到 spider_market_value函数中，以便复用。考虑到数据量的问题，这里只对历年（2000 年起）每个月的最后一天的数据进行抓取，另外，同样对该执行命令封装到函数中，方便传参执行。
def get_monthly_market_value(year):\n# 如果参数是本年，则取本月前每个月取最后一天的市值排名，本月则取脚本时间的前一天的市值排名\n if year == datetime.date.today().year:\n this_month = datetime.date.today().month\n for month in range(1, this_month+1):\n if month == datetime.date.today().month:\n trade_date = (datetime.date.today() - timedelta(days=1)).strftime('%Y-%m-%d')\n spider_market_value(year, trade_date)\n else:\n trade_date = str(year) + '-' + str(month) + '-' + str(calendar.monthrange(year, month)[1])\n spider_market_value(year, trade_date)\n # 如果参数为历年，则取每个月最后一天的市值排名\n else:\n for month in range(1, 13): trade_date = str(year) + '-' + str(month) + '-' + str(calendar.monthrange(year, month)[1])\n spider_market_value(year, trade_date)\n
给 get_monthly_market_value(year) 传入年份，便可抓取到对应年份每个月的数据，并汇总写入到 stock_history_market_value.csv 文件中。
这样，数据部分就准备好了。
绘图可视化
在生成动态图之前，先查阅下所用的库与函数的用法，本文将以经典可视化库 matplotlib 里的 animation.FuncAnimation 为例，调用前需了解该方法的参数，以便确认下一步的准备工作。
从官网文档可以查看到 animation.FuncAnimation 主要参数说明：
- fig - 传入画布对象，可以通过 fig, ax = plt.subplots() 创建；
- func - 每一帧更新时所调用的（绘图）函数（如下方要新建的 draw_barchart() 函数）
- frames - func 函数的参数，作为帧序列，靠它图例才会动态变化
\n# 给每一个股票随机一种颜色\nrandom.seed(444)\nget_colors = lambda n: list(map(lambda i:"#" +"%06x" % random.randint(0x111111, 0xffffff),range(n)))\ncolors = get_colors(df['code'].nunique())\n\ncodecolors = dict()\nuni_code = set(df['code'])\nfor code, color in zip(uni_code, colors):\ncodecolors[code] = color\n\n\ndef draw_barchart(trade_date):\n plt.rcParams['font.sans-serif'] = ['Microsoft YaHei']\n plt.rcParams['animation.embed_limit'] = 2**128\n \n # 读取当天的数据\n df_date = df[df['trade_date'] == trade_date]\n df_date = df_date.sort_values(by = ['market_value'], ascending = True)\n \n # 每次绘制前必须先清空画布，不然图像会重叠的\n ax.clear()\n \n # 绘制水平柱状图\n ax.barh(df_date['stock_name'].astype(str), df_date['market_value'], color = [codecolors[c] for c in df_date['code']])\n \n # 标记文案\n dx = df_date['market_value'].max()/200\n for i, (value, code) in enumerate(zip(df_date['market_value'], df_date['stock_name'].astype(str))):\n ax.text(value-dx, i, code, size = 14, weight = 600, ha = 'right', va = 'bottom')\n ax.text(value+dx, i, f'{value:,.0f}', size = 14, ha = 'left', va = 'bottom')\n \n # 标记帧日期\n ax.text(1, 0.45, trade_date.split('-')[0] + '-' + trade_date.split('-')[1], transform = ax.transAxes, color = '#777777', size = 46, ha = 'right')\n \n # 标记轴标签\n ax.text(0, 1.06, "市值（万元）", transform = ax.transAxes, size = 12, color = '#777777')\n \n # 设置 X 轴坐标的位置为顶部\n ax.xaxis.set_ticks_position('top')\n \n #设置 X 轴坐标的颜色和字体大小\n ax.tick_params(axis = 'x', color = '#777777')\n ax.xaxis.set_major_formatter(ticker.StrMethodFormatter('{x:,.0f}'))\n \n # 设置图形与边框的距离\n ax.margins(0, 0.01)\n ax.grid(which = 'major', axis = 'x', linestyle = '-')\n ax.set_axisbelow(True)\n \n # 设置标题\n ax.text(0.3, 1.05, '历年市值前10股票', transform = ax.transAxes, size = 48, weight = 600, ha = 'left')\n \n # 去掉边框\n plt.box(False)\n\nfig, ax = plt.subplots(figsize=(22, 10))\nanimator = animation.FuncAnimation(fig, draw_barchart, frames = trade_date_list, interval = 125)\nHTML(animator.to_jshtml())\n
将 draw_barchart() 作为数据更新函数，月份作为 frames 帧序列，执行上面的语句，稍等片刻，文章开头的动态排行图便出来了：
动画的流畅程度除取决于 FuncAnimation 的 iterval 参数（用于设置换帧的时间间隔），也取决于每帧数据的差距，差距越小，按帧播放时就越顺滑，原理跟皮影戏一样，因此，如果要想获得更顺滑的动画，可以考虑下按日或按周抓取目标数据，当然到时要处理的数据量也就越大，运行时间和性能问题也是需要考虑的点，大家不妨多调试测试下。