乐趣区

关于前端:告别收费BI如何自己动手做一个免费的可视化数据报表还支持文档在线预览

jiezi

自己大学刚毕业目前在一家互联网公司从事产品经营工作，一季度刚过，公司须要我出一份产品经营数据报表，因为产品用户数据、订单数据等数据量太大，我心愿找一款 Bi 产品，反对我做出一个精美的可视化报表，还能够让我间接在报表内容查看原始数据文档，我从以下两个点去逐渐实现我的需要：

1、数据可视化：在网上找了一些 Bi 工具，无一例外都须要免费，最初决定本人尝试 pyecharts 来实现，好在有自学 Python 的根底，实现起来不难；
2、数据文档在线预览：选了 pyecharts 之后，因为最初展示的是一个 web 视图，须要在 web 页面间接查看原始的 excel 文档，这个实现难度比拟大，网上苦寻三天无果，行将放弃时刻找到了永中云预览插件版，如获至宝，最重要的是只有 2 行代码即可实现，而且完全免费！

以下是我的数据可视化报表截图：

上面来简略讲下如何实现：
1、数据可视化报表 

import pandas as pd
from pyecharts import options as opts
from pyecharts.charts import Geo, Page, Grid
from pyecharts.globals import ChartType, SymbolType
from pyecharts.charts import Liquid
from pyecharts.charts import Funnel
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar,Bar3D
from pyecharts.charts import Pie
from pyecharts.charts import Line, EffectScatter
from pyecharts import charts

Python 库：
Pandas：次要来读取 excel 源数据；
Pyecharts：Bar 柱状图，Pie 饼形图，Geo 地图，Liquid 水滴图，Funnel 漏斗图，Line 折线图
当然还有其余图标没有用到有须要的能够到官网查阅相干文档：https://pyecharts.org/#/zh-cn…

以其中一个数据视图产品渠道推广和渠道激活为例，我须要做一个饼图来展现 

pie_moblie = (Pie()
        .add(
        "推广费",
        [list(z) for z in zip(qudao_mobile, cost_mobile)],
        radius=["20%", "45%"],
        center=["22%", "50%"],
        rosetype="radius",
        label_opts=opts.LabelOpts(is_show=True,formatter='{b}:{d}%' ),
    )
        .add(
        "激活量",
        [list(z) for z in zip(qudao_mobile, jihuo_mobile)],
        radius=["20%", "45%"],
        center=["70%", "50%"],
        rosetype="area",
        label_opts=opts.LabelOpts(is_show=True,formatter='{b}:{d}%'),
    )
        .set_global_opts(title_opts=opts.TitleOpts(title="2022 年一季度各渠道耗费 & 激活"),
                         legend_opts=opts.LegendOpts(is_show=True,)
                         )
)

成果如下：

做好各个视图后 

page.add(bar3,c3,pie_mobile)
page.render('test.html')

通过 page.add（）将后面制作的视图放在一个页面，最初通过 page.render（）生成一个 html 页面
，再对生成的 html 做适当的款式调整，就失去了我下面展现的最终成果。

2、文档在线预览:
先下载收费插件


将下载好的插件放在 html 雷同的目录下，再依照示例代码把相应的代码加到刚刚生成的 html 里 

        <div id="click" style="text-align: center; font-size: 10px;font-weight: bold;margin-top:40px;margin-bottom: 70px;"> 点击查看源数据 </div>
    <script>
 
        const url = 'https:/xxxx.com/1.docx'; // url 为预览文件地址
 
        document.getElementById('click').onclick = function() {getFileUrl(url) // 调用 getFileUrl 办法，预览文件
 
        }

在 URL 上填写文件的 url 地址，这样页面上就会呈现“点击查看源数据”，点击后就能够间接在线预览 office 文件，不须要启动本地 Office 软件，word excel ppt pdf 都反对。

预览成果：

以上就是我这几天本人入手的成绩，整个数据视图不须要借助任何软件，便于分享，不论是数据视图还是源文件预览都没有设施和浏览器阻碍。

退出移动版