轉 echarts 的使用時遇到的坑 初始化和銷毀,親測有效!

来源:https://www.cnblogs.com/zxy-come-on/archive/2019/06/25/11083962.html
-Advertisement-
Play Games

縱觀ECharts圖表實例化的API,主要有一下幾個相關的實例化方法: 1、setOption(Object option,{boolean = true} notMerge) 參數: 1)、Object類型的參數 option,表示圖表數據結構 ,形如: 1.var option = { 2. t ...


縱觀ECharts圖表實例化的API,主要有一下幾個相關的實例化方法:

1、setOption(Object option,{boolean = true} notMerge)

參數:

1)、Object類型的參數 option,表示圖表數據結構 ,形如:

 

  1.var option  = { 2.                title: { 3.                    text: "我的第一個ECharts圖表示例" 4.                }, 5.                tooltip: { 6.                    trigger: 'axis' 7.                } 8.            };

 

2)、boolean notMerge,表示是否合併option。預設為false,可以不設置。

描述:

萬能介面,配置圖表實例任何可配置選項(詳見option),多次調用時option選項是預設是合併(merge)的,如果不需求,可以通過notMerger參數為true阻止與上次option的合併。

2、getOption()

描述:

返回內部持有的當前顯示option克隆

3、setSeries(Array series,{boolean=}notMerge)

參數:

1)、Array類型的series序列數據,形如:

 

  01.var Array seriesList = new Array(); 02.  03.var seriesObj = new seriesObj(); 04.seriesObj.name = "蒸發量"; 05.seriesObj.type = "line"; 06.seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]; 07.  08.//設置series 09.myChart.setSeries(seriesList,false);

 

2)、boolean notMerge 表示是否合併series,預設為false,可以不設置。

描述:

數據介面,驅動圖表生成的數據內容,效果等同調用setOption({series:{...}})

4、getSeries()

描述:

返回內部持有的當前顯示series克隆,效果同return getOption().series

5、addData(....)

參數:

1)、單組數據參數

11)、{number} seriesIdx :表示給哪一條series添加數據,series腳標從0開始;

12)、{number | Object} data;

13)、{boolean=} isHead ;

14)、{boolean=} dataGrow;

15)、{string=} additionData;

2)、多組數據參數

其實就是多個單組數據的形成的集合或者數組{Array} params

描述:

動態數據介面

seriesIdx 系列索引 

data 增加數據 

isHead 是否隊頭加入,預設,不指定或false時為隊尾插入 

dataGrow 是否增長數據隊列長度,預設,不指定或false時移出目標數組對位數據 

additionData 是否增加類目軸(餅圖為圖例)數據,附加操作同isHead和dataGrow 

多組數據添加時參數為: 

params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]

6、on(string eventName,function eventListner)

描述:

事件綁定,支持事件有:REFRESH,RESTORE,CLICK,HOVER,DATA_CHANGED,MAGIC_TYPE_CHANGED,DATA_VIEW_CHANGED,DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED,MAP_SELECTED

示例代碼形如:

 

  1.//ECharts圖表的click事件監聽 2.myChart.on("click", function () { 3.        alert("你點擊我了!"); 4.});

 

7、un(string eventName,function eventListner)

描述:

解除某個事件的綁定,示例代碼形如:

 

  1.myChart.un("click", function () { 2.             alert("悲劇,你註銷我了!"); 3.});

8、showLoading(Object loadingOption)

描述:

過渡控制(詳見loadingOption),顯示loading(讀取中)代碼片段形如:

 

  01.//圖表顯示提示信息 02.myChart.showLoading({ 03.    text: "圖表數據正在努力載入...", 04.    x: "center", 05.    y: "center", 06.    textStyle: { 07.        color:"red", 08.        fontSize:14 09.    }, 10.    effect:"spin" 11.});

註意:

 

9、hideLoading()

描述:

隱藏圖表數據載入過度提示信息,示例代碼:

 

  1.myChart.hideLoading();

 

10、getZrender()

描述:

獲取當前圖表所用ZRender實例,可用於添加額外圖形或進行深度定製,zrender介面詳見ZRender 示例代碼如下所示:

 

  1.nyChart.getZrender();

 

11、getDataURL(string imgType)

描述:

