pyecharts FAQ

Q: 如何離線使用 pyecharts？

A: 如果需要在不能聯(lián)網(wǎng)的環(huán)境上使用 pyecharts，需要離線安裝 pyecharts 以及提供本地靜態(tài)資源 HOST 服務。

找一臺可以聯(lián)網(wǎng)的機器，執(zhí)行以下步驟

# 先安裝 pyecharts
$ pip install pyecharts
$ cd ~ && mkidr pyecharts-dep && cd pyecharts-dep
# 將 pyecharts 用到的所有依賴下載到 pyecharts-dep 文件夾
$ pip download pyecharts
# clone pyecharts-assets 項目
$ git clone https://github.com/pyecharts/pyecharts-assets.git
# 將 pyecharts-dep 文件夾打包，傳輸?shù)叫枰x線使用 pyecharts 的機器里

切換到離線使用的機器，執(zhí)行以下步驟

# 1.先安裝 pyecharts-dep 中除 pyecharts-X.Y.Z-py2.py3-none-any.whl 的其他包
$ ls | grep -v "^pyecharts*" | xargs pip install
# 2.安裝 pyecharts-X.Y.Z-py2.py3-none-any.whl 包
$ ls | grep "pyecharts*" | xargs  pip install
# 3.啟動本地服務
$ cd pyecharts-assets && python -m http.server

Q: 關于 JSCode 在 Web 框架中使用前后端分離模式情況下出現(xiàn)解析異常

A1: 由于 json 數(shù)據(jù)類型的問題，無法將 pyecharts 中的 JSCode 類型的數(shù)據(jù)轉換成 json 數(shù)據(jù)格式返回到前端頁面中使用。因此在使用前后端分離的情況下盡量避免使用 JSCode 進行畫圖。

A2: 暫時的解決方案如下(以使用 Jquery Ajax 獲取數(shù)據(jù)的情況為例):

前端部分

$.ajax({
    type: "GET",  // POST 獲取其他
    url: "<后端的數(shù)據(jù)接口>",
    dataType: 'json',
    success: function (result) {
        // console.log(result);
        let jsonResult = JSON.stringify(result);
        jsonResult = JSON.parse(jsonResult, function (key, value) {
           if (value.match(/(?:\/\*[\s\S]*?\*\/|\/\/.*?\r?\n|[^{])+\{([\s\S]*)\}$/) !== null) {
               return eval("(" + value + ")");
           } else {
               return value;
           }
        });
        // chart 是事先在全局定義的 echarts 的 init 的變量名
        chart.setOption(jsonResult);
    }
});

后端部分(只給出畫圖核心的代碼部分, 以 Line 圖為例)

def line_base() -> Line:
    line = (
        Line()
        .add_xaxis(list(range(10)))
        .add_yaxis(series_name="", y_axis=[randrange(0, 100) for _ in range(10)])
        .set_global_opts(
            yaxis_opts=opts.AxisOpts(
                axislabel_opts=opts.LabelOpts(
                    is_show=True, formatter="function(params) { return params + 8;}"
                )
            )
        )
        .dump_options_with_quotes()  # 保留 JS 方法引號
    )
    return line

前端主要就是在解析 json 的情況下通過 JSON.parse 的回調(diào)函數(shù)進行處理。通過右側的正則表達式判斷是否為 js 的 function ?/(?:\/\*[\s\S]*?\*\/|\/\/.*?\r?\n|[^{])+\{([\s\S]*)\}$/?，從而避免字符串的同名沖突的問題。

示例如下: 

Q: Tooltip 中使用 '\n' 換行無效的問題

A: 請使用 ?<br/>? 代替 ?\\n?