echarts 属性详解

发布时间 2023-10-24 15:45:03作者: 慕容冰菡

echarts 属性详解


1、title:图表的标题,包括主标题和副标题

1)text:主标题文本内容,字符串类型。

2)subtext:副标题文本内容,字符串类型。

3)left:主副标题水平位置,可以设置为像素值、百分比,或者预设的字符串值(例如eft,center',right)top:主副标题垂直位置,同样可以设置为像素值、百分比或预设的字符串值。

4)textAlign:主副标题文本水平对产方式,可选值为'left,center’,right'。

5)textstyle:主副标题文本样式,是一个 JavaScript对象,可以设置字体大小、颜色、字体粗细等样式属性。

 

2、tooltip:提示框组件,用于显示数据项的详细信息,可以自定义显示内容和样式

1)trigger:提示相触发类型,可选值有tem’(数据项发),axis’(坐标轴发),one’(不触发)。也可以过设置回调函数来自定义触发方式。

2)axisPointer:坐标轴指示器的相关配置,包括类型、线条样式、标签等。

3)formatter:提示框的内容格式化函数,可以通过函数参数的方式获取到提示框显示的数据,从而进行格式化处理backqroundColor:提示框的背景色,可以设置为颜色值或渐变对象。

4)padding:提示框的内边距,是一个数组,分别表示上、右、下、左四个方向的内边距大小。

 

3、legend:图例组件,用于展示数据系列的标识和名称,支持点击切换系列的显示状态

1)data:图例的数据,是一个数组,每个元素对应一个系列的名称。

2)type:图例的类型,可选值为'plain’(普通图例)、scroll’(可滚动图例)。

3)orient:图例的布局方式,可选值为horizontal’(水平布局)、vertica’(垂直布局)selectedMode:图例的选中模式,可选值为'multiple’(多选) 和single’(单选)。

4)left:图例组件的水平位置,可以设置为像素值、百分比或预设的字符串值。

5)top:图例组件的垂直位置,同样可以设置为像素值、百分比或预设的字符串值。

6)itemwidth:图例标记的宽度,可以设置为像素值。

7)itemHeight:图例标记的高度,可以设置为像素值。


4、grid:直角坐标系内绘图网格,可以设置位置、大小和样式等属性

1)left:网格组件左侧位置,可以设置为像素值、百分比或预设的字符串值。

2)right:网格组件右侧位置,同样可以设置为像素值、百分比或预设的字符串值。

3)top:网格组件顶部位置,同样可以设置为像素值、百分比或预设的字符串值。

4)bottom:网格组件底部位置,同样可以设置为像素值、百分比或预设的字符串值。

5)containLabel:网格是否包含坐标轴的刻度标签,默认值为false,表示不包含。

6)backgroundcolor: 网格的背是色,可以设置为颜色值或新变对象。

7)borderColor:网格的边框颜色,可以设置为颜色值。

8)borderwidth:网格的边框宽度,可以设置为像素值。

9)tooltip:网格的提示框配置,可以覆盖全局的tooltip配置。

 

5、xAxis 和 yAxis:
直角坐标系中的 x 轴,支持多个坐标系和轴线样式的配置
直角坐标系中的 y 轴,支持多个坐标系和轴线样式的配置

1)type:坐标轴类型,可选值为value’(数值轴) 、category’ (类目轴) 、time’(时间轴) 、og’(对数轴)。

2)name:坐标轴名称,字符串类型。

3)nameLocation:坐标轴名称的位置,可选值为stat (起始位置)、middle’(中间位置)、end’(结束位置)。

4)nameGap:坐标轴名称与轴线之间的距离。

5)nameTextstyle:坐标轴名称的样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。

6)axisLine:坐标轴轴线的样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性axisTick:坐标轴刻度线的样式,也是一个 JavaScript 对象,可以设置线条颜色、宽度、长度等样式属性axisLabel: 坐标轴刻度标签的样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。

7)splitLine:坐标轴网格线的样式,同样是一个 JavaScript对象,可以设置线条颜色、宽度、类型等样式属性。

8)splitArea:坐标轴刻度区域的样式,也是一个 JavaScript 对象,可以设置背景色、边框线样式等属性。


6、axisTick

1)show:是否显示刻度线。

2)alignwithLabel:刻度线与刻度标签是否对齐,默认值为false。

3)interval:刻度线的显示间隔,可以设置为数字,表示每隔多少个刻度线显示一个,也可以设置为字符串“auto,表示自动计算间隔。

4)inside:刻度线是否朝内显示,默认值为false。

5)length:刻度线的长度,可以设置为像素值。

6)linestyle:刻度线的样式,同样是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。

 

7、series:数据系列,包括折线图、柱状图、散点图、饼图等,可以设置系列的类型、数据、样式和标注等属性

1)type:系列类型,可选值为ine’ (折线图)、“bar’(柱状图) 、pie'(饼图)等。

2)name:系列名称。

3)data:系列的数据,是一个数组,数组中每个元素代表一个数据项。

4)itemstyle:系列的样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。label: 系列的标签样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。

5)barwidth:柱状图的柱宽,可以设置为像素值或百分比。

6)barcategoryGap:柱状图的柱间距离,可以设置为像素值或百分比。

7)barGap:柱状图的系列间距离,可以设置为像素值或百分比。

8)smooth:折线图是否平滑显示,默认值为false。

9)symbol:折线图的标记点样式,可以设置为'circle'、“rect、"triangle'等值。

10)symbolsize:折线图的标记点大小,可以设置为像素值。

11)radius:饼图的半径,可以设置为像素值或百分比。

12)center:饼图的圆心坐标,可以设置为像素值或百分比。

13)roseType:饼图的玫瑰图类型,可选值为'radius和'area”。

14)LabelLine:饼图的标签线样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性.label:饼图的标签样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。