整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者： 俊欣
来源：关于数据分析与可视化
今天小编来为大家安利另外一个用于绘制可视化图表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基础之上，在创建之出的目的是为了帮助前端知识匮乏的数据分析人员，以纯Python编程的方式快速制作出交互特性强的数据可视化大屏，在经过多年的迭代发展，如今不仅仅可以用来开发在线数据可视化作品，即便是轻量级的数据仪表盘、BI应用甚至是博客或者是常规的网站都随处可见Dash框架的影子，今天小编就先来介绍一下该框架的一些基础知识，并且来制作一个简单的数据可视化大屏。
我们先来了解一下Dash框架中的两个基本概念
Layout顾名思义就是用来设计可视化大屏的外观和布局，添加一些例如下拉框、单选框、复选框、输入框、文本框、滑动条等组件，其中Dash框架对HTML标签也进行了进一步的封装，使得我们直接可以通过Python代码来生成和设计每一个网页所需要的元素，例如
<div>
<h1>Hello World!!</h1>
<div>
<p>Dash converts Python classes into HTML</p>
</div>
</div>
我们转化成Dash的Python结构就是
html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash converts Python classes into HTML'),
])
])
Callbacks也就是回调函数，基本上是以装饰器的形式来体现的，实现前后端异步通信的交互，例如我们在点击按钮或者下拉框之后出现的功能就是通过回调函数来实现的。
在导入模块之前，我们先用pip命令来进行安装，
! pip install dash
! pip install dash-html-components
! pip install dash-core-components
! pip install plotly
然后我们导入这些刚刚安装完的模块，其中dash-html-components用来生成HTML标签，dash-core-components模块用来生成例如下拉框、输入框等组件，这里我们还需要用到plotly模块，因为我们需要用到的数据来自该模块，里面是一众互联网公司过去一段时间中股价的走势
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
那么我们读取数据并且用plotly来绘制折线图，代码如下
app=dash.Dash() #实例化Dash
df=px.data.stocks() #读取股票数据
def stock_prices():
# 绘制折线图
fig=go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
line=dict(color='firebrick', width=4), name='Apple')
])
fig.update_layout(title='股价随着时间的变幻',
xaxis_title='日期',
yaxis_title='价格'
)
return fig
app.layout=html.Div(id='parent', children=[
html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
'marginTop': 40, 'marginBottom': 40}),
dcc.Graph(id='line_plot', figure=stock_prices())
])
if __name__=='__main__':
app.run_server()
我们点击运行之后会按照提示将url复制到浏览器当中便可以看到出来的结果了，如下所示
从代码的逻辑上来看，我们通过Dash框架中的Div方法来进行页面的布局，其中有参数id来指定网页中的元素，以及style参数来进行样式的设计，最后我们将会指出来的图表放在dcc.Graph()函数当中。
然后我们再添置一个下拉框，当我们点击这个下拉框的时候，可是根据我们的选择展示不同公司的股价，代码如下
dcc.Dropdown(id='dropdown',
options=[
{'label': '谷歌', 'value': 'GOOG'},
{'label': '苹果', 'value': 'AAPL'},
{'label': '亚马逊', 'value': 'AMZN'},
],
value='GOOG'),
output
options参数中的label对应的是下拉框中的各个标签，而value对应的是DataFrame当中的列名
df.head()
output
最后我们将下拉框和绘制折线图的函数给连接起来，我们点击下拉框选中不同的选项的时候，折线图也会相应的产生变化，
@app.callback(Output(component_id='bar_plot', component_property='figure'),
[Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
print(dropdown_value)
# Function for creating line chart showing Google stock prices over time
fig=go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
line=dict(color='firebrick', width=4))
])
fig.update_layout(title='股价随着时间的变幻',
xaxis_title='日期',
yaxis_title='价格'
)
return fig
我们看到callback()方法中指定输入和输出的媒介，其中Input参数，里面的component_id对应的是下拉框的id也就是dropdown，而Output参数，当中的component_id对应的是折线图的id也就是bar_plot，我们来看一下最后出来的结果如下
最后，全部的代码如下所示
者：俊欣
来源：关于数据分析与可视化
今天我们就来说说如何用Pyecharts模块来制作炫酷的可视化大屏，最后的效果如下
步骤如下：
这次我们使用的数据是虚构的某超市2021年第一季度的订单数据，总共是有1000条，
df.info()
output
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 1000 entries, 0 to 999
Data columns (total 17 columns):
# Column Non-Null Count Dtype
--- ------ -------------- -----
0 订单编号 1000 non-null object
1 分支 1000 non-null object
2 省份 1000 non-null object
3 顾客类型 1000 non-null object
4 性别 1000 non-null object
5 商品类型 1000 non-null object
6 单价 1000 non-null float64
7 数量 1000 non-null int64
8 Tax 5% 1000 non-null float64
9 总价 1000 non-null float64
10 日期 1000 non-null datetime64[ns]
.......
dtypes: datetime64[ns](1), float64(7), int64(1), object(8)
memory usage: 132.9+ KB
其中顾客的类型有普通顾客与会员，性别有男性与女性，剩下的还有包括商品类型、购买时间、支付方式、各个商品的毛利率等数据，
接下来我们开始各个图表的绘制，我们先来看饼图的绘制，代码并不复杂，首先我们对“商品类型”这一列的数据进行统计
products_type_index=df["商品类型"].value_counts().index.tolist()
products_type_values=df["商品类型"].value_counts().values.tolist()
然后再调用Pyecharts()模块中的Pie()实例进行图表的绘制
def pie_chart_2():
c=(
Pie(init_opts=opts.InitOpts(chart_id=4, bg_color='#1C1C1C',
theme=ThemeType.INFOGRAPHIC))
.add("", [list(z) for z in zip(products_type_index,
products_type_values)])
.set_global_opts(title_opts=opts.TitleOpts(title="商品类型分布图",
title_textstyle_opts=opts.TextStyleOpts(font_size=25, color='#FFFFFF')),
legend_opts=opts.LegendOpts(orient="vertical",
pos_left="5%",
pos_top="10%"))
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)
return c
if __name__=="__main__":
map=map_chart()
map.render("4.html")
output
另外，我们也看到了单张图片当中有两张饼图的情况，这是使用了Pyecharts()模块当中的Grid()实例，将若干张绘制完成的图表遵从一定的顺序来进行组合
grid=(
Grid(init_opts=opts.InitOpts(width='1000px', height='600px',
chart_id=3, bg_color='#1C1C1C'))
.add(c_1, grid_opts=opts.GridOpts(pos_left="60%"))
.add(c_2, grid_opts=opts.GridOpts(pos_right="50%"))
)
同样地，我们将不同省份的数据给筛选出来之后，然后进行图表的绘制
city_index=df["省份"].value_counts().index.tolist()
city_values=df["省份"].value_counts().values.tolist()
地图的绘制用的是Pyecharts模块当中的Map()实例，可以看到顾客几乎都分布在北京、浙江以及上海这几个地方
def map_chart():
c=(
Map(init_opts=opts.InitOpts(chart_id=2,
bg_color='#1C1C1C'))
.add("商家A", [list(z) for z in zip(city_index,
city_values)], "china")
.set_global_opts(
title_opts=opts.TitleOpts(title="顾客在全国的分布图",
title_textstyle_opts=opts.TextStyleOpts(font_size=25,
color='#FFFFFF')),
visualmap_opts=opts.VisualMapOpts(max_=250),
)
)
return c
if __name__=="__main__":
map=map_chart()
map.render("2.html")
output
我们针对的是购买时间，看一下哪些购买时间段的人会比较多
hour_index=df["小时"].value_counts().index.tolist()
hour_index_str=[str(hour_ind) + "时" for hour_ind in hour_index]
hour_values=df["小时"].value_counts().values.tolist()
调用Bar()实例进行绘制图表
def bar_chart():
c=(
Bar(init_opts=opts.InitOpts(chart_id=5, bg_color='#1C1C1C',
theme=ThemeType.CHALK))
.add_xaxis(hour_index_str)
.add_yaxis("商家A", hour_values)
.set_global_opts(title_opts=opts.TitleOpts(title="购物的时间分布",
subtitle="购物时间",
title_textstyle_opts=opts.TextStyleOpts(font_size=25, color='#FFFFFF')))
)
return c
if __name__=="__main__":
map=map_chart()
map.render("5.html")
output
将绘制出来的若干份图表组合到一块儿，总共有这几种方式
我们使用的是Page()示例来顺序展示多张图表，先实例化该对象
page=Page(layout=Page.DraggablePageLayout, page_title="基于Pyecharts的销售数据大屏")
之所以用DraggablePageLayout属性是为了调整成我们所想要的布局，然后将我们所绘制的图表一一添加
page.add(
title(),
map_chart(),
pie_chart(),
pie_chart_2(),
bar_chart(),
)
page.render('test_2.html')
最后生成一个test_2.html的文件，然后我们将布局调整成我们想要的结果
对图片布局完成之后，要记得点击左上角的save config按钮对布局文件进行保存。之后本地会生成一个chart_config.json文件，然后运行下面的代码
page.save_resize_html('test_2.html', cfg_file='chart_config.json', dest='可视化大屏.html')
打开重新生成的可视化大屏.html，便是新的内容
在日常工作中，为了更直观的发现数据中隐藏的规律，察觉到变量之间的互动关系，人们常常借助可视化帮助我们更好的给他人解释现象，做到一图胜千文的说明效果。
在Python中，常见的数据可视化库有:
matplotlib 是最常见的2维库，可以算作可视化的必备技能库，由于matplotlib是比较底层的库，api很多，代码学起来不太容易。
seaborn 是建构于matplotlib基础上，能满足绝大多数可视化需求。更特殊的需求还是需要学习matplotlib。
上述两个库都是静态的可视化库，大多数做过前端Web开发的同学都用到过Echarts.js库，它是一款前端可视化的JS库、功能非常之强大。在使用之前，需要导入js库到项目中。对于平时用Python较多的同学而言，如果每次实现可视化功能(特别是一些小需求)，都需要引用js库显然不太方便，于是就在想有没有Python与Echarts结合的轮子。答案是肯定的，在Github中就有一个国人开发的一个Echarts与Python结合的轮子：Pyecharts，它不仅很好的兼容了web项目，而且可以做到可视化的动态效果。
Pyecharts 是一个用于生成 Echarts 图表的类库。常规的Echarts 是由百度开源的一个数据可视化 JS 库，主要用于数据可视化。简单来说，Pyecharts是一款将python与echarts结合的强大的数据可视化工具。
使用 Pyecharts 可以生成独立的网页，也可以在 flask , Django 中集成使用。
项目介绍：
http://pyecharts.herokuapp.com/
项目源码：
https://github.com/pyecharts/pyecharts
从项目文档介绍可知， pyecharts目前分为两个大的系列版本：0.5.x 和v1.x.x。
支持 Python2.7，3.4+
0.5.x 版本将不再进行维护，文档位于 05x-docs.pyecharts.org。
仅支持 Python3.6+
新版本系列将从 v1.0.0 开始，文档位于 pyecharts.org；示例位于 gallery.pyecharts.org
PS: v0.5.x 和 V1 间不兼容，V1 是一个全新的版本。
得益于Echarts 项目，目前Pyecharts支持 30+ 种常见图表，如下所示：
Bar（柱状图/条形图）
Bar3D（3D 柱状图）
Boxplot（箱形图）
EffectScatter（散点图）
Funnel（漏斗图）
Gauge（仪表盘）
Geo（地理坐标系）
Graph（关系图）
HeatMap（热力图）
Kline（K线图）
Line（折线/面积图）
Line3D（3D 折线图）
Liquid（水球图）
Map（地图）
Parallel（平行坐标系）
Pie（饼图）
Polar（极坐标系）
Radar（雷达图）
Sankey（桑基图）
Scatter（散点图）
Scatter3D（3D 散点图）
ThemeRiver（主题河流图）
WordCloud（词云图）
1、pip 安装
# 安装 v1 以上版本
$ pip install pyecharts -U
# 如果需要安装 0.5.11 版本的开发者，可以使用
# pip install pyecharts==0.5.11
2、源码安装
# v1 以上版本
$ git clone https://github.com/pyecharts/pyecharts.git
# 如果需要安装 0.5.11 版本，请使用 git clone https://github.com/pyecharts/pyecharts.git -b v05x
$ cd pyecharts
$ pip install -r requirements.txt
$ python setup.py install
在使用pip安装库时，由于墙的原因，下载时可能会出现断线和速度过慢的问题导致下载失败，所以建议通过豆瓣源或清华镜像来进行下载：
# 豆瓣源下载
pip install -i https://pypi.douban.com/simple pyecharts
# 清华镜像源
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyecharts
PS: 这里要专门说明一下，自从 0.3.2 开始，为了缩减项目本身的体积以及维持 pyecharts 项目的轻量化运行，pyecharts 将不再自带地图 js 文件。如用户需要用到地图图表（Geo、Map），可自行安装对应的地图文件包。
# 通过pip命令进行安装
pip install echarts-countries-pypkg
pip install echarts-china-provinces-pypkg
pip install echarts-china-cities-pypkg
现在我们来开始正式使用pycharts，这里我们先直接使用官方的数据，感受一下可视化展示效果。
from pyecharts.charts import Bar
from pyecharts import options as opts
# V1 版本开始支持链式调用
bar=(
Bar
.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
bar.render_notebook
在这里顺便安利一下jupyter，pyecharts在v0.1.9.2版本开始，在jupyter上可以直接调用实例（例如上方直接调用bar.render_notebook()）就可以将图表直接展示出来，非常方便。
如果脚本在非jupyter环境运行，图表渲染方法需改为:
bar.render
默认情况下，pycharts生成图表为HTML格式，也支持生成png图片格式，如下：
from snapshot_selenium import snapshot as driver
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.render import make_snapshot
def bar_chart -> Bar:
c=(
Bar
.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
.reversal_axis
.set_series_opts(label_opts=opts.LabelOpts(position="right"))
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-测试渲染图片"))
)
return c
# 需要安装 snapshot-selenium 或者 snapshot-phantomjs
make_snapshot(driver, bar_chart.render, "bar.png")
在上面官方示例中的柱状图表我们已经能感受到pycharts可视化功能的强大，最后再介始几种日常工作中常用的可视化图表及对应示例。
6.1 Pie饼状图
from pyecharts import options as opts
from pyecharts.charts import Pie
from pyecharts.faker import Faker
pie=(
Pie
.add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
.set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"])
.set_global_opts(title_opts=opts.TitleOpts(title="Pie-设置颜色"))
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)
pie.render_notebook
6.2 仪表盘
from pyecharts import options as opts
from pyecharts.charts import Gauge
g=(
Gauge
.add("", [("完成率", 66.6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Gauge-基本示例"))
)
g.render_notebook
6.3 折线图
import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker
c=(
Line
.add_xaxis(Faker.choose)
.add_yaxis("商家A", Faker.values, is_smooth=True)
.add_yaxis("商家B", Faker.values, is_smooth=True)
.set_global_opts(title_opts=opts.TitleOpts(title="Line-smooth"))
)
c.render_notebook
6.4 K线图
from pyecharts import options as opts
from pyecharts.charts import Kline
data=[
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
[2295.35, 2346.5, 2295.35, 2345.92],
[2347.22, 2358.98, 2337.35, 2363.8],
[2360.75, 2382.48, 2347.89, 2383.76],
[2383.43, 2385.42, 2371.23, 2391.82],
[2377.41, 2419.02, 2369.57, 2421.15],
[2425.92, 2428.15, 2417.58, 2440.38],
[2411, 2433.13, 2403.3, 2437.42],
[2432.68, 2334.48, 2427.7, 2441.73],
[2430.69, 2418.53, 2394.22, 2433.89],
[2416.62, 2432.4, 2414.4, 2443.03],
[2441.91, 2421.56, 2418.43, 2444.8],
[2420.26, 2382.91, 2373.53, 2427.07],
[2383.49, 2397.18, 2370.61, 2397.94],
[2378.82, 2325.95, 2309.17, 2378.82],
[2322.94, 2314.16, 2308.76, 2330.88],
[2320.62, 2325.82, 2315.01, 2338.78],
[2313.74, 2293.34, 2289.89, 2340.71],
[2297.77, 2313.22, 2292.03, 2324.63],
[2322.32, 2365.59, 2308.92, 2366.16],
[2364.54, 2359.51, 2330.86, 2369.65],
[2332.08, 2273.4, 2259.25, 2333.54],
[2274.81, 2326.31, 2270.1, 2328.14],
[2333.61, 2347.18, 2321.6, 2351.44],
[2340.44, 2324.29, 2304.27, 2352.02],
[2326.42, 2318.61, 2314.59, 2333.67],
[2314.68, 2310.59, 2296.58, 2320.96],
[2309.16, 2286.6, 2264.83, 2333.29],
[2282.17, 2263.97, 2253.25, 2286.33],
[2255.77, 2270.28, 2253.31, 2276.22],
]
k=(
Kline
.add_xaxis(["2017/7/{}".format(i + 1) for i in range(31)])
.add_yaxis("k线图", data)
.set_global_opts(
yaxis_opts=opts.AxisOpts(is_scale=True),
xaxis_opts=opts.AxisOpts(is_scale=True),
title_opts=opts.TitleOpts(title="K线图-基本示例"),
)
)
k.render_notebook
6.5 地图Map
from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker
map=(
Map
.add("中国地图", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
.set_global_opts(title_opts=opts.TitleOpts(title="Map-基本示例"))
)
map.render_notebook
6.6 词云图
import pyecharts.options as opts
from pyecharts.charts import WordCloud
data=[
("生活资源", "999"),
("供热管理", "888"),
("供气质量", "777"),
("生活用水管理", "688"),
("一次供水问题", "588"),
("交通运输", "516"),
("城市交通", "515"),
("环境保护", "483"),
("房地产管理", "462"),
("城乡建设", "449"),
("社会保障与福利", "429"),
("社会保障", "407"),
("文体与教育管理", "406"),
("公共安全", "406"),
("公交运输管理", "386"),
("出租车运营管理", "385"),
("供热管理", "375"),
("市容环卫", "355"),
("自然资源管理", "355"),
("粉尘污染", "335"),
("噪声污染", "324"),
("土地资源管理", "304"),
("物业服务与管理", "304"),
("医疗卫生", "284"),
("粉煤灰污染", "284"),
("占道", "284"),
("供热发展", "254"),
("农村土地规划管理", "254"),
("生活噪音", "253"),
("供热单位影响", "253"),
("城市供电", "223"),
("房屋质量与安全", "223"),
("大气污染", "223"),
("房屋安全", "223"),
("文化活动", "223"),
("拆迁管理", "223"),
("公共设施", "223"),
("供气质量", "223"),
("供电管理", "223"),
("燃气管理", "152"),
("教育管理", "152"),
("医疗纠纷", "152"),
("执法监督", "152"),
("设备安全", "152"),
("政务建设", "152"),
("县区、开发区", "152"),
("宏观经济", "152"),
("教育管理", "112"),
("社会保障", "112"),
("生活用水管理", "112"),
("物业服务与管理", "112"),
("分类列表", "112"),
("农业生产", "112"),
("二次供水问题", "112"),
("城市公共设施", "92"),
("拆迁政策咨询", "92"),
("物业服务", "92"),
("物业管理", "92"),
("社会保障保险管理", "92"),
("低保管理", "92"),
("文娱市场管理", "72"),
("城市交通秩序管理", "72"),
("执法争议", "72"),
("商业烟尘污染", "72"),
("占道堆放", "71"),
("地上设施", "71"),
("水质", "71"),
("无水", "71"),
("供热单位影响", "71"),
("人行道管理", "71"),
("主网原因", "71"),
("集中供热", "71"),
("客运管理", "71"),
("国有公交（大巴）管理", "71"),
("工业粉尘污染", "71"),
("治安案件", "71"),
("压力容器安全", "71"),
("身份证管理", "71"),
("群众健身", "41"),
("工业排放污染", "41"),
("破坏森林资源", "41"),
("市场收费", "41"),
("生产资金", "41"),
("生产噪声", "41"),
("农村低保", "41"),
("劳动争议", "41"),
("劳动合同争议", "41"),
("劳动报酬与福利", "41"),
("医疗事故", "21"),
("停供", "21"),
("基础教育", "21"),
("职业教育", "21"),
("物业资质管理", "21"),
("拆迁补偿", "21"),
("设施维护", "21"),
("市场外溢", "11"),
("占道经营", "11"),
("树木管理", "11"),
("农村基础设施", "11"),
("无水", "11"),
("供气质量", "11"),
("停气", "11"),
("燃气管理", "11"),
("市容环卫", "11"),
("新闻传媒", "11"),
("人才招聘", "11"),
("市场环境", "11"),
("行政事业收费", "11"),
("食品安全与卫生", "11"),
("城市交通", "11"),
("房地产开发", "11"),
("房屋配套问题", "11"),
("物业服务", "11"),
("物业管理", "11"),
("占道", "11"),
("园林绿化", "11"),
("户籍管理及身份证", "11"),
("公交运输管理", "11"),
("公路（水路）交通", "11"),
("房屋与图纸不符", "11"),
("有线电视", "11"),
("社会治安", "11"),
("林业资源", "11"),
("其他行政事业收费", "11"),
("经营性收费", "11"),
("食品安全与卫生", "11"),
("体育活动", "11"),
("有线电视安装及调试维护", "11"),
("低保管理", "11"),
("劳动争议", "11"),
("社会福利及事务", "11"),
("一次供水问题", "11"),
]
c=(
WordCloud
.add(series_name="热点分析", data_pair=data, word_size_range=[6, 66])
.set_global_opts(
title_opts=opts.TitleOpts(
title="热点分析", title_textstyle_opts=opts.TextStyleOpts(font_size=23)
),
tooltip_opts=opts.TooltipOpts(is_show=True),
)
)
c.render_notebook
上述示例仅供参考，读者们结合日常工作应用，学会举一反三才是关健，更多Pychart示例介绍可见：代码示例
*请认真填写需求信息，我们会在24小时内与您取得联系。
