告別收費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都支持。

 

預覽效果：

 

 

 

 

以上就是我這幾天自己動手的成果，整個數據視圖不需要借助任何軟件，便於分享，不管是數據視圖還是源文件預覽都沒有設備和瀏覽器障礙。