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

坐标轴名字旋转，角度值