告別收費BI!如何自己動手做一個免費的視覺化資料包表還支援文件線上預覽？

徐駿發表於2022-04-11
視覺化

本人大學剛畢業目前在一家網際網路公司從事產品運營工作，一季度剛過，公司需要我出一份產品運營資料包表，由於產品使用者資料、訂單資料等資料量太大，我希望找一款Bi產品，支援我做出一個精美的視覺化報表，還可以讓我直接在報表內容檢視原始資料文件，我從以下兩個點去逐步實現我的需求：

1、資料視覺化：在網上找了一些Bi工具，無一例外都需要收費，最後決定自己嘗試pyecharts來實現，好在有自學Python的基礎，實現起來不難；
2、資料文件線上預覽：選了pyecharts之後，由於最後展現的是一個web檢視，需要在web頁面直接檢視原始的excel文件，這個實現難度比較大，網上苦尋三天無果，即將放棄時刻找到了永中雲預覽外掛版，如獲至寶，最重要的是隻要2行程式碼即可實現，而且完全免費！

以下是我的資料視覺化報表截圖：
image.png
image.png

下面來簡單講下如何實現：
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,)
                         )
)

效果如下：
image.png

做好各個檢視後

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

通過page.add（）將前面製作的檢視放在一個頁面，最後通過page.render（）生成一個html頁面
，再對生成的html做適當的樣式調整，就得到了我上面展示的最終效果。

2、文件線上預覽:
先下載免費外掛

image.png
將下載好的外掛放在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都支援。

預覽效果：
image.png
image.png

以上就是我這幾天自己動手的成果，整個資料檢視不需要藉助任何軟體，便於分享，不管是資料檢視還是原始檔預覽都沒有裝置和瀏覽器障礙。

相關文章