Quick BI 最新版本 (>=V4.6.1) 支援了自訂群組件線上編輯模式。在該模式下，自訂群組件的開發和調試將在頁面中進行。該模式下有一個 "插入 Echarts 代碼" 功能，可以將 echarts 官網的樣本組件代碼快速接入到自訂群組件中，方便進行二次開發或者示範。本文將介紹該功能的使用方式。
一. 進入線上編輯
首先需要建立自訂群組件並進入到編輯模式，請參見調試組件。
配置欄位資訊，並完成取數。
二. 擷取 charts 範例程式碼
前往 echarts 樣本，挑選樣本圖。
點擊進入代碼詳情頁，選擇 "代碼編輯" 卡片和 "JS" 選項，全選左側代碼並複製，得到的 option配置。
需要注意的是，"插入 echarts 代碼" 功能接收的是 echarts 的 option 組態變數，具體可以查看產生之後的代碼，因此複製代碼時，要看是否有 option = {...} 這個變數 （echarts 官網大多數範例程式碼都可以直接全選複製）. 如果遇到不標準的情況，需要具體查看一下代碼，把裡面的 option = {...}變數複製出來。
三. 產生代碼
1. 添加依賴
點擊 "添加三方庫"。
選擇 echarts。
Quick BI 中預置了 echarts V5.4.0 版本，如果需要其他版本的 echarts 版本，可以自行填入CDN路徑或者手動上傳 js 庫，
2. 插入 echarts 代碼
點擊 "插入 echarts 代碼"。
將第二步中擷取到的 option代碼貼入輸入框中，點擊確認。
點擊 "運行" 按鈕即可預覽 echarts 圖表。
下一步
此時您已經將 echarts 範例程式碼整合到了自訂群組件中，但是現在圖表的資料是待用資料，還沒有將資料集的資料真正灌入到自訂群組件中，下一步您需要參考自訂群組件API，將 Quick BI 的資料格式轉化為 echarts 的資料格式，綜合案例請參見完整樣本：開發一個echarts圖表。