发表AI 秘籍 / BI

13. BI - 可视化看板发布

本文为 「茶桁的 AI 秘籍 - BI 篇 第 13 篇」

茶桁的AI秘籍_核心BI_13

[TOC]

Hi，你好。我是茶桁。

咱们之前用了几节课讲解了可视化的一些使用，重点是在 Python 里面的两个工具，一个是 Matplotlib，这是一个基础的工具，还有一个高级的封装是 Seaborn。

它可以帮我们画各种各样的一些图表，在工程里面也是经常会使用到。

什么是 Dashboard

那接下来，咱们的重点是看另外一个场景，就不是原来的单个的应用了。我们来看看 Dashboard， 这个在我做数据产品的时候经常打交道。

那什么是 Dashboard 呢？你可以把它理解成是个看板，它是一个完整的应用，更全的可视化。

你在 Google 中如果搜索 Dashboard，会看到很多很多的相关图片，下图也只是其中之一。

20231207194537

这是一个设计过的 Dashboard，属于前端的一个呈现。我们今天要做的就没有这么精细化，主要是来看看 Dashboard 如何进行搭建。

可视化的看板，平时在部门里面大家应该也都见过。不知道各位公司部门里面有没有一个可视化的大屏，可以看到整体的情况。我以前所在的公司就有一个大屏，上面实时展示了一些公司目前的一些数据情况。

Dashboard 正式的中文名应该叫做仪表盘，在企业里面使用仪表盘可以把一些关键的指标进行呈现，让领导还有同事们更好的去了解业务的指标。

产品关联分析可视化

仪表盘该怎么做？一起来想想，如果要做一般来说从哪开始？我们可以有一些基础的内容，要做这样一个数据分析的项目一般要分成三步。

第一步叫做数据的收集，没有数据是不可能做可视化的。所以第一步我们需要从各个渠道去收集数据，这个我们叫做 Data aggregation，也是我们 3A 架构的第一个 A。

第二个 A 叫做 Data Analysis，也是我们的第二步。有些指标不是原始数据，你要计算出来。比如说在生产车间里面有个“设备的开动率”。设备开动率指的是这个设备的运行时长，就是运行了多久。设备开动率越高就代表这个生产车间它的效率越高。那这个指标是可能需要计算出来的，计算过程就在 Data analysis 里面来进行计算。

第三个 A 叫做 Data Activation，这个分成两部分去理解，如果是宏观的层面我们就需要做可视化，微观层面就要指导业务员下一步要做什么样的操作。

这是我们数据的 3A 的结构，第一层 A 可以理解是数据中台，先收集；第二层 A 是分析，最后是做一个可视化的报表，或者是业务上智能的推荐。

可视化的技术选型

如果要做可视化呈现的话，工具可以有以下的选型：

第一个，不知道有没有人以前听过 BI 这个词，可能稍稍有些不一样。这里的 BI 指的是 BI 工具，专门有一些做 BI 的一些软件。比如说 Power BI， Tableau 这两个软件在企业内部使用的频率越来越多。

上汽大众还有一些其他的企业，他们在部门内部里面也在逐渐的普及 Power BI，甚至新员工都在学习它们。

因为它们写起来比较方便，不需要太多编程的基础，拖拖拽拽就可以形成个可视化。上一节课咱们写的蒸汽量的那个项目可以看到，虽然 Python 并不难，但是毕竟还是有一点门槛的。不如 Power BI 拖拽就可以实现出啦，也可以发布出来。所以这种类型的工具就叫做 BI 工具。

BI 工具里面比较典型的就是这两个产品，Power BI 和 Tableau，它们两个在魔力象限的最顶端，它们是一个领导者的位置。

20231207205235

这两个工具都实现了拖拽就完成可视化搭建的功能。我这边是 Mac，也没装虚拟机，就不给大家演示 PowerBI 了，说实话还是蛮简单的。

每一个工具都有它自己的使用边界，比如 PowerBI，这个工具如果是 toB 的是 OK 的，但是如果是 toC 可能就不太好。打个比方，在 2020 年那会儿，支付宝和腾讯都做了一件事，就是将新冠疫情的实时信息做了一个可视化进行展示，这个是 toC 的内容，如果阿里或者腾讯使用 PowerBI 来做这件事并发布的话，那每天的访问量将是一笔不小的开销给到微软，所以 toC 的情况，大体上都是自己写代码去实现。

