BI Echarts圖表整合插件

1.1 版本

1.2 功能場景

安裝BI Echarts圖表整合插件後，FineBI可以對接Echarts圖表，圖表組件類型支援Echarts圖表

2.1 插件安裝

• 插件獲取：BI Echarts圖表整合插件

• 設計器插件安裝方法參照：伺服器-設計器插件管理

• 伺服器安裝插件方法參照：插件管理

2.2 插件使用

2.2.1 建立圖表組件

在分析主題介面，新增組件，進入組件編輯介面，圖表類型選擇Echarts圖表

2.2.2 編輯圖表組件

1）拖入資料欄位

將資料集中需要使用的欄位拖入圖表編輯區

2） 編輯資料算子

資料算子，支援對原始圖表資料（主要的內容有欄位配置（fileds）和按列儲存的二維表資料（colData））進行進一步處理

旭日圖資料算子範例

function dataCal(originData) {  
    var dataModels = originData.dataModels;   
   var colData = dataModels[0].colData;   
   var data;   
   var map = {};    
   var arr = [];    
   for (var i = 0; i < colData[0].length; i++) {        
         var id = colData[0][i];        
         var pid = colData[1][i];        
         var name = colData[2][i];        
         var value = colData[3][i];        
         if (map[id]) {            
              map[id].name = name;            
              map[id].value = value;        
         } else {            
              map[id] = {                
                      name: name,               
                      value: value,                
                      children: []            
         }       
         }        
         if (pid && pid.length > 0) {            
                if (!map[pid]) {                
                      map[pid] = {                    
                             children: []               
                }            
                }           
                map[pid].children.push(map[id]);       
         }        
         if (!pid || pid.length === 0) {            
                 data = map[id];    
      }   
   }    
   return data.children;
}

參數說明：

3 ）編輯配置算子

配置算子，基於上一步處理的資料，匯出圖表配置（對應Echarts的屬性配置）

旭日圖配置算子範例

// 同步呼叫
function optionCal(data, chartConfig) {
    var option = {
        series: {
            type: 'sunburst',
            // emphasis: {
            //     focus: 'ancestor'
            // },
            data: data,
            radius: [0, '90%'],
            label: {
                rotate: 'radial'
            }
        }
    };
    return option;
}
// 非同步呼叫，需要控制好載入邏輯，比如有些非同步資源只能載入一次
function optionCal(data, chartConfig, callbackFun) {
var option = {
        series: {
            type: 'sunburst',
            // emphasis: {
            //     focus: 'ancestor'
            // },
            data: data,
            radius: [0, '90%'],
            label: {
                rotate: 'radial'
            }
        }
    };
    callbackFun({
    option: option,
   chartContainerCb: function(myChart) {
      console.log(myChart);
    }
  });
}

說明：

4）預覽圖表

資料算子和配置算子編輯完成後，點選運作，可以在右側預覽圖表樣式，如果此時開啟了後端計算，則配置算子需要儲存後才可生效

5）進階配置

資料後端計算：預設關閉，此時資料算子走前端計算；開啟後，資料算子將在後端執行

2.2.3 範本管理

1）另存範本

點選另存範本，彈窗編輯名稱、描述、公共範本等配置資訊，點選確定儲存。可以選擇新增模版或者更新已有範本。

開啟公共範本後，其他使用者可以在引用範本中看到並引用。

儲存成功後，可在範本引用彈窗中選擇對應範本。

2）引用範本

點選引用範本按鈕，彈窗中可選擇個人和公共範本進行引用

範本引用成功後，支援繼續設定算子同步（預設開啟同步，關閉同步後，可以自行編輯配置）或者關閉範本引用

3）刪除範本

刪除範本，當前支援刪除個人下的非公共範本

2.2.4 圖表組件應用

儀表板編輯頁面新增組件，即可預覽

2.2.5 全局配置

JS引擎：後端計算相關，預設呼叫J2V8（需工程支援J2V8），如不支援，嘗試呼叫NASHORN

3. 注意事項

1） 資料格式轉換相關：數值格式當前不支援，僅傳遞原始圖表資料；前端計算模式下，日期欄位支援格式轉化（後端計算開啟時不支援）

2）不支援行動端

3）不支援後臺匯出

4）暫不支援跳轉和聯動其他組件（其他組件可單項聯動echarts圖表組件）