echars設定屬性參考

2021-10-10 22:09:24 字數 4632 閱讀 6045

圖表標題

title:

(x座標,單位px)

y:'top'

,// 垂直安放位置,預設為全圖頂端,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

//textalign: null // 水平對齊方式,預設根據x設定自動調整

backgroundcolor:

'rgba(0,0,0,0)'

, bordercolor:

'#ccc'

,// 標題邊框顏色

borderwidth:0,

// 標題邊框線寬,單位px,預設為0(無邊框)

padding:5,

// 標題內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap:10,

// 主副標題縱向間隔,單位px,預設為10,

textstyle:

, subtextstyle:

},

提示框

tooltip:

, shadowstyle :},

textstyle:

position:

function

(p),

formatter:

function

(params)

)var t ='';

t += params[0]

.axisvaluelabel +''

params.

foreach

(function

(val)

)return t;}}

,

圖例

legend:

(x座標,單位px)

y:'top'

,// 垂直安放位置,預設為全圖頂端,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

backgroundcolor:

'rgba(0,0,0,0)'

, bordercolor:

'#ccc'

,// 圖例邊框顏色

borderwidth:0,

// 圖例邊框線寬,單位px,預設為0(無邊框)

padding:5,

// 圖例內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap:10,

// 各個item之間的間隔,單位px,預設為10,

// 橫向布局時為水平間隔,縱向布局時為縱向間隔

itemwidth:20,

// 圖例圖形寬度

itemheight:14,

// 圖例圖形高度

top:5,

// 圖例距離上邊框位置

left:5,

// 圖例距離左邊框位置

textstyle:

},

x軸

xaxis :

, axislabel:},

axisline:}}

,

y軸設定

yaxis:[,

//去除網狀線 預設為true

axislabel:},

axisline:

} namelocation:

'end'

,//下面三個是設定雙y軸

scale:

true

,//座標軸起點不從0開始

position:

'left'

,//左邊y軸},

]*注意:設定雙y軸的時候值域series中要新增:yaxisindex:

0,或yaxisindex:1,

*

網格

grid:

- x - x2,

// height: - y - y2,

backgroundcolor:

'rgba(0,0,0,0)'

, borderwidth:1,

bordercolor:

'#ccc'},

或grid:

,

折疊型例子

var xdata =

;//近五年

var mydate =

newdate()

;for

(var i=

4;i>=

0;i--

)var data =

var colors =[[

'#09833a'

,'#7bf311'],

['#f36229'

,'#f9a24c'],

// ['#f9a14b', '#f36128'],

// ['#7af310', '#088339'],];

var _color =

['#f36128'

,'#088339'

,'#ffff00'];

var _options =},

textstyle:

, position:

function

(p),

formatter:

function

(params)

)var t ='';

t += params[0]

.axisvaluelabel +''

params.

foreach

(function

(val)

)return t;}}

, legend:

, data: data.legend

}, grid:

, xaxis:

, axisline:,}

, axistick:

, nametextstyle:

, data:data.area

}, yaxis:

, axisline:},

axistick:

, splitline:,}

, series:[}

, itemstyle:},

}]};

for(

var i =

0; i < data.legend.length; i++),

itemstyle:,]

, global:

false

// 預設為 false}}

},data: data.data[i]})

}

樣品

雙y軸示例

var data1=[,

,,,,

,,,]

var data2=[,

,,,,

,,,]

var _options =

, position:

function

(p)}

, legend:

, itemgap:40,

top:10}

, grid:

, xaxis:

, axislabel:

, axisline:},

},yaxis:[,

axislabel:

, axisline:},

splitline:,}

,,axislabel:

, axisline:},

splitline:,}

],series:[,

areastyle:,]

, global:

false

// 預設為 false}}

, symbolsize:3,

symbol:

'circle'},

, areastyle:,]

, global:

false

// 預設為 false}}

, symbolsize:3,

symbol:

'circle'}]

};

示例圖

first child CSS屬性參考

css first child偽類選擇器用於匹配父元素中的第乙個子元素。first child偽類選擇器僅僅會匹配某個父元素中的第乙個子元素,例如 article p 第乙個段落.p 第二個段落.如果使用下面的css規則來新增樣式,那麼第乙個段落的文字大小將被修改 p first child 但是如...

last child CSS屬性參考

css last child偽類選擇器用於匹配父元素中的最後乙個子元素。last child偽類選擇器僅僅會匹配某個父元素中的最後乙個子元素,例如 article p 第乙個段落.p 第二個段落.如果使用下面的css規則來新增樣式,那麼第二個段落的文字大小將被修改 p last child 但是如果...

日誌記錄屬性參考

字首 含義 s 伺服器操作 c 客戶端操作 cs 客戶端到伺服器的操作 sc 伺服器到客戶端的操作 字段表示為 描述日期 date 執行操作的日期。時間time 活動發生的時間。客戶端 ip 位址 c ip 訪問伺服器的客戶端 ip 位址。使用者名稱cs username 訪問伺服器的已驗證使用者的...