echarts常用屬性記錄

霏霜發表於2024-04-16

title:標題相關

show:true, //true(顯示) | false(隱藏)
text: '主標題',
subtext: '副標題',
x:'center' //水平位置 'center' | 'left' | 'right' | {number}(x座標,單位px)
y: 'top', //垂直位置'top' | 'bottom' | 'center' | {number}(y座標,單位px)
textAlign: null ,//水平對齊方式,預設自動, left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //標題背景顏色
borderColor: '#ccc', //標題邊框顏色
borderWidth: 0, //標題邊框線寬
padding: 5, //標題內邊距
itemGap: 10, //主副標題縱向間隔

legand:圖例相關

show:是否顯示
orient: 'vertical'‘horizontal ’
x:'center' //水平位置,'center' | 'left' | 'right' | {number}(x座標,單位px)
y: 'top', //垂直位置,'top' | 'bottom' | 'center' | {number}(y座標,單位px)
itemGap: 40 //圖例之間的距離
name: '搜尋引擎',
icon: 'circle',
textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } //圖例文字樣式

tooltip:提示相關

trigger: 'item'/'axis' 觸發方式
triggerOn: 'click' 觸發條件
formatter: `{a}<br>{b}月: {c}` // 格式化 {a}(系列名稱),{b}(資料項名稱),{c}(數值), {d}(百分比)
formatter: function(arg) { console.log(arg) return 'xxx' } //回撥函式格式

xAxis:x軸相關

show: true, //是否顯示
gridIndex: 0, //軸所在grid索引,預設位於第一個grid
alignTicks: false, //在多個軸為數值軸的時候,可以開啟該配置項自動對齊刻度。只對'value'和'log'型別的軸有效
position: 'top', //軸的位置(top/bottom)
offset: 0, //軸相對於預設位置的偏移,在相同的position上有多個軸時有用
type: 'category', //座標軸型別,值category/value,與y軸呼應,若x軸配置category則y軸配置value
name: '', //座標軸名稱
nameLocation: 'end', //座標軸名稱顯示位置,可選值start/middle[或者center]/end
nameGap: 15, //座標軸名稱與軸線間距離
nameRotate: 10, //座標軸名字旋轉,角度值
inverse: false, //是否是反向座標軸
boundaryGap: ['20%', '20%'], // 座標軸兩邊留白策略,也可以使用布林值,true居中
min: '', //刻度最小值
max: '', //刻度最大值
scale: false, //只在數值軸中type: 'value'有效, 設定min和max後無效。是否是脫離 0 值比例。設定成true後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中較有用
splitNumber: 5, //座標軸的分割段數(預估值)
minInterval: 0, //自動計算座標軸最小間隔,例:設定成1,刻度沒有小數
maxInterval: '', //自動計算座標軸最大間隔
axisLine: {
show: true, // 是否顯示座標軸軸線
symbol: ['none', 'arrow'], // 軸線兩端箭頭,兩個值,none表示沒有箭頭,arrow表示有箭頭
symbolSize: [10, 15], // 軸線兩端箭頭大小,數值一表示寬度,數值二表示高度
lineStyle: {
color: '#333', // 座標軸線線的顏色
width: '5', // 座標軸線線寬
type: 'solid', // 座標軸線線的型別(solid實線型別;dashed虛線型別;dotted點狀型別)
},
},
axisTick: {
show: true, // 是否顯示座標軸刻度
inside: true, // 座標軸刻度是否朝內,預設朝外
length: 5, //座標軸刻度的長度
lineStyle: {
color: '#FFF', //刻度線的顏色
width: 10, //座標軸刻度線寬
type: 'solid', //座標軸線線的型別(solid實線型別;dashed虛線型別;dotted點狀型別)
},
},
axisLabel: {
show: true, //是否顯示刻度標籤
interval: '0', //座標軸刻度標籤的顯示間隔,在類目軸中有效.0顯示所有
inside: true, //刻度標籤是否朝內,預設朝外
rotate: 90, //刻度標籤旋轉的角度,在類目軸的類目標籤顯示不下的時候可以透過旋轉防止標籤之間重疊;旋轉的角度從-90度到90度
margin: 10, //刻度標籤與軸線之間的距離
// formatter 刻度標籤的內容格式器,支援字串模板和回撥函式兩種形式
color: '#FFF', // 刻度標籤文字的顏色
fontStyle: 'normal', // 字型的風格(normal無樣式;italic斜體;oblique傾斜字型)
fontWeight: 'normal', // 字型的粗細(normal無樣式;bold加粗;bolder加粗再加粗;lighter變細;數字定義粗細也可以取值範圍100至700)
fontSize: '20', //文字字型大小
align: 'left', // 文字水平對齊方式,預設自動(left/center/right)
verticalAlign: 'left', // 文字垂直對齊方式,預設自動(top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
show: true, // 是否顯示分隔線。預設數值軸顯示,類目軸不顯示
interval: '0', // 座標軸刻度標籤的顯示間隔,在類目軸中有效.0顯示所有
color: ['#ccc'], //color分隔線顏色,可設定單個顏色,也可設定顏色陣列,分隔線會按陣列中顏色順序依次迴圈設定顏色
width: 3, // 分隔線線寬
type: 'solid', // 座標軸線線的型別(solid實線型別;dashed虛線型別;dotted點狀型別)
},
splitArea: {
show: true, // 是否顯示分隔區域
interval: '0', // 座標軸刻度標籤的顯示間隔,在類目軸中有效.0顯示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔區域顏色。分隔區會按陣列中顏色順序依次迴圈設定顏色。預設是一個深淺的間隔色
opacity: 1, // 圖形透明度。支援從0到1的數字,為0時不繪製該圖形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的顏色
fontStyle: 'normal', // 文字字型的風格(normal無樣式;italic斜體;oblique傾斜字型)
fontWeight: 'normal', //字型的粗細(normal無樣式;bold加粗;bolder加粗再加粗;lighter變細;數字定義粗細也可以取值範圍100至700)
fontSize: '20', // 文字字型大小
align: 'left', // 文字水平對齊方式,預設自動(left/center/right)
verticalAlign: 'left', // 文字垂直對齊方式,預設自動(top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3)
}
}

yAxis:y軸相關

series:資料相關

相關文章