准備工作
先找個一個自己覺得不錯的echarts案例,這里就直接拿官網的案例來做樣板。https://echarts.apache.org/examples/zh/editor.html?c=line-aqi
打開瀏覽器的調試模式。谷歌瀏覽器是ctrl+shift+i
找出option配置
在查看圖表元素內容的時候可以找到一個叫_echarts_instance_的屬性,里面記錄一串數字,其實這個是echarts的id,在這里我們復制這串id
之后我們把調試窗口選中console標簽里,然后輸入echarts,可以看到能獲得echarts對象。到這一步大家應該想到了吧,只要通過id應該就能找到當前這個圖標echarts的對象
現在我們就來找到這個圖表對象,並通過它的getOption方法獲得它的配置樣式。在輸入框中輸入 var obj = echarts.getInstanceById("ec_1626768676949"); console.log(obj.getOption());
可以看到我們已經打印出這個圖表的配置內容,也就是option的內容。之后我們只要簡單的改一改里面數據的參數就可以一模一樣的弄出案例的圖表了
如果你覺得打印出來的內容抄的不方便,你可以存入localStorage里面。這樣查看起來更方便。在輸入框中輸入 var obj = echarts.getInstanceById("ec_1626768676949"); console.log(obj.getOption());localStorage.setItem("obj",JSON.stringify(obj.getOption()));