ECharts title配置標題
var option = {
//標題
title : {
show:true,//顯示策略，默認值true,可選爲：true（顯示） | false（隱藏）
text: '主標題',//主標題文本，'\n'指定換行
link:'',//主標題文本超鏈接,默認值true
target: null,//指定窗口打開主標題超鏈接，支持'self' | 'blank'，不指定等同爲'blank'（新窗口）
lineHeight: 56, // 行高
subtext: '副標題',//副標題文本，'\n'指定換行
sublink: '',//副標題文本超鏈接
subtarget: null,//指定窗口打開副標題超鏈接，支持'self' | 'blank'，不指定等同爲'blank'（新窗口）
x:'center'//水平安放位置，默認爲'left'，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
y: 'top',//垂直安放位置，默認爲top，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
textAlign: null,//水平對齊方式，默認根據x設置自動調整，可選爲： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//標題背景顏色，默認'rgba(0,0,0,0)'透明
borderColor: '#ccc',//標題邊框顏色,默認'#ccc'
borderWidth: 0,//標題邊框線寬，單位px，默認爲0（無邊框）
padding: 5,//標題內邊距，單位px，默認各方向內邊距爲5，接受數組分別設定上右下左邊距
itemGap: 10,//主副標題縱向間隔，單位px，默認爲10
textStyle: {//主標題文本樣式{
"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副標題文本樣式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,//字體大小
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一級層疊控制。默認0,每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
z: 6,//二級層疊控制，默認6,同一個canvas（相同zlevel）上z越高約靠頂層。
backgroundColor: 'transparent', // 標題背景色
borderColor: '#ccc', // 標題邊框顏色
borderWidth: 0, // 標題邊框線寬
borderRadius: 0, // 圓角半徑 單位px 接受`數組`分別指定4個圓角半徑
shadowBlur: ..., // 圖形陰影的模糊大小
shadowColor: ..., // 陰影顏色
shadowOffsetX: 0, // 陰影水平方向上的偏移距離
shadowOffsetY: 0 // 陰影垂直方向上的偏移距離
},
ECharts legend配置
legend: {
type: 'plain', // 圖例類型： 'plain'：普通圖例；'scroll'：可滾動翻頁圖例
orient: 'horizontal', // 圖例列表的佈局朝向：horizontal | vertocal
align: 'auto', // 圖例標記和文本的對齊：auto | left | right
itemWidth: 25, // 圖例標記的圖形寬度
itemHeight: 14, // 圖例標記的圖形高度
symbolKeepAspect: true, // 自定義圖標時，是否在縮放時保持縮放比
formatter: null, // 格式化圖例文本，支持字符串模板和回調函數
selectedMode: true, // 圖例選擇模式：
// 是否可以通過點擊圖例，改變圖表顯示狀態
inactiveColor: '#ccc', // 圖例關閉時的顏色
selected: { // 圖例選中狀態表
'系列1': true, // 選中'系列1'
'系列2': false // 不選中'系列2'
},
textStyle: {}, // 圖例的公用文本樣式，公共樣式請參考 `title`
tooltip: {...}, // 同tooltip
data: [{
name: ..., // 圖例項的名稱，應等於某系列的name值
icon: ...,
textStyle: {...}, // 圖例的文本樣式(single)
}],
// 以下屬性，type爲'scroll'時，有效
scrollDataIndex: 0, // 圖例當前最左上顯示項的`dataIndex`
pageButtonItemGap: 5, // 圖例控制塊中，按鈕和頁信息之間的間隔
pageButtonGap: null, // 圖例控制塊和圖例之間的間隔
pageButtonPosition: 'end', // 圖例控制塊的位置：'start'：控制塊在左或上，'end'：控制塊在右或下
pageFormatter: '{current}/{total}', // 頁信息的顯示格式
pageIcons: {
horizontal: [...], // orient爲'horizontal'時的翻頁按鈕圖標
vertical: [...] // orient爲'vertical'時的翻頁按鈕圖標
},
pageIconColor: '#2f4554', // 翻頁按鈕顏色
pageIconInactiveColor: '#aaa', // 翻頁按鈕不激活時的顏色
pageIconSize: 15, // 翻頁按鈕的大小，接受數組、數字
pageTextStyle: {...}, // 圖例頁信息的文字樣式
animation: ..., // 圖例翻頁是否使用動畫
animationDurationUpdate: 800, // 圖例翻頁時的動畫時常
}
grid（網格）
grid: {
show: false, // 是否顯示直角座標系網格
zlevel: 0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z: 2, //所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋
left: '10%',// 組件離容器左側的距離
top: 60,
right: '10%',
bottom: 60,
width: 'auto', //圖例寬度
height: 'auto',
containLabel: false, // grid 區域是否包含座標軸的刻度標籤
backgroundColor: 'transparent', //標題背景色
borderColor: '#ccc',
borderWidth: 1, 邊框線寬
shadowBlur: ...// 陰影顏色,
shadowColor: ...,// 陰影水平方向上的偏移距離
shadowOffsetX: 0, //陰影水平方向上的偏移距離
shadowOffsetY: 0, 陰影垂直方向上的偏移距離
}
categoryAxis（類目軸）
categoryAxis: {
show: true, // 是否顯示 x 軸
gridIndex: 0, // x軸所在的grid的索引
position: ..., // x軸的位置 'top'|'bootom'
offset: 0, // x軸相對於默認位置的偏移，在相同的`position`上有多個x軸的時候起作用**
name: ..., // 座標軸名稱
nameLocation: 'end', // 座標軸名稱顯示位置
// 'start'|'middle'或'center'|'end'
nameTextStyle: {...}, // 座標軸名稱的文字樣式
nameGap: 15, // 座標軸名稱與軸線之間的距離
nameRotate: null, // 座標軸名字旋轉，角度值
inverse: false, // 是否反向座標軸
boundaryGap: ..., // 座標軸兩邊留白// 類目軸 'true'|'false',非類目軸 數組["20%", "20%"]，數組值可以爲百分比或數值
min: null,
/** 座標軸刻度最小值,可以設置成特殊值 'dataMin'，此時取數據在該軸上的最小值作爲最小刻度。當設置成 function 形式時，可以根據計算得出數據的最小值來設定座標軸的最小值
**/
max: null, // 座標軸刻度最大值 同理 最小值
scale: false, // 數值軸有效，是否脫離0值比例
splitNumber: 5, // 座標軸分割段數（預估值）類目軸無效
minInterval: 0, // 自動計算座標軸最小間隔 設置成1保證座標軸分割刻度顯示成整數
maxInterval: ..., // 自動計算座標軸最大間隔
interval: ..., // 強制設置座標軸分割間隔
logBase: 10, // 對數軸的底數，只在對數軸中（type: 'log'）有效
silent: false, // 座標軸是否是靜態無法交互
triggerEvent: false, // 座標軸的標籤是否響應和觸發鼠標事件，默認不響應
axisLine: { // 座標軸軸線相關設置
show: true, // 是否顯示座標軸軸線
onZero: true, // X軸或Y軸的軸線是否在另一個軸的'0'刻度上，只有在另一個軸爲數值軸且包含'0'刻度時有效
onZeroAxisIndex: ..., // 當有雙軸時，指定在哪個軸的'0'刻度上
symbol: 'none', // 軸線兩邊的箭頭 ['none', 'arrow']
symbolSize: [10, 15], // 軸線兩邊的箭頭的大小，['垂直','水平']
symbolOffset: [0, 0], // 軸線兩邊的箭頭的偏移
},
axisTick: { // 座標軸刻度相關設置
show: true,
alignWithLabel: false, // 類目軸中'boundaryGap'爲'true'時有效，保證刻度線和標籤對齊
interval: 'auto', // 座標軸刻度的顯示間隔，在類目軸中有效
inside: false, // 座標軸刻度是否朝內，默認朝外
length: 5, // 座標軸刻度的長度
lineStyle: {
color: ...,
width: 1,
type: 'solid', // 座標軸刻度線的類型。
// 'solid'|'dashed'|'dotted'
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...
}
},
axisLabel: {...}, // 座標軸刻度標籤的相關設置
splitLine: { // 座標軸在'grid'區域中的分隔線
show: true,
interval: 'auto',
lineStyle: {...}
},
splitArea: { // 分隔區域的樣式設置
interval: 'auto',
show: false, // 是否顯示分隔區域
areaStyle: {
// 分隔區域顏色。分隔區域會按數組中顏色的順序依次循環設置顏色
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
}
},
data: [{...}],
axisPointer: {...},
zlevel: 0,
z: 0,
}
ECharts tooltip-trigger屬性
|
名稱 |
類型 |
默認值 |
可選值 |
效果 |
|
trigger |
string |
‘item’ |
‘item’,’axis’ |
觸發類型，默認數據觸發 |
當trigger爲’item’時只會顯示該點的數據，爲’axis’時顯示該列下所有座標軸所對應的數據
ECharts toolbox配置
1. toolbox：這是ECharts中的工具欄。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。
2. toolbox中的屬性，不包含五個工具。裏面最主要的就是feature這個，這是toolbox的配置項，五個工具的配置就是在這個裏面實現的。
|
屬性 |
類型 |
說明 |
|
toolbox.show |
boolean |
默認值爲true，是否顯示工具欄組件 |
|
toolbox.orient |
stirng |
默認值爲horizontal，工具欄 icon 的佈局朝向。可選項爲“horizontal”和“vertical” |
|
toolbox.itemSize |
number |
默認值爲15，工具欄 icon 的大小。 |
|
toolbox.itemGap |
number |
默認值爲10，工具欄 icon 每項之間的間隔。橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。 |
|
toolbox.showTitle |
boolean |
默認值爲true，是否在鼠標 hover 的時候顯示每個工具 icon 的標題。 |
|
toolbox.feature |
Object |
各工具配置項。 除了各個內置的工具按鈕外，還可以自定義工具按鈕。 注意，自定義的工具名字，只能以 my 開頭。 |
3. 下面來分別介紹這五個工具
saveAsImage：這個工具可以把圖表保存爲圖片。裏面有些常用的參數，type->保存圖片的格式，name->保存文件的名字，backgroundColor->保存圖片的背景色，show->是否顯示該工具，還有一些別的屬性可以自己再使用的時候查詢API文檔。
restore：配置項還原。主要屬性是show->是否顯示該工具。
dataView：數據視圖工具，可以展現當前圖表所用的數據，編輯後可以動態更新。show->是否顯示該工具，readOnly->是否不可編輯，optionToContent->自定義 dataView 展現函數，用以取代默認的 textarea 使用更豐富的數據編輯。可以返回 dom 對象或者 html 字符串，backgroundColor->數據視圖浮層背景色。
dataZoom：數據區域縮放。目前只支持直角座標系的縮放（這裏的含義就是柱狀體，折線圖可以縮放，但是像餅狀圖就不能縮放）。show->是否顯示該工具。
magicType：動態類型切換。show->是否顯示該工具，type->這是個數組，啓用的動態類型，包括'line'（切換爲折線圖）, 'bar'（切換爲柱狀圖）, 'stack'（切換爲堆疊模式）, 'tiled'（切換爲平鋪模式）。
ECharts xAxis配置 x座標軸的類型
xAxis.type | string
[ default: 'category' ]
座標軸類型。
可選：
- 'value' 數值軸，適用於連續數據。
- 'category' 類目軸，適用於離散的類目數據，爲該類型時必須通過 data 設置類目數據。
- 'time' 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
- 'log' 對數軸。適用於對數數據。
在tooltip中設置座標軸指示器屬性
由 Carrie 創建， 最後一次修改 2017-09-20
- tooltip.axisPointer.type | string
- [ default: 'line' ]
- 座標軸指示器的類型。
- 可選：
- 'line' 直線指示器
- 'shadow' 陰影指示器
- 'cross' 十字準星指示器。其實是種簡寫，表示啓用兩個正交的軸的 axisPointer。
- tooltip.axisPointer.axis | string
- [ default: 'auto' ]
- 座標軸指示器的座標軸。
- 默認情況，座標系會自動選擇顯示哪個軸的 axisPointer（默認取類目軸或者時間軸）。
- 可以是 'x', 'y', 'radius', 'angle'。
- tooltip.axisPointer.snap | boolean
- 座標軸指示器是否自動吸附到點上。默認自動判斷。
- 這個功能在數值軸和時間軸上比較有意義，可以自動尋找細小的數值點。
- tooltip.axisPointer.z | number
- 座標軸指示器的 z 值。控制圖形的前後順序。z 值小的圖形會被z值大的圖形覆蓋。