圖表標題
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 訪問伺服器的已驗證使用者的...