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

本人大学刚毕业目前在一家互联网公司从事产品运营工作，一季度刚过，公司需要我出一份产品运营数据报表，由于产品用户数据、订单数据等数据量太大，我希望找一款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/intro

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

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都支持。

预览效果：

以上就是我这几天自己动手的成果，整个数据视图不需要借助任何软件，便于分享，不管是数据视图还是源文件预览都没有设备和浏览器障碍。