1.繪制一個矩形,用于之后存放圖表,將其命名為test:
2.新建交互 -> 載入時 -> 打開鏈接:
3.鏈接到URL或文件路徑:
4.點擊fx:
5.輸入:
javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){var dom =$('[data-label=test]').get(0);var myChart = echarts.init(dom);var option = {};if (option && typeof option === "object"){myChart.setOption(option, true); }}, 800);
注意輸入內容不能包含中文;矩形名稱為test,如果是其他名字要將data-label=test
改成其他名字。
代碼解釋:
javascript:
//引入ECharts庫
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);//獲取插入的矩形框對象,test是上面取得名字,如果是其它名字,則進行替換//這里用了定時器來延遲圖表載入時間,測試時發現剛引入ECharts庫就執行圖形代碼可能會出錯。setTimeout(function(){//獲取插入的test矩形框,作為圖表繪制的容器,如果前面矩形框為其它名字,則test改為對應的名字var dom =$('[data-label=test]').get(0);//初始化var myChart = echarts.init(dom);var option = {/*在此處粘貼ECharts官網的示例代碼*/};//設置數據if (option && typeof option === "object"){myChart.setOption(option, true); }}, 800);
6.在echarts官網找到需要的圖表代碼,將下面option的這段代碼替換上述代碼的 var option = {};
7.保存原型并預覽即可: