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圖表。