1、title:寫標題,屬性如下
show:false/true 標題是否顯示;
text:標題內容;textstyle修飾標題樣式
subtext:副標題,也可以算是內容;subtextstyle修飾副標題樣式;
2、legentd:圖例元件展現了不同系列的標記(symbol),顏色和名字;
show:false/true 是否顯示;
data:圖例的資料陣列;
3、grid:直角座標系內繪圖網格,單個 grid 內最多可以放置上下兩個 x 軸,左右兩個 y 軸。可以在網格上繪製折線圖,柱狀圖,散點圖;
show:false/true 是否顯示;
top、left、right、bottom標識上左右下的邊距;
4、xaxis :直角座標系 grid 中的 x 軸,單個 grid 元件最多只能放上下兩個 x 軸。
type:座標軸型別。
'value' 數值軸,適用於連續資料。
'category' 類目軸,適用於離散的類目資料,為該型別時必須通過 data 設定類目資料。
'time' 時間軸,適用於連續的時序資料,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的範圍來決定使用月,星期,日還是小時範圍的刻度。
data:類目資料,在類目軸(type: 'category')中有效。
5、yaxis:直角座標系 grid 中的 y 軸,單個 grid 元件最多只能放左右兩個 y 軸。
type:座標軸型別。
'value' 數值軸,適用於連續資料。
'category' 類目軸,適用於離散的類目資料,為該型別時必須通過 data 設定類目資料。
'time' 時間軸,適用於連續的時序資料,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的範圍來決定使用月,星期,日還是小時範圍的刻度。
6、datazoom:元件 用於對資料進行區域縮放,從而能自由關注細節的資料資訊,或者概覽資料整體。
type:slider; 是否顯示 元件。如果設定為 false,不會顯示,但是資料過濾的功能還存在;
backgroundcolor:元件的背景顏色。
realtime:拖動時,是否實時更新系列的檢視。如果設定為 false,則只在拖拽結束的時候更新。
top、left、right、bottom標識上左右下的邊距;
7、tooltip:提示框元件。
show:false/true 是否顯示;
trigger:觸發型別;
'item'
資料項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。
'axis'
座標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。
8、color:調色盤顏色列表。如果系列沒有設定顏色,則會依次迴圈從該列表中取顏色作為系列顏色。
預設為:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'];
9、seriers:系列列表。每個系列通過type 決定自己的圖表型別;
series[i]-line:折線
itemstyle折線拐點標誌的樣式;
series[i]-bar:柱狀圖通過柱形的高度來表現資料的大小,用於有至少乙個類目軸的直角座標系上。
series[i]-pie:餅圖主要用於表現不同類目的資料在總和中的佔比。每個的弧度表示資料數量的比例。
10、itemstyle 樣式:
normal:color 顏色;
echart高階使用 Echart使用總結
水監測圖表.gif 1 專案中用到的一些屬性 const options yaxis else,折線點設定為實心點 symbolsize 12,折線點的大小 showbackground true,backgroundstyle itemstyle opacity 1 2 echart初始化的時候獲...
echar使用總結
1 獲取echart例項 在當前js檔案中載入公共元件utils.js,該檔案整合了常用的工具 var utils require utils utils中的方法集合 getecharts getecharts3 elem,option,isnotempty getecharts4 elem,opt...
echart使用小結
寫在前面。定義的接收圖表 的容器哦必須設定寬高。不然可能找不到就報錯 cannot read property getattribute of null 如果在vue專案裡面,寫了寬高還報這個錯就可能是頁面的容器還沒有載入完,他還沒有找到。動態新增資料 引入echart import echarts...