Echarts的一些零碎操作知識

1,關於地圖的大小控制:

首先需要知道一點Echarts的圖表(地圖)一般都是根據一個div進行初始化,而這個div的大小基本上就是圖表的大小,如果圖表有些默認設置小於div的大小則會變成默認設置的大小,而此時如果要控制生成的圖表的大小以及圖表所在位置(用於構造圖表的div中的位置)就需要依賴一個屬性:mapLocation這個屬性屬於series,是一個子屬性,其中包括位置以及大小的設置。例如:

 mapLocation:{
              x:'10',
               y:'10',
               width:'80%',
               height:'80%'
             }

上面的操作即可實現將地圖顯示在要初始化echarts的div的左上角距離上和左個10px的位置而地圖大小則爲div大小的80%


2,關於折線圖或者柱狀圖等有座標系的圖表的大小控制:

還是這個老問題用於初始化圖表的div的大小並不一定恰好適合默認設置的圖表大小所以我們也需要手動的進行大小位置的調整,關於有座標系的設置比較簡單是Option下面的一個屬性:grid,grid的子屬性有很多關於顯示位置(以左上角爲基準:x和y,x2和y2爲右下角座標),圖表的大小(width,height)


3,關於Echart的地圖的鼠標滾輪縮放功能:

這個功能還是比較簡單的,由於本文的目的就是要做一些記錄性的整理,很簡單的一個設置:

option下series下的roam他的默認值是false即沒有縮放功能,改爲true即可


4,關於Echart的動態數據顯示的注意事項

這個其實也還是比較簡單的,Echart的大部分屬性(應該是所有吧)都是可以接受變量值的,所以動態顯示數據的操作基本上就是,在構造圖表所需要的option的時候對於數據部分的賦值操作讓他等於一個變量,而每次動態跟換數據的時候只需要改變變量的值然後將option重新設置即可。

5,動態畫點,畫線

這裏所說的畫點畫線主要是指在地圖上的操作,首先需要說明這些操作基本上都是需要依賴這幾個屬性:畫點就是series下的MarkPoint,畫線就是MarkLine,需要注意的就是這些所謂的點和線之所以能夠在地圖上面顯示主要還是需要地圖上對應的要進行換點和畫線的位置區域有座標,這是最關鍵的,比如說你把中國地圖導入了,在畫點的時候用markPoint操作,裏面一些關於點的樣式設置自己看去,重點是data部分在裏面放上name和value(name爲區域名稱value爲點在tooltip中顯示的值)如果要顯示這個name的區域座標必須已經在Echart所初始化的地圖中可以找到了。所以會導致你話北京的點能畫上但是畫你家縣城的點就不一定能畫上了,所以對於這個問題的解決纔是這部分問題的關鍵所在,首先需要先說明一點:在地圖的json或js文件中很可能已經有一些區域的座標信息,但是這個不是絕對的(打開json或js就可以看到)在瞭解這個之後就需要說一下這個屬性:series下的geoCoord,這個屬性在Echarts3.0中好像沒有找到,但是在2版本中是有明確定義的而且在三中也有隻是沒有顯示的寫出了,而這個geoCoord其實就是一個地圖上區域的經緯度的一個數據集合,所以,我們也可以將我們獲取到的區域座標賦值給他,就可以解決畫出json中沒有座標的點的要求,還有一個辦法也是解決這個問題的,如果你提前知道你所要畫點的經緯度則可執行這樣的操作,在畫點的時候markPoint的data中,不僅僅傳遞name,valu的值還要加上一個屬性就是geoCoord對應的跟的值就是座標值。下面舉例:

data:[{name:'北京',value:'20',geoCoord:[北京的經緯度]}]


6,圖表的自定義顯示操作(按照自己的需求去顯示數據)

這個呢也比較簡單,總之就是一句話,查文檔然後利用對應所要設置的組件的回調函數formatter進行設置,很簡單

7,關於Echart的一些事件以及動作

還是查看文檔,文檔能夠解決你百分之90的問題,其次要說的一點就是,var  mychar = Echarts.init(document.getElementById('對應dom節點id'));  進行Echarts的初始化這個操作其實就是把mychar變成一個具備Echarts各種屬性操作的一個對象了,所以對於事件和動作基本上就是對他的操作:

mychar.on('事件類型',function(){}); 這裏的事件類型有點擊和雙擊很多的還是看官網,對應位置在文檔裏的API的event

而動作什麼的就是對應的action,添加方法類似:

mychar.dispatchAction({

type:'' //這裏的type設置對應動作的類型即可

//下面在進行相關動作屬性的設置,不同的動作屬性不同按照需求查文檔

});

這樣這個Echart就會擁有對應的動作

8,多個Echarts圖表的聯動

// 分別設置每個實例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接傳入需要聯動的實例數組
echarts.connect([chart1, chart2]);




總之:還是一句話,多看官網上的文檔配置項手冊,但是,切記注意Echart的版本問題,今天博主就遇到一個坑,拿着Echart3.0的文檔調2.2.7的圖,結果當然是一整天無功而返,最後才頓悟(在調試的時候千萬不要被自己的瀏覽器緩存給坑了)

發佈了36 篇原創文章 · 獲贊 13 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章