echarts各項配置
基於版本v4.x
前言
吐血整理。
Echarts的各種配置真的是眼花繚亂，第一次使用的時候，內心真的是崩潰啊，看到就害怕。最近開始搞項目了，面對一堆圖表，更是無所適從，才萌生了整理echarts配置的想法。僅僅整理了常用的，後續如果有需求，會進行補充。
各項配置
title（包含主標題和副標題）
title: {
target: 'blank', // 指定窗口打開主標題超鏈接
// 'self'當前窗口打開
// 'blank'新窗口打開[default]
textStyle: { // 主標題文字樣式
color: '#333',
fontStyle: 'normal', // 字體風格
fontWeight: normal, // 粗細
fontFamily: 'sans-serif', // 字體
fontSize: 18,
lineHeight: 56, // 行高
textBorderColor: 'transparent', // 文字本身的描邊顏色
textBorderWidth: 0, // 文字本身的描邊寬度
textShadowColor: 'transparent', // 文字本身的陰影顏色
textShadowBlur: 0, // 文字本身的陰影長度
textShadowOffsetX: 0, // 文字本身的陰影X偏移
textShadowOffsetY: 0, // 文字本身的陰影Y偏移
},
subtextStyle: { // 副標題樣式
align: 'auto', // 文字水平對齊方式 left ¦ center ¦ right
verticalAlign: 'auto', // 文字垂直對齊方式 top ¦ middle ¦ bottom
},
textAlign: 'auto', // 整體（主副標題）的水平對齊
textVerticalAlign: 'auto', // 整體（主副標題）的垂直對齊
triggerEvent: false, // 是否觸發事件
padding: 5, // 標題內邊距，單位px，默認各方向內邊距爲5，
// 接受`數組`分別設定上右下左邊距，同css
itemGap: 10, // 主副標題間距
zlevel: 0, // 用於Canvas分層，內存開銷大，謹慎使用
z: 2, // 控制圖形的先後順序，優先級低於zlevel
x: 'left', // 水平安放位置，默認爲左對齊，可選爲：
// center ¦ left ¦ right ¦ 像素值
y: 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
// top ¦ bottom ¦ center ¦ 像素值
left: 'auto', // grid 組件容器左側的距離
// center ¦ left ¦ right ¦ 像素值 ¦ %
top: 'auto', // grid 組件容器上側的距離
// top ¦ middle ¦ bottom ¦ 像素值 ¦ %
right: 'auto', // grid 組件容器右側的距離
// 像素值 ¦ %
bottom: 'auto', // grid 組件容器下側的距離
// 像素值 ¦ %
backgroundColor: 'transparent', // 標題背景色
borderColor: '#ccc', // 標題邊框顏色
borderWidth: 0, // 標題邊框線寬
borderRadius: 0, // 圓角半徑 單位px
// 接受`數組`分別指定4個圓角半徑
shadowBlur: ..., // 圖形陰影的模糊大小
shadowColor: ..., // 陰影顏色
shadowOffsetX: 0, // 陰影水平方向上的偏移距離
shadowOffsetY: 0 // 陰影垂直方向上的偏移距離
}
legend（圖例）
僅列出圖例單獨的屬性，公共屬性如：show、zlevel、x、y、z、left、top、right、bottom、padding、itemGap、backgroundColor、borderColor、borderWidth、borderRadius、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY以及textStyle中的部分屬性，請參考title內容。
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,
z: 2,
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,
}
valueAxis（數值軸）、radiusAxis（極座標系的徑向軸）、angleAxis(極座標系的角度軸)
數值軸、極座標系的徑向軸、極座標系的角度軸的配置，基本與類目軸一致，可參考'categoryAxis'
line（折線圖）
line: {
name: ...,
coordinateSystem: 'cartesian2d', // 座標系
xAxisIndex: 0,
yAxisIndex: 0,
polarIndex: 0,
symbol: 'emptyCircle', // 標記的圖形 'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'，可通過'image://url'設爲圖片，其中'URL'爲圖片鏈接
symbolSize: 4, // 標記的大小
symbolRotate: ..., // 標記的旋轉角度
symbolKeepAspect: false, // 是否在縮放時保持該圖形的長寬比(僅圖片)
symbolOffset: [0, 0], // 標記相對於原本位置的偏移
showSymbol: true, // 是否顯示'symbol'
showAllSymbol: 'auto',
hoverAnimation: true, // 是否開啓'hover'在拐點標誌上的提示動畫效果
legendHoverLink: true, // 是否啓用圖例'hover'時的聯動高亮
stack: null, // 數據堆疊，同個類目軸上系列配置相同的'stack'值後，後一個系列的值會在前一個系列的值上相加
cursor: 'pointer',
connectNulls: false, // 是否連接空數據
clipOverflow: true, // 是否對超出部分裁剪，默認裁剪
step: false, // 是否是階梯線圖。可設爲'true'顯示成階梯線圖
label: {...}, // 圖形上的文本標籤，參考'title'
itemStyle: {...}, // 折線拐點標誌的樣式
lineStyle: {...}, // 線條樣式
areaStyle: {...}, // 區域填充樣式
emphasis: { // 圖形的高亮樣式
label: {...},
itemStyle: {...},
},
smooth: false, // 是否平滑曲線顯示
smoothMonotone: ..., // 折線平滑後是否在一個維度上保持單調性
sampling: ...,
dimensions: [...],
encode: {...},
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{
name: ...,
value: ...,
symbol: 'circle',
symbolSize: 4,
symbolRotate: ...,
symbolKeepAspect: false,
symbolOffset: [0, 0],
label: {...},
itemStyle: {...},
emphasis: {...},
tooltip: {...},
}],
markPoint: {...}, // 圖表標註
markLine: {...}, // 圖表標線
markArea: {...}, // 圖表標域，常用於標記圖表中某個範圍的數據
zlevel: 0,
z: 2,
silent: false,
animation: true,
}
bar（柱形圖）
bar: {
name: ...,
legendHoverLink: true,
coordinateSystem: 'cartesian2d',
xAxisIndex: 0,
yAxisIndex: 0,
label: {...},
itemStyle: {...},
emphasis: {...},
stack: null,
cursor: 'pointer',
barWidth: 自適應, // 柱條寬度
barMaxWidth: 自適應, // 柱條最大寬度
barMinHeight: 0, // 柱條最小高度
barGap: 30%, // 柱條間距 想要兩柱子重疊，可設爲'-100%'
barCategoryGap: '20%', // 同一系列的柱間距
large: false, // 是否開啓大數據量優化
largeThreshold: 400, // 開啓繪製優化的閾值
progressive: 5000, // 漸進式渲染時，每一幀繪製圖形數量
progressiveThreshold: 3000, // 啓用漸進式渲染的圖形數量閾值
progressiveChunkMode: mod, // 分片的方式：
// 'sequential'|'mod'
dimensions: [...],
encode: {...}, // 可定義'data'的某個維度被編碼
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{
name: ...,
value: ...,
label: {...}, // 單個柱條文本樣式設置
itemStyle: {...},
emphasis: {...},
tooltip: {...},
}],
markPoint: {...},
markLine: {...},
markArea: {...},
zlevel: 0,
z: 2,
}
pie（餅圖）
pie: {
legendHoverLink: true,
hoverAnimation: true,
hoverOffset: 10, // 高亮扇區的偏移距離
selectedMode: false, // 選中模式，表示是否支持多個選中
selectedOffset: 10, // 選中扇區的偏移距離
clockwise: true, // 餅圖的扇區是否是順時針排布
startAngle: 90, // 起始角度
minAngle: 0, // 最小的扇區角度
minShowLabelAngle: 0, // 小於該角度的扇區，不顯示標籤
roseType: false, // 是否展示成南丁格爾圖，通過半徑區分數據大小
// 'radius' | 'area'
avoidLabelOverlap: true, // 是否啓用防止標籤重疊策略
stillShowZeroSum: true, // 是否在數據和爲0的時候不顯示扇區
cursor: 'pointer',
label: {...}, // 餅圖圖形上的文本標籤，可用於說明圖形的一些數據信息
labelLine: { // 標籤的視覺引導線樣式
show: ...,
length: ..., // 視覺引導線第一段的長度
length2: ..., // 視覺引導線第二段的長度
smooth: false,
lineStyle: {...},
},
itemStyle: {...}, // 圖形樣式
emphasis: {...},
zlevel: 0,
z: 2,
center: ['50%', '50%'],
radius: [0, '75%'], // 餅圖的半徑
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{...}],
markPoint: {...},
markLine: {...},
markArea: {...},
}
polar（極座標）
polar: {
zlevel: 0,
z: 2,
// 極座標系的中心（圓心）座標，數組的第一項是橫座標，第二項是縱座標。
// 支持設置成百分比，第一項是相對於容器寬度，第二項是相對於容器高度
center: ['50%', '50%'],
/** 極座標系的半徑。可以爲如下類型：
number：直接指定外半徑值。
string：如，'20%'，表示外半徑爲可視區尺寸（容器高寬中較小一項）的20%長度
Array.<number|string>：數組的第一項是內半徑，第二項是外半徑
**/
radius: ...,
}
radar（雷達座標系）
radar: {
zlevel: 0,
z: 2,
center: ['50%', '50%'],
radius: 75%,
startAngle: 90,
name: {...}, // 雷達圖每個指示器名稱的配置項 可參考title中textStyle
nameGap: 15,
splitNumber: 5,
shape: 'polygon', // 雷達繪製類型 支持'polygon' 和 'circle'
scale: false,
silent: false,
triggerEvent: false,
axisLine: {
show: true,
symbol: 'none',
symbolSize: [10, 15],
symbolOffset: [0, 0],
lineStyle: {...},
},
splitLine: {
show: true,
lineStyle: {...},
},
splitArea: {
show: true,
areaStyle: {...},
},
indicator: [ // 雷達圖的指示器，用來指定雷達圖中的多個變量（維度）
// 類似於 直角座標系中的 data
{
name: ...,
max: ...,
min: ...,
color: ...,
}
],
}
結束
整理的目的不是記憶，把配置表背下來毫無意義，僅是爲了更加好的查詢各項圖表配置。整理後，對其有了整體認識，這算是一個意外的收穫吧。
同時將該文收錄在個人博客上lostimever.github.io。