echarts常用配置項記錄

目錄

title（标題）textStyle 主标題樣式

legend（圖例）

grid（直角坐标系内繪圖網格）

xAxis（x軸）

标題元件，包含主标題和副标題。

常見的屬性值和詳細說明：

屬性

類型

作用

可選值

show

bolean

是否顯示标題元件

text

string

主标題文本，支援\n換行

textStyle

object

設定主标題樣式

subtext

副标題文本，支援\n換行

subtextStyle

設定副标題樣式

textAlign

整體（包括text和subtext）的水準對齊

'auto','left','right','center'

textVerticalAlign

整體（包括text和subtext）的垂直對齊

'auto','top','bottom','middle'

padding

number|array

标題内邊距，機關px，預設5，接受數組分别設定上右下左邊距

itemGap

number

主副标題之間的間距

left

string|number

title元件離容器左側的距離

可以是20這樣的具體像素值，

也可以是'20%'這樣的百分比，

也可以是'left','center','right'

top

title元件離容器上側的距離

也可以是'top','middle','bottom'

right

title元件離容器右側的距離

預設自适應

bottom

title元件離容器下側的距離

backgroundColor

Color

标題背景色，預設透明

可以是RGB表示'rgb(128,128,128)'，

也可以是RGBA表示'rgba(128, 128, 128, 0.5)'，

也可以使用十六進制格式，比如 '#ccc'

borderColor

标題的邊框顔色

支援的顔色格式同backgroundColor。

borderWidth

标題的邊框線寬

borderRadius

圓角半徑，機關px，支援傳入數組

如：borderRaidus:5, //統一設定四個角的圓角大小

borderRadius:[5,5,0,0], //(順時針左上，右上，右下，左下)

color

主标題文字的顔色

fontStyle

主标題文字字型的風格

'normal','italic','oblique'

fontWeight

主标題文字字型的粗細

'normal','bold','bolder','lighter',100,200...

fontSize

主标題文字的大小

lineHeight

行高

width

numbner

文本顯示的寬度

height

文本顯示的高度

textBorderColor

文字本身的描邊顔色

textBorderWidth

文字本身的描邊寬度

textBorderType

string|number|array

文字本身的描邊類型

'solid','dashed','dotted'

overflow

文字超出寬度是否截斷或換行，配置width時有效

'truncate'：截斷，并在末尾顯示ellipsis配置的文本，預設為...

'break'：換行

'breakAll'：換行，強制單詞内換行

圖例元件，展現了不同系列的标記，顔色和名字。可以通過點選圖例控制哪些系列不顯示。

當圖例數量過多時，可以使用垂直滾動和水準滾動圖例，通過type來設定。

type

圖例的類型。

'plain':普通圖例，預設值

'scroll'：可滾動翻頁的圖例

boolean

是否顯示元件

圖例元件離左側的距離

支援數字,百分比以及特定字元'left', 'center', 'right'

圖例元件離上側的距離

支援數字,百分比以及特定字元'top', 'middle', 'bottom'

圖例元件離右側的距離

支援數字,百分比，預設自适應

圖例元件離下側的距離

圖例元件的寬度

圖例元件的高度

orient

圖例清單的布局朝向

'horizontal'：水準

'vertical':垂直

align

圖例标記和文本的對齊。

'auto','left','right'

圖例内邊距

圖例每項之間的間隔，水準布局時是水準間隔，縱向布局時是縱向間隔

itemWidth

圖例标記的圖形寬度

itemHeight

圖例标記的圖形高度

itemStyle

Object

圖例的圖形樣式

lineStyle

圖例圖形中線的樣式

圖例的公用文本樣式

selectMode

string|boolean

圖例選擇的模式，預設開啟

設定成false關閉，

'single'使用單選

'multipe'使用多選

tooltip

圖例的tooltip配置，配置項同tooltip。

icon

圖例項的icon

'circle','rect','roundRect','triangle','diamond', 'pin', 'arrow', 'none'

data

array

圖例的資料數組。資料項通常為一個字元串

官方教程

圖例的背景色，預設透明

圖例的邊框顔色

圖例的邊框線寬

圓角半徑

scrollDataIndex

type為'scroll'時有效，圖例目前最左上顯示項的dataIndex。

grid元件離左側的距離

grid元件離上側的距離

grid元件離右側的距離

grid元件離下側的距離

grid元件的寬度

grid元件的高度

grid背景色，預設透明

grid邊框顔色

grid的邊框線寬

坐标軸類型

'value':數值軸，适用于連續資料

'category'類目軸，适用于離散的類目資料。

'time'：時間軸，适用于連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同

'log'：對數軸，适用于對數資料。

nameGap

坐标軸名稱與軸線之間的距離

nameRotate

坐标軸名字旋轉，角度值