企业外部，C 端要怎么做呢？C 端就是消费者的个人终端，我们就要使用另一个工具，就是 Flask。

一会儿我们也可以看一看 Flask 该怎么去写。如果想在 C 端进行展现，需要自己写代码。包括之前介绍的两个可视化包，Matplotlib 和 Seaborn 之外，还需要用到 Pyecharts。而如果要发布产品，会用 HTML/JavaScript，其中有一个图形展示框架：echarts。这是常见的一些前端语言。

要去搭建那个框架的话就是刚才给大家推荐的 Flask，这个框架是在 Python 里面一个轻量级的框架，它可以做一个 Server 微框架。在这个 Server 过程中可以实现把前端后端都集成到一个统一的框架里面，来进行一个调用。这是 Flask 的概念。

除了 Flask 之外，还有一个很出名的 Python 框架 Django。因为它比较重，而 Flask 较小，使用起来很方便，所以一开始我还是更推荐使用 Flask 来写。

说到小，我们来看看 Flask 要实现一个页面上展示“你好，茶桁！”会用到多少行代码：

1
2
3
4
5
6
7
8
9
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return '你好，茶桁！'

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8989)

数一数,大约也就 10 行代码。这 10 行代码的含义就是在你的本地，IP 为 127.0.0.1，端口为 8989，去搭建了一个 hello world 的一个服务，打印出来“你好，茶桁！”这段简单的话。

我们尝试来运行一下。

20231207233914

20231207233928

这样简单的几段代码就可以把把服务搭建起来。

Flask 真的是非常短小，只需要把包引入起来。在 Falsk 里面，上面称为路由，就是@app.route('/')， 这一段应该看出来，是一个装饰器语法，其中的含义就是以/根目录为路由的一个页面。如果用户输了这个根目录的页面，那么就会调用hello这个函数，返回一个你好，茶桁！。

这就是一个最基本的一个 Flask 包框架，在使用过程中配置了 IP 和端口，通过 IP 端口的 URL 就可以访问，把数据反馈出来。

Flask 是一个比较完善的框架，有以下的几个模块： - 网站部署(manage.py) - API 接口(api.py) - 数据库模型(model.py) - 页面(HTML)

主要是下面三个模块，上面manage.py，称为部署的配置文件。通过它，运行文件就可以把应用部署上去，部署的是下面那三个部分。

在这里，解释一下 MVC 结构，不知道大家有没有听说过。在搭建一个服务的过程中，是把服务按照一种 MVC 的框架做的一个设置。

M 指的是 model，数据层。model 是跟数据相关的模型层，所有跟数据打交道的都放到 model 里面。

页面要做呈现的话我们要通过 views 来做呈现，包括网页的地址以及渲染网页等。

还有一些是逻辑的方面，逻辑里面的我们用的是 Controller。

找一下对应关系，model.py是指向的 model，view 这是我们的 HTML，还有 API 是 Controller。

所以这几个部分 MVC 的结构，通过 manage 做了一个部署。

在进入完整的例子之前，咱们先来看一个比较简单的一个过程。如果觉得 Flask 比较复杂，我们实际上还会搭建一个应用，用 Dash 的方式做一个搭建。

Dash 其实就是在 Flask 的基础上又封装了一层，它在纯 Python 环境中构建数据可视化 Web App 的开源库，基于 Flask、Plotly.js 和 React 构建。它基本上就不需要你跟 HTML 代码来打交道，可以直接搭建一个应用来做交互的呈现。

dash_core_components库包含了一组高阶组件，包括下拉菜单、图形、Markdown 等等，简称为dcc。现在dash_core_components以及dash_HTML_components已经被遗弃，可以直接在dash中引入，如下：

1
2
from dash import dcc
from dash import HTML

接下来，咱们就来看看这样一个例子，用一个股票的例子来做，这里想要呈现出来己知股票：

1
2
3
4
5
探路者, 300005.SZ
莱美药业, 300006.SZ
汉威科技, 300007.SZ
天海防务, 300008.SZ
安科生物, 300009.SZ

