Python如何制作可视化报表(python,开发技术)

可视化报表效果如下，水果销售情况一览~

Dash是基于Plotly搭建的Dashbord框架，支持Python、R和Julia。使用Dash，你可以创建自定义响应式仪表板。

相关文档

说明：https://dash.plotly.com/introduction

案例：https://dash.gallery/Portal/

Tailwindcss则是一个实用程序优先的CSS框架，用于快速构建自定义界面。

“这种框架只适用于那种只会实现页面布局美化元素而不关心实现业务逻辑的前端”。

看看别人对它的评价，对于无交互的图表，完全足够了。

相关文档

说明：https://www.tailwindcss.cn/docs

下面就给大家讲解下如何通过Dash+Tailwindcss搭建可视化报表～

首先安装相关的Python库，然后导入。

importdashimportpandasaspdimportplotly.expressaspxfromdashimportdcc,html

使用到了Pandas、Plotly、dash这三个Python库。

我们需要把Tailwindcss的CDN作为external_script，并将其传递给我们的应用程序实例，这样我们才可以成功使用Tailwindcss。

#导入tailwindcss的CDNexternal_script=["https://tailwindcss.com/",{"src":"https://cdn.tailwindcss.com"}]#创建Dash实例app=dash.Dash(__name__,external_scripts=external_script,)app.scripts.config.serve_locally=True

使用Pandas创建水果销售数据，随便虚构了一个。

#创建数据df=pd.DataFrame({"Fruit":["苹果","橙子","香蕉","苹果","橙子","香蕉"],"Amount":[4.2,1.0,2.1,2.32,4.20,5.0],"City":["北京","北京","北京","上海","上海","上海"],})print(df)

结果如下，3列6行，包含水果、销售额、城市列。

处理一下相关的数据，水果单数、销售总额、城市单数、变量数。

#水果单数fruit_count=df.Fruit.count()#销售总额total_amt=df.Amount.sum()#城市单数city_count=df.City.count()#变量数variables=df.shape[1]

创建图表实例，一个柱状图、一个箱型图。

#柱状图1,不同水果不同城市的销售额fig=px.bar(df,x="Fruit",y="Amount",color="City",barmode="group")#箱型图1,不同城市的销售额分布情况fig1=px.box(df,x="City",y="Amount",color="City")

效果如下。

剩下就是文字模块啦，文字+CSS样式。

其中排版布局美化，通过Tailwindcss来实现。

app.layout=html.Div(html.Div(children=[html.Div(children=[html.H1(children="水果销售--可视化报表",className="py-3text-5xlfont-boldtext-gray-800"),html.Div(children="""PythonwithDash=????.""",className="text-leftproseprose-lgtext-2xlpy-3text-gray-600",),],className="w-fullmx-14px-16shadow-lgbg-white-mt-14px-6containermy-3",),html.Div(html.Div(children=[html.Div(children=[f"¥{total_amt}",html.Br(),html.Span("总销售额",className="text-lgfont-boldml-4"),],className="shadow-xlpy-4px-14text-5xlbg-[#76c893]text-whitefont-boldtext-gray-800",),html.Div(children=[fruit_count,html.Br(),html.Span("水果数量",className="text-lgfont-boldml-4"),],className="shadow-xlpy-4px-24text-5xlbg-[#1d3557]text-whitefont-boldtext-gray-800",),html.Div(children=[variables,html.Br(),html.Span("变量",className="inline-flexitems-centertext-lgfont-boldml-4"),],className="shadow-xlpy-4px-24text-5xlbg-[#646ffa]text-whitefont-boldtext-gray-800",),html.Div(children=[city_count,html.Br(),html.Span("城市数量",className="text-lgfont-boldml-4"),],className="w-fullshadow-xlpy-4px-24text-5xlbg-[#ef553b]text-whitefont-boldtext-gray-800",),],className="my-4w-fullgridgrid-flow-rowsgrid-cols-1lg:grid-cols-4gap-y-4lg:gap-[60px]",),className="flexmax-w-fulljustify-betweenitems-center",),html.Div(children=[html.Div(children=[dcc.Graph(id="example-graph",figure=fig),],className="shadow-xlw-fullborder-3rounded-sm",),html.Div(children=[dcc.Graph(id="example-graph2",figure=fig1),],className="w-fullshadow-2xlrounded-sm",),],className="gridgrid-cols-1lg:grid-cols-2gap-4",),],className="bg-[#ebeaee]flexpy-14flex-colitems-centerjustify-center",),className="bg-[#ebeaee]containermx-autopx-14py-4",)

效果如下。

最后启动程序代码。

if__name__=='__main__':#debug模式,端口7777app.run_server(debug=True,threaded=True,port=7777)#正常模式,网页右下角的调试按钮将不会出现#app.run_server(port=7777)

这样就能在本地看到可视化大屏页面，浏览器打开如下地址。

http://127.0.0.1:7777