獲取當前圖表的Base64圖片dataURL,imgType 圖片類型,支持png|jpeg,預設為png

示例代碼如下所示:

 

  1.var imgUrl = myChart.getDataURL("png");

12、getImage(string imgType)

描述:

獲取一個當前圖表的img,imgType 圖片類型,支持png|jpeg,預設為png,示例代碼片段:

 

  1.//前端導出圖表圖片 2.var imgObj = myChart.getImage("jpeg");

 

主要是拿到一個圖片對象,然後獲取其outerHTML屬性就是一個圖表image的html完整標簽,我們可以使用其直接顯示在頁面上。

13、resize()

描述:

ECharts沒有綁定resize事件,顯示區域大小發生改變內部並不知道,

使用方可以根據自己的需求綁定關心的事件,主動調用resize達到區域更新的效果。

 

  1.myChart.resize();

 

14、refresh()

描述:

刷新圖表,圖例選擇、數據區域縮放,拖拽狀態均保持。

 

  1.myChart.refresh();

 

15、restore()

描述:

還原圖表,各種狀態均被清除,還原為最初展現時的狀態。

16、clear()

描述:

清空繪畫內容,清空後實例可用,因為並非釋放示例的資源,釋放資源我們需要dispose()

 

  1.myChart.clear();

 

17、dispose()

描述:

釋放圖表實例,釋放後實例不再可用。

 

  1.myChart.dispose();

 

目前ECharts圖表的實例化主要包含當前十七個相關方法,後期不保證有補充的節奏,就目前來說,這十七個已經夠用了的。

註意:

1、以上方法的使用前提都是需要獲得ECharts初始化對象過後才可以進行,否則會產生報錯現象。

 

 

此文來源於:https://blog.csdn.net/Uncle_long/article/details/80483175


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • lsof介紹 安裝lsof 使用lsof ...
  • 什麼時候需要安裝 如果使用 protoc 命令,遇到 Protoc not found ,表示未安裝。或者,執行時出現錯誤: This parser only recognizes "proto2" ,則表示不是3.0版。 安裝過程及可能遇到的問題 安裝指令 詳細介紹請參考此文: "protobuf ...
  • 前言 最近一段時間都在做小程式。 雖然是第二次開發小程式,但是上次做小程式已經是一年前的事了,所以最終還是被坑得死去活來。 這次是從零開始開發一個小程式,其實除了一些莫名其妙的相容性問題,大多數坑點都是在微信小程式的各個入口場景處。 所以這裡整理一下微信小程式的各個入口場景,以及從這些入口場景進入小 ...
  • 背景 起因是產品的需求,需要更換Electron為底層平臺,但因為會有不少定製化的功能要實現,必須自己實現此類內容,所以也就導致必須自己編譯Electron的源代碼。 整個構建過程,看Electron的構建文檔就行了:https://github.com/electron/i18n/blob/mas ...
  • em與rem之間的區別: 共同點: 不同點: 實例: rem適配方案: 核心原理:寬度和高度都能做到適配(等比縮放) 通過控制 html 元素上的字體大小去控制頁面上所有以rem為單位的基準值,控制尺寸 核心換算公式:當前rem基準值 = 預設基準值 / 設計稿寬度 * 當前設備的寬度 技術:媒體查 ...
  • 1. uni app採坑記錄 1.1. 前言 1. 這裡記錄下uni app實踐中踩的坑 1.2. 坑點 1.2.1. 觸發事件 和`@longpress` 這兩個都表示長按觸發事件,那麼這兩個有啥區別呢? 經過實踐,發現在微信和h5端只有longpress起效果,在支付寶小程式端只有longTap ...
  • fetch 一個獲取資源的介面,類似於 "ajax" 是基於 之上設計,舊版本IE 完全不支持,須藉助 "polyfill" 來相容 提供了對 Request 和 Response (以及其他與網路請求有關的)對象的通用定義 發送請求或者獲取資源,需要使用 window.fetch or Windo ...
  • 一、進行連接遠程: 1、命令視窗 —> 輸入 ssh 用戶名@主機IP —> 回車 2、輸入密碼 (輸入後回車) 3、進入根目錄 (命令:cd / ) 二、Linux環境安裝node: Tip: /usr/bin中裝的是系統預裝的可執行程式 /usr/local/bin中是用戶放置自己的可執行程式的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...