在呈现之后，可以通过 select 下拉框来选择某一支股票进行查询从 7 月 1 日到 11 月底的数据情况，来看看它的相关走势：

20231208135251

20231208135313

写过前端的小伙伴应该清楚，这样一个展现，在调用前端框架，比如 Vue+echarts 或者 React+echarts 的情况下，要完成也需要写一定的代码量。咱们看看 dash 如何做。Flask 里面也是需要进行 HTML 的编写，

首先咱们需要创建一个应用：

1
app = dash.Dash()

然后可以设置 layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.layout = HTML.Div([
    HTML.H1('K 线图'),
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': '探路者', 'value':'300005.SZ'},
            {'label': '莱美药业', 'value':'300006.SZ'},
            {'label': '汉威科技', 'value':'300007.SZ'},
            {'label': '天海防务', 'value':'300008.SZ'},
            {'label': '安科生物', 'value':'300009.SZ'},
        ],
        value='300005'),
    dcc.Graph(id='my-graph')
])

我们就没有任何的跟 HTML 相关的东西，都是在 Python 里面实现的。硬说有关系，那就是在代码中设置了一个 H1 标题和 options 选择项。

dash 的底层逻辑也是 Flask，跟 Flask 的过程是完全一致的。只不过我们把 HTML 的部分的也在 dash 里面去做一个设置。

接着，就是需要写一个方法去调用数据了和展现了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
pro = ts.pro_api()

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
    df = pro.daily(ts_code=selected_dropdown_value, start_date='20230701', end_date='20231130')
    return {
        'data': [
            {
                'x': df.index,
                'y': df.close,
            }
        ]
    }

if __name__ == '__main__':
    app.run_server(host='127.0.0.1')

我们用的是 tushare 来获取数据，这个需要看课程的小伙伴们自己去申请注册一个帐号，或者你也可以使用其他数据来完成。

那我们这次没有为他设置端口，用了一个默认端口，其默认端口是 8050，所以咱们在页面可以打开看看：

20231208165518

之前黑色底色的截图是在 VSCode 里的 jupyter 文件内直接截取的，这次是在浏览器里。

大家可以拿代码自己尝试下运行，然后选择下拉框去查看。选择其中任何一个股票，比如说天海防务，数据都是一个实时动态的数据。我们再选择其他的数据都可以。

这是本身的一个应用，之前我们用的是 Matplotlib 和 Seaborn，这给自己看是 OK 的，但是如果你要给同事看，给领导看并不行。如果你要让更多人去访问，就要搭建一个服务出来，就需要跟这里写的是一样，需要有个 IP，有个端口。大家访问过程中只要访问这个 IP 和端口就可以看到你的样式。

那我们就不能使用 matplotlib 和 seaborn 了，就需要使用 Flask，用 Dash，用 Django 等等框架。这框架可以自己去选择。Dash 的好处就是不写 HTML，但是它也有一些它自己的弊端。比如说不太灵活等等。那如果你要更加完善一点的，Flask 还是比较好用的。

在 Flask 这个框架下面，我们还有一些要做一些交互的一些图表。大家可以想想我们平时看到一些大屏，这种大屏一般它背后的图表用什么样的工具来做实现呢？以 618 或者双十一为例，618 和双十一里面会有个作战的指挥室，这个作战指挥室会用一张大屏来做呈现，这个大屏的技术就是 Echarts。

Echarts 是被百度开源出来的一个 js 框架，它专门是给你做一个插件做图表的展示。

20231208170451

这些就是 Echarts 一个图表的看板。那 Echarts 图表看板里面都有哪些图做呢？我们可以看看它的官网：https://echarts.apache.org/examples/zh/index.HTML

可以去看一看都有哪些图表，可以自己去做一个选择，自己体验一下。

20231208170804

它的工具还是比较好用的，有非常好的一些可视化的一些示例。其实天猫双 11 这个大屏会邀请很多的一些媒体记者看他当天的销量，那个大屏技术拿什么实现？他背后最后那个大屏的也是类似采用 Echarts。

百度开源的工具里面这个应该算是比较成功的一个工具。你可以去点击一张图表，每一张这个图表可以自己去改写任何的数字，我们在改写完这个数字在右侧都可以看到改写之后的一个结果。

20231208171123

假如我们拿最基础的折线图，将其改为中文的周一到周日：

20231208171307

改完之后，右侧都会实现出来。如果你要想要去把这个样式下载下来，可以点击下载示例，会下载一个 HTML 文件。可以把刚才下载好的这个例子直接用浏览器打开。

那 Flask 里面的应用就会嵌入 Echarts，拿它做可视化的一个展示。数据的处理是通过 Python 完成的，如果你对 HTML 代码不是很了解，还可以用另一个工具叫 Pyecharts。

如果跟 Python 相关，做数据分析，做 BI 相关的，完全用 Python 就 OK 了。那未来如果你想要做一个领导要看的、同事要看的、所有人都能用的产品，再去把这个 Echarts 拾起来，再把我们的 Flask 给它拾起来就可以了。

下面就只是让大家去了解一下有这么个工序，也有些代码。简单给大家看一看这个结构是怎样的，直接使用 Echarts 你要对 JS 前端要去了解，那我自己本身以前就是前端出身，不过这里就不做一些前端工作的展示了。

如果使用 Pyecharts 的话，这个就跟我们的 Python 会更加友好一点。我们可以看一看这个 Pyecharts 的过程。

将 pyecharts 引入进来，然后拿一个 2023 年和 2022 年各国生产总值的数据来做一个条形图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import pyecharts.options as opts
from pyecharts.charts import Bar

def work1():
    country = ['美国','中国','德国','日本','印度','英国','法国','意大利', '巴西', '加拿大']
    data = [26949643, 17700899, 4429838, 4230862, 3732224, 3332059, 3049016, 2186082, 2126809, 2117805]
    bar = (
        Bar()
        .add_xaxis(country)
        .add_yaxis('2023 年预测', data)
        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
        .set_global_opts(title_opts=opts.TitleOpts(title='各国名义国内生产总值 Top10'))
    )
    # 生成一个 HTML 文件
    bar.render('temp.html')

这是一个单列的柱状图，那我们还可以做一个多列柱状图，就是再多一组数据，然后在 y 轴上进行展示就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 绘制多列柱状图
def work2():
    # 绘制多列柱状图 
    country = ['美国','中国','德国','日本','印度','英国','法国','意大利', '巴西', '加拿大']
    data1 = [26949643, 17700899, 4429838, 4230862, 3732224, 3332059, 3049016, 2186082, 2126809, 2117805]
    data2 = [25462700, 17963171, 4072192, 4231141, 3385090, 3070668, 2782905, 2010432, 1920096, 2139840]
    bar = (
        Bar()
        .add_xaxis(country)
        .add_yaxis('2023 年预测', data1)
        .add_yaxis('2022 年预测', data2)
        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
        .set_global_opts(title_opts=opts.TitleOpts(title='各国名义国内生产总值 Top10'))
    )
    bar.render('temp.html')

那我们最后执行 work2 这个函数，来渲染一个多列柱状图的 temp.html 文件。

1
work2()

20231208184520

y 轴是你的 data 具体的数值,还可以再设置一些样式。这些.opts代表 options, 就是它的一些参数项，专门配置样式。

比如说要不要呈现 title，具体参数在 echarts 里面都可以查到它的参数的一些设置。

生成出来之后，Pyecharts 可以帮你写一个 HTML 文件，咱们最后的 render 就是用于生成一个 HTML 文件的。也就我们做的网页呈现的一个效果。

这样就不需要直接在 HTML 上面去写，就可以直接生成。

所以它的好处就是只要你会 Python，就可以帮你写一个前端，把这个页面给展示出来。

除了渲染出一个 HTML 文件之外，pyecharts 还支持在 Jupyter 内直接显示图像，渲染方式就可以从render()换成render_notebook()。大家可以自己尝试下。

20231209113924

关于 Flask 的完整项目搭建，之后咱们会有一个收费课程，是关于企业的实战项目的完整讲解。有兴趣的小伙伴可以关注我，之后进行购买查看。

13. BI - 可视化看板发布

https://hivan.me/13. BI - 可视化看板发布/

作者

Hivan Du

发布于

2024-02-11

更新于

2024-02-28

